{% extends "base.html" %}
{% block title %}{{ t('dashboard') }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="panel">
        <div class="panel-header panel-header-inline">
            <div>
                <h1>{{ t('dashboard') }}</h1>
                <p>{{ ltext('Review current queues, overdue work, and recent activity. / راجع الطوابير الحالية والأعمال المتأخرة وآخر النشاط.') }}</p>
            </div>
            <a class="button button-secondary" href="{{ url_for('main.dashboard', export='xlsx') }}">{{ ltext('Export Excel / تصدير Excel') }}</a>
        </div>
    </section>

    <section class="metrics-grid">
        <article class="metric-card">
            <span>{{ t('open_tickets') }}</span>
            <strong>{{ summary.open_tickets }}</strong>
        </article>
        <article class="metric-card">
            <span>{{ t('overdue') }}</span>
            <strong>{{ summary.overdue_tickets }}</strong>
        </article>
        <article class="metric-card">
            <span>{{ t('sla_breaches') }}</span>
            <strong>{{ summary.sla_breaches }}</strong>
        </article>
        <article class="metric-card">
            <span>{{ t('unassigned') }}</span>
            <strong>{{ summary.unassigned_tickets }}</strong>
        </article>
    </section>

    <section class="content-grid two-column">
        <article class="panel">
            <div class="panel-header">
                <h1>{{ t('recently_updated_tickets') }}</h1>
            </div>
            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>{{ ltext('Ticket / التذكرة') }}</th>
                        <th>{{ ltext('Status / الحالة') }}</th>
                        <th>{{ ltext('Priority / الأولوية') }}</th>
                        <th>{{ ltext('Updated / آخر تحديث') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for ticket in recent_tickets %}
                        <tr>
                            <td><a href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}">{{ ticket.ticket_number }}</a><br><small>{{ ticket.title }}</small></td>
                            <td>{{ ticket.status.name if ticket.status else 'N/A' }}</td>
                            <td>{{ ticket.priority.name if ticket.priority else 'N/A' }}</td>
                            <td>{{ ticket.updated_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="4">{{ ltext('No tickets found. / لا توجد تذاكر.') }}</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </article>
        <article class="panel">
            <div class="panel-header">
                <h1>{{ t('overdue_queue') }}</h1>
            </div>
            <ul class="list-stack">
                {% for ticket in overdue_tickets %}
                    <li>
                        <a href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}">{{ ticket.ticket_number }}</a>
                        <span>{{ ticket.title }}</span>
                    </li>
                {% else %}
                    <li>{{ ltext('No overdue tickets. / لا توجد تذاكر متأخرة.') }}</li>
                {% endfor %}
            </ul>
        </article>
    </section>
{% endblock %}