{% extends "base.html" %}
{% block title %}Tickets — {{ brand }}{% endblock %}
{% block content %}
<h1 class="text-3xl font-bold">Tickets</h1>
<p class="text-white/60 text-sm">{{ tagline }}</p>

<form method="get" class="mt-4 flex flex-wrap items-end gap-3">
  <div>
    <label class="text-xs text-white/60">Status</label>
    <select name="status" class="block bg-black/40 border border-white/10 rounded-lg px-2 py-1.5">
      <option value="">Any</option>
      {% for s in ['open','in_progress','done','cancelled'] %}
        <option value="{{s}}" {{ 'selected' if request.args.get('status')==s else '' }}>{{s.replace('_',' ').title()}}</option>
      {% endfor %}
    </select>
  </div>
  <div>
    <label class="text-xs text-white/60">Assignee (Discord ID)</label>
    <input name="assignee" value="{{ request.args.get('assignee','') }}" class="bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" placeholder="1234567890" />
  </div>
  <div class="flex-1 min-w-[200px]">
    <label class="text-xs text-white/60">Search</label>
    <input name="q" value="{{ request.args.get('q','') }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" placeholder="title/description…" />
  </div>
  <button class="btn">Apply</button>
</form>

<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for t in tickets %}
  <a href="{{ url_for('ticket_detail', ticket_id=t.id) }}" class="card p-4 sm:p-5 block hover:border-white/20">
    <div class="flex items-start justify-between gap-3">
      <h3 class="font-semibold text-base sm:text-lg leading-snug">#{{t.id}} · {{ t.title }}</h3>
      <span class="tag whitespace-nowrap">{{ t.status.replace('_',' ').title() }}</span>
    </div>

    <!-- Line clamp fallback (3 lines) -->
    <p class="mt-2 text-white/80 text-sm sm:text-[0.95rem]" style="display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;">
      {{ t.description }}
    </p>

    <div class="mt-3 flex flex-wrap items-center gap-2 text-xs text-white/60">
      <span class="tag">Priority: {{ t.priority }}</span>
      {% for label in t.label_list() %}<span class="tag">{{ label }}</span>{% endfor %}
    </div>

    {% if t.assignee_name or t.assignee_id %}
      <div class="mt-3 text-sm text-white/70">Assigned to: <b>{{ t.assignee_name or ('<@' ~ t.assignee_id ~ '>') }}</b></div>
    {% endif %}

    <div class="mt-2 text-xs text-white/50">Updated {{ t.updated_at.strftime('%Y-%m-%d %H:%M') }} UTC</div>
  </a>
  {% else %}
  <div class="text-white/60">No tickets found.</div>
  {% endfor %}
</div>
{% endblock %}