{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">My Support Tickets</h1>
    <a href="{% url 'create_ticket' %}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> New Ticket
    </a>
</div>

{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
{% endif %}

<div class="table-responsive">
    <table class="table table-hover">
        <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>Subject</th>
                <th>Status</th>
                <th>Priority</th>
                <th>Created</th>
                <th>Resolved At</th>
                <th>Time To Resolution</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for ticket in tickets %}
            <tr>
                <td>#{{ ticket.id }}</td>
                <td>{{ ticket.subject }}</td>
                <td>
                    <span class="badge
                        {% if ticket.status == 'open' %}bg-primary
                        {% elif ticket.status == 'in_progress' %}bg-info
                        {% elif ticket.status == 'resolved' %}bg-success
                        {% else %}bg-secondary{% endif %}">
                        {{ ticket.get_status_display }}
                    </span>
                </td>
                <td>
                    <span class="badge
                        {% if ticket.priority == 'low' %}bg-success
                        {% elif ticket.priority == 'medium' %}bg-warning
                        {% elif ticket.priority == 'high' %}bg-danger
                        {% else %}bg-dark{% endif %}">
                        {{ ticket.get_priority_display }}
                    </span>
                </td>
                <td>{{ ticket.created_at|date:"M d, Y H:i" }}</td>
                <td>{{ ticket.updated_at|date:"M d, Y H:i" }}</td>
                <td>
                    <p>
                        <i class="fa fa-clock"></i>&nbsp;
                        {{ ticket.time_to_resolution_display }}
                    </p>
                <td>
                    <a href="{% url 'ticket_detail' ticket.id %}" class="btn btn-sm btn-outline-primary">
                        View
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">No tickets found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}