{% extends "base.html" %}
{% block title %}{{ t('reports') }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="panel">
        <div class="panel-header panel-header-inline">
            <div>
                <h1>{{ t('reports') }}</h1>
                <p>{{ ltext('Operational summaries and chart-ready ticket distributions. / ملخصات تشغيلية وتوزيعات جاهزة للرسوم البيانية.') }}</p>
            </div>
            <a class="button button-secondary" href="{{ url_for('reports.index', export='xlsx') }}">{{ ltext('Export Excel / تصدير Excel') }}</a>
        </div>
    </section>
    <section class="metrics-grid">
        <article class="metric-card"><span>{{ ltext('Open / مفتوح') }}</span><strong>{{ summary.open_tickets }}</strong></article>
        <article class="metric-card"><span>{{ ltext('Overdue / متأخر') }}</span><strong>{{ summary.overdue_tickets }}</strong></article>
        <article class="metric-card"><span>{{ ltext('SLA Breaches / خروقات SLA') }}</span><strong>{{ summary.sla_breaches }}</strong></article>
        <article class="metric-card"><span>{{ ltext('Unassigned / غير موزع') }}</span><strong>{{ summary.unassigned_tickets }}</strong></article>
    </section>
    <section class="content-grid two-column">
        <article class="panel">
            <div class="panel-header">
                <h1>{{ ltext('Tickets by Status / التذاكر حسب الحالة') }}</h1>
            </div>
            <div class="chart-list" data-chart-endpoint="{{ url_for('reports.status_data') }}"></div>
        </article>
        <article class="panel">
            <div class="panel-header">
                <h1>{{ ltext('Tickets by Priority / التذاكر حسب الأولوية') }}</h1>
            </div>
            <div class="chart-list" data-chart-endpoint="{{ url_for('reports.priority_data') }}"></div>
        </article>
        <article class="panel">
            <div class="panel-header">
                <h1>{{ ltext('Tickets by Department / التذاكر حسب القسم') }}</h1>
            </div>
            <div class="chart-list" data-chart-endpoint="{{ url_for('reports.department_data') }}"></div>
        </article>
        <article class="panel">
            <div class="panel-header">
                <h1>{{ ltext('Tickets by Company / التذاكر حسب الشركة') }}</h1>
            </div>
            <div class="chart-list" data-chart-endpoint="{{ url_for('reports.company_data') }}"></div>
        </article>
    </section>
{% endblock %}