{% extends "website/base.html" %}
{% block content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">🛟</div>
      <div>
        <h1 class="h1" style="margin:0">Support Tickets</h1>
        <div class="small">Review and reply to client support requests.</div>
      </div>
    </div>
    <div class="sep"></div>

    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px">
      <a class="btn" href="?">All</a>
      <a class="btn" href="?status=open">Open</a>
      <a class="btn" href="?status=pending">Pending</a>
      <a class="btn" href="?status=closed">Closed</a>
    </div>

    <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px">
      <a class="btn btn-accent" href="{% url 'website:staff_support_analytics' %}">📊 Support Analytics</a>
    </div>

    <div style="overflow:auto">
      <table class="table" style="min-width:720px">
        <thead>
          <tr>
            <th>ID</th>
            <th>Client</th>
            <th>Subject</th>
            <th>Status</th>
            <th>Created</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for t in tickets %}
          <tr>
            <td><strong>{{ t.public_id }}</strong></td>
            <td>{{ t.full_name }}<div class="small">{{ t.phone }} {{ t.email }}</div></td>
            <td>{{ t.subject }}</td>
            <td>{{ t.get_status_display }}</td>
            <td>{{ t.created_at|date:"M d, Y H:i" }}</td>
            <td><a class="link" href="{% url 'website:staff_support_ticket' t.public_id %}">Open</a></td>
          </tr>
          {% empty %}
          <tr><td colspan="6">No tickets.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}