{% extends "base.html" %}
{% block title %}{{ ltext('Paid Tickets / التذاكر المأجورة') }} | {{ app_name }}{% endblock %}
{% block content %}
    <section class="panel">
        <div class="panel-header panel-header-inline">
            <div>
                <h1>{{ ltext('Paid Tickets / التذاكر المأجورة') }}</h1>
                <p>{{ ltext('Tickets converted to paid work with their current price. / التذاكر التي تم تحويلها إلى عمل مأجور مع سعرها الحالي.') }}</p>
            </div>
            <div class="button-row">
                <a class="button button-secondary" href="{{ xlsx_export_url }}">{{ ltext('Export Excel / تصدير Excel') }}</a>
                <a class="button button-secondary" href="{{ url_for('tickets.index') }}">{{ t('tickets') }}</a>
            </div>
        </div>
        {% if tickets.items %}
            <div class="ticket-card-grid">
                {% for ticket in tickets.items %}
                    <article class="ticket-card" style="--ticket-status-color: {{ ticket.status.color if ticket.status 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="priority-chip" style="color:#17a174;border-color:#17a174;">{{ '%.2f'|format(ticket.paid_amount or 0) }} {{ ticket.paid_currency }}</span>
                        </div>
                        <p class="ticket-card-desc">{{ ticket.description[:180] ~ ('...' if ticket.description|length > 180 else '') }}</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('Status / الحالة') }}</span>
                                <strong>{{ ticket.status.name if ticket.status else 'N/A'|ltext }}</strong>
                            </div>
                            <div>
                                <span>{{ ltext('Updated / آخر تحديث') }}</span>
                                <strong>{{ ticket.updated_at.strftime('%Y-%m-%d %H:%M') }}</strong>
                            </div>
                        </div>
                        <div class="ticket-card-footer ticket-card-footer-split">
                            <div class="button-row button-row-compact">
                                <span class="priority-chip" style="color:#17a174;border-color:#17a174;">{{ ltext('Paid Ticket / تذكرة مأجورة') }}</span>
                            </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>
        {% else %}
            <div class="empty-state">
                <h2>{{ ltext('No paid tickets available. / لا توجد تذاكر مأجورة حالياً.') }}</h2>
            </div>
        {% endif %}
        {% set pagination = tickets %}
        {% include "partials/pagination.html" %}
    </section>
{% endblock %}