{% extends "base.html" %}
{% block content %}
<div class="container" style="max-width:980px;margin:0 auto;padding:16px;">
  <h2 style="margin:6px 0 14px 0;">Support Inbox</h2>

  <div class="native-card" style="padding:12px;">
    <form method="get" style="display:flex;gap:10px;flex-wrap:wrap;">
      <input name="q" value="{{ q|default:'' }}" placeholder="Search user/session/message..." style="flex:1;min-width:220px;" class="native-input"/>
      <select name="status" class="native-input" style="min-width:160px;">
        <option value="">All</option>
        <option value="open" {% if status == 'open' %}selected{% endif %}>Open</option>
        <option value="closed" {% if status == 'closed' %}selected{% endif %}>Closed</option>
      </select>
      <button class="native-btn" type="submit">Search</button>
    </form>
  </div>

  <div style="height:12px;"></div>

  {% for t in threads %}
    <a href="{% url 'portal:staff_support_thread' t.id %}" class="native-card" style="display:block;padding:14px;text-decoration:none;">
      <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;">
        <div style="min-width:0;">
          <div style="font-weight:700;">Thread #{{ t.id }} • {{ t.status|title }}</div>
          <div style="opacity:.85;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
            {% if t.user %}User: {{ t.user.username }}{% else %}Guest: {{ t.session_key|default:"-" }}{% endif %}
            {% if t.last_preview %} — {{ t.last_preview }}{% endif %}
          </div>
        </div>
        <div style="opacity:.8;font-size:12px;">{{ t.updated_at|date:"M d, Y H:i" }}</div>
      </div>
    </a>
    <div style="height:10px;"></div>
  {% empty %}
    <div class="native-card" style="padding:14px;">No support threads yet.</div>
  {% endfor %}
</div>
{% endblock %}