{% extends "base.html" %}

{% block title %}Issues - {{ app_name }}{% endblock %}
{% block page_title %}Issue Tracker{% endblock %}

{% block content %}
<!-- Issue Stats -->
<div class="metrics-grid">
    <div class="metric-card primary">
        <div class="metric-info">
            <span class="metric-label">Total Issues</span>
            <span class="metric-value">{{ stats.total }}</span>
        </div>
    </div>
    <div class="metric-card danger">
        <div class="metric-info">
            <span class="metric-label">Open</span>
            <span class="metric-value">{{ stats.open }}</span>
        </div>
    </div>
    <div class="metric-card success">
        <div class="metric-info">
            <span class="metric-label">Closed</span>
            <span class="metric-value">{{ stats.closed }}</span>
        </div>
    </div>
    <div class="metric-card warning">
        <div class="metric-info">
            <span class="metric-label">Resolution Rate</span>
            <span class="metric-value">{{ "%.0f"|format(stats.resolution_rate * 100) }}%</span>
        </div>
    </div>
</div>

<!-- Priority Breakdown -->
<div class="panel">
    <h3><i class="fas fa-layer-group"></i> Priority Distribution</h3>
    <div class="priority-grid">
        {% for priority, count in stats.by_priority.items() %}
        <div class="priority-item priority-{{ priority.lower() }}">
            <span class="priority-label">{{ priority }}</span>
            <span class="priority-count">{{ count }}</span>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Issues List -->
<div class="panel">
    <h3><i class="fas fa-list"></i> Issues</h3>
    <div class="table-wrapper">
        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Priority</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody>
                {% for issue in issues %}
                <tr>
                    <td>#{{ issue.id }}</td>
                    <td>
                        <span class="badge priority-{{ issue.priority.lower() }}">{{ issue.priority }}</span>
                    </td>
                    <td>{{ issue.title }}</td>
                    <td>{{ issue.type }}</td>
                    <td>
                        {% if issue.state == 'open' %}
                        <span class="badge warning">Open</span>
                        {% elif issue.state == 'closed' %}
                        <span class="badge success">Closed</span>
                        {% else %}
                        <span class="badge info">{{ issue.state }}</span>
                        {% endif %}
                    </td>
                    <td>{{ issue.created_at.split('T')[0] if issue.created_at else '-' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}