{% extends "base.html" %}
{% block title %}{{ ltext('Finished Tickets / التذاكر المنتهية') }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="panel">
        <div class="panel-header panel-header-inline">
            <div>
                <h1>{{ ltext('Finished Tickets / التذاكر المنتهية') }}</h1>
                <p>{{ ltext('Archived tickets that were completed or cancelled. / التذاكر المؤرشفة التي تم إنهاؤها أو إلغاؤها.') }}</p>
            </div>
            <a class="button button-secondary" href="{{ xlsx_export_url }}">{{ ltext('Export Excel / تصدير Excel') }}</a>
        </div>

        {% if archive_groups %}
            <div class="ticket-board">
                {% for group in archive_groups %}
                    <section class="status-table-panel" style="--status-color: {{ group.color }};">
                        <div class="status-table-header">
                            <div class="status-table-title">
                                <span class="status-table-dot"></span>
                                <h2>{{ ltext(group.title) }}</h2>
                            </div>
                            <span class="status-table-count">{{ group.tickets|length }}</span>
                        </div>
                        <div class="ticket-card-grid archive-ticket-grid">
                            {% for ticket in group.tickets %}
                                <article class="ticket-card" style="--ticket-status-color: {{ ticket.display_status_color }}; --ticket-priority-color: {{ ticket.priority.color if ticket.priority else '#8ea2b3' }};">
                                    <div class="ticket-card-header">
                                        <div>
                                            <a class="ticket-card-number" href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}">{{ ticket.ticket_number }}</a>
                                            <h3 class="ticket-card-title">
                                                <a href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}">{{ ticket.title }}</a>
                                            </h3>
                                        </div>
                                        <span class="status-chip" style="background-color: {{ ticket.display_status_color }};">
                                            {{ ltext('Cancelled / ملغاة') if ticket.is_cancelled else (ticket.status.name if ticket.status else ltext('Finished / منتهية')) }}
                                        </span>
                                    </div>
                                    <p class="ticket-card-desc">
                                        {{ (ticket.description[:160] ~ '...') if ticket.description and ticket.description|length > 160 else (ticket.description or t('no_description')) }}
                                    </p>
                                    <div class="ticket-card-meta">
                                        <div>
                                            <span>{{ ltext('Company / الشركة') }}</span>
                                            <strong>{{ ticket.company.name if ticket.company else t('internal') }}</strong>
                                        </div>
                                        <div>
                                            <span>{{ ltext('Department / القسم') }}</span>
                                            <strong>{{ ticket.department.name if ticket.department else t('unassigned') }}</strong>
                                        </div>
                                        <div>
                                            <span>{{ ltext('Closed / أغلقت') }}</span>
                                            <strong>{{ ticket.closed_at.strftime('%Y-%m-%d %H:%M') if ticket.closed_at else '-' }}</strong>
                                        </div>
                                        <div>
                                            <span>{{ ltext('Priority / الأولوية') }}</span>
                                            <strong>{{ ticket.priority.name if ticket.priority else ('N/A'|ltext) }}</strong>
                                        </div>
                                    </div>
                                    <div class="ticket-card-footer ticket-card-footer-split">
                                        <div class="button-row button-row-compact">
                                            {% if ticket.is_cancelled %}
                                                <span class="ticket-flag ticket-flag-danger">{{ ltext('Cancelled / ملغاة') }}</span>
                                            {% else %}
                                                <span class="ticket-flag" style="background: {{ ticket.display_status_color }};">{{ ltext('Finished / منتهية') }}</span>
                                            {% endif %}
                                        </div>
                                        <div class="button-row button-row-compact">
                                            {% if ticket.id in editable_ticket_ids %}
                                                <a class="button button-secondary button-small" href="{{ url_for('tickets.edit', ticket_id=ticket.id) }}">{{ t('edit') }}</a>
                                            {% endif %}
                                            <a class="button button-secondary button-small" href="{{ url_for('tickets.detail', ticket_id=ticket.id) }}">{{ t('view') }}</a>
                                        </div>
                                    </div>
                                </article>
                            {% endfor %}
                        </div>
                    </section>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <h2>{{ ltext('No finished or cancelled tickets found. / لا توجد تذاكر منتهية أو ملغاة.') }}</h2>
            </div>
        {% endif %}

        {% set pagination = tickets %}
        {% include "partials/pagination.html" %}
    </section>
{% endblock %}