{% extends "base.html" %}

{% block title %}Ticket Queue · RelayDesk{% endblock %}
{% block meta_description %}Search and filter support tickets by status, priority, category, requester, and content.{% endblock %}

{% block content %}
<section class="page-hero py-5">
  <div class="container">
    <div class="row align-items-end g-4">
      <div class="col-lg-7">
        <span class="eyebrow">Ticket queue</span>
        <h1 class="display-5 fw-bold mt-3">Search, filter, and triage support work.</h1>
        <p class="lead text-muted mb-0">A clean queue for incoming requests, active triage, waiting tickets, and resolved work.</p>
      </div>
      <div class="col-lg-5 text-lg-end">
        <a class="btn btn-primary btn-lg" href="{% url 'ticket_create' %}">Submit ticket</a>
      </div>
    </div>
  </div>
</section>

<section class="container metrics-strip mb-4">
  <div class="row g-3">
    <div class="col-6 col-lg-3"><div class="metric-card"><span>Total</span><strong>{{ stats.total }}</strong></div></div>
    <div class="col-6 col-lg-3"><div class="metric-card"><span>Open</span><strong>{{ stats.open }}</strong></div></div>
    <div class="col-6 col-lg-3"><div class="metric-card"><span>In triage</span><strong>{{ stats.triage }}</strong></div></div>
    <div class="col-6 col-lg-3"><div class="metric-card"><span>Resolved</span><strong>{{ stats.resolved }}</strong></div></div>
  </div>
</section>

<section class="container mb-5">
  <div class="support-card mb-4">
    <form class="row g-3 align-items-end" method="get">
      <div class="col-lg-4">
        <label class="form-label" for="ticket-q">Search</label>
        <input id="ticket-q" class="form-control" type="search" name="q" value="{{ query }}" placeholder="Subject, requester, details">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label" for="ticket-status">Status</label>
        <select id="ticket-status" class="form-select" name="status">
          <option value="">Any status</option>
          {% for value,label in status_choices %}
          <option value="{{ value }}" {% if selected_status == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label" for="ticket-priority">Priority</label>
        <select id="ticket-priority" class="form-select" name="priority">
          <option value="">Any priority</option>
          {% for value,label in priority_choices %}
          <option value="{{ value }}" {% if selected_priority == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label" for="ticket-category">Category</label>
        <select id="ticket-category" class="form-select" name="category">
          <option value="">Any category</option>
          {% for value,label in category_choices %}
          <option value="{{ value }}" {% if selected_category == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-sm-6 col-lg-2 d-grid">
        <button class="btn btn-primary" type="submit">Apply filters</button>
      </div>
    </form>
  </div>

  {% if tickets %}
  <div class="ticket-table support-card p-0 overflow-hidden">
    {% for ticket in tickets %}
    <a class="ticket-row" href="{{ ticket.get_absolute_url }}">
      <div class="ticket-row-main">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
          <strong>{{ ticket.ticket_number }}</strong>
          <span class="status-badge status-{{ ticket.status }}">{{ ticket.get_status_display }}</span>
          <span class="priority-pill priority-{{ ticket.priority }}">{{ ticket.get_priority_display }}</span>
        </div>
        <h2 class="h5 mb-1">{{ ticket.subject }}</h2>
        <p class="mb-0 text-muted">{{ ticket.requester_name }} · {{ ticket.get_category_display }} · {{ ticket.reply_count }} repl{{ ticket.reply_count|pluralize:"y,ies" }}</p>
      </div>
      <div class="ticket-row-meta">
        <span>Updated {{ ticket.updated_at|timesince }} ago</span>
        <small>{% if ticket.assigned_to %}Assigned to {{ ticket.assigned_to.get_username }}{% else %}Unassigned{% endif %}</small>
      </div>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state support-card">
    <div class="empty-shape" aria-hidden="true"></div>
    <h2>No tickets match these filters</h2>
    <p>Try clearing filters or create the first ticket for this queue.</p>
    <a class="btn btn-primary" href="{% url 'ticket_create' %}">Submit ticket</a>
  </div>
  {% endif %}
</section>
{% endblock %}