{% extends "base.html" %}

{% block title %}Support Tickets - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Support Tickets</h1>
        <p class="text-muted">View and manage support tickets</p>
    </div>
    <div>
        <a href="/support/create" class="btn btn-primary">+ Create Ticket</a>
    </div>
</div>

<!-- Filters -->
<div class="filters-bar">
    <form method="get" action="/support" class="filter-form">
        <div class="filter-group">
            <label for="status">Status:</label>
            <select name="status" id="status" onchange="this.form.submit()">
                <option value="">All</option>
                <option value="OPEN" {% if status_filter == 'OPEN' %}selected{% endif %}>Open</option>
                <option value="ASSIGNED" {% if status_filter == 'ASSIGNED' %}selected{% endif %}>Assigned</option>
                <option value="IN_PROGRESS" {% if status_filter == 'IN_PROGRESS' %}selected{% endif %}>In Progress</option>
                <option value="WAITING_CUSTOMER" {% if status_filter == 'WAITING_CUSTOMER' %}selected{% endif %}>Waiting Customer</option>
                <option value="WAITING_INTERNAL" {% if status_filter == 'WAITING_INTERNAL' %}selected{% endif %}>Waiting Internal</option>
                <option value="RESOLVED" {% if status_filter == 'RESOLVED' %}selected{% endif %}>Resolved</option>
                <option value="CLOSED" {% if status_filter == 'CLOSED' %}selected{% endif %}>Closed</option>
            </select>
        </div>
        
        <div class="filter-group">
            <label for="ticket_type">Type:</label>
            <select name="ticket_type" id="ticket_type" onchange="this.form.submit()">
                <option value="">All</option>
                <option value="TECHNICAL" {% if type_filter == 'TECHNICAL' %}selected{% endif %}>Technical</option>
                <option value="BILLING" {% if type_filter == 'BILLING' %}selected{% endif %}>Billing</option>
                <option value="ORDER_ISSUE" {% if type_filter == 'ORDER_ISSUE' %}selected{% endif %}>TRF Issue</option>
                <option value="SPECIMEN_ISSUE" {% if type_filter == 'SPECIMEN_ISSUE' %}selected{% endif %}>Specimen Issue</option>
                <option value="RESULT_INQUIRY" {% if type_filter == 'RESULT_INQUIRY' %}selected{% endif %}>Result Inquiry</option>
                <option value="ACCESS_REQUEST" {% if type_filter == 'ACCESS_REQUEST' %}selected{% endif %}>Access Request</option>
                <option value="FEATURE_REQUEST" {% if type_filter == 'FEATURE_REQUEST' %}selected{% endif %}>Feature Request</option>
                <option value="OTHER" {% if type_filter == 'OTHER' %}selected{% endif %}>Other</option>
            </select>
        </div>
    </form>
</div>

<!-- Tickets Table -->
<div class="card">
    <table class="data-table">
        <thead>
            <tr>
                <th>Ticket #</th>
                <th>EUID</th>
                <th>Subject</th>
                <th>Type</th>
                <th>Priority</th>
                <th>Status</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if tickets %}
                {% for ticket, revision in tickets %}
                <tr>
                    <td>
                        <a href="/support/{{ ticket.euid }}" class="link">
                            {{ ticket.ticket_number }}
                        </a>
                    </td>
                    <td><a class="text-mono text-sm" href="/tapdb/object/{{ ticket.euid }}">{{ ticket.euid }}</a></td>
                    <td>
                        <strong>{{ revision.subject }}</strong>
                    </td>
                    <td>
                        <span class="badge badge-default">
                            {{ revision.ticket_type.replace('_', ' ') }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ 'danger' if revision.priority == 'URGENT' else 'warning' if revision.priority == 'HIGH' else 'default' }}">
                            {{ revision.priority }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ 'success' if revision.status == 'RESOLVED' else 'secondary' if revision.status == 'CLOSED' else 'primary' if revision.status == 'IN_PROGRESS' else 'default' }}">
                            {{ revision.status.replace('_', ' ') }}
                        </span>
                    </td>
                    <td>{{ ticket.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/support/{{ ticket.euid }}" class="btn btn-sm btn-secondary">View</a>
                    </td>
                </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="8" class="text-center text-muted">
                        No tickets found
                    </td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<div class="mt-md">
    <a href="/" class="btn btn-secondary">← Back to Dashboard</a>
</div>
{% endblock %}