{% extends 'base.html' %}
{% load i18n %}
{% block content %}
<div class="container mt-3 mb-3">
    <h1 class="mb-4">My Support Tickets</h1>    
    {% if tickets %}
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="table-dark">
                <tr>
                    <th>Ticket ID</th>
                    <th>Subject</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            {% for ticket in tickets %}
            <tr>
                <td>#{{ ticket.id }}</td>
                <td>{{ ticket.subject }}</td>
                <td>
                    <span class="badge {% if ticket.priority == 'Urgent' %}bg-danger{% elif ticket.priority == 'High' %}bg-warning{% else %}bg-info{% endif %}">
                        {{ ticket.priority }}
                    </span>
                </td>
                <td>
                    <span class="badge {% if ticket.status == 'Resolved' or ticket.status == 'Closed' %}bg-success{% elif ticket.status == 'In Progress' %}bg-primary{% else %}bg-secondary{% endif %}">
                        {{ ticket.status }}
                    </span>
                </td>
                <td>{{ ticket.created_at|date:"d M Y H:i" }}</td>
                <td>
                    <a href="{% url 'shop:ticket_detail' ticket.id %}" class="btn btn-sm btn-outline-primary">View Details</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="alert alert-info">
        You have no support tickets yet. If you need help, use the AI chat and escalate to a live agent.
    </div>
    {% endif %}
    <a href="{% url 'shop:home' %}" class="btn btn-primary">Back to Shop</a>
</div>
{% endblock %}