{{define "title"}}Transcripts{{end}}
{{define "header"}}Transcripts{{end}}
{{define "content"}}

<!-- Filters -->
<form method="GET" action="/transcripts" class="bg-discord-card rounded-lg border border-discord-border p-4 mb-6">
  <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 mb-3">
    <div>
      <label class="block text-xs text-gray-400 mb-1">Recherche</label>
      <input type="text" name="search" value="{{.FSearch}}" placeholder="Titre, user ID…"
             class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-discord-accent">
    </div>

    <div>
      <label class="block text-xs text-gray-400 mb-1">Statut</label>
      <select name="status" class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
        <option value="">Tous</option>
        <option value="open" {{if eq .FStatus "open"}}selected{{end}}>Ouvert</option>
        <option value="claimed" {{if eq .FStatus "claimed"}}selected{{end}}>Claimé</option>
        <option value="closed" {{if eq .FStatus "closed"}}selected{{end}}>Fermé</option>
      </select>
    </div>

    <div>
      <label class="block text-xs text-gray-400 mb-1">Type</label>
      <select name="type" class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
        <option value="">Tous les types</option>
        {{range .Types}}
        <option value="{{.}}" {{if eq . $.FType}}selected{{end}}>{{.}}</option>
        {{end}}
      </select>
    </div>

    <div>
      <label class="block text-xs text-gray-400 mb-1">Staff</label>
      <select name="staff" class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
        <option value="">Tous les staffs</option>
        {{range .StaffList}}
        <option value="{{.}}" {{if eq . $.FStaff}}selected{{end}}>{{.}}</option>
        {{end}}
      </select>
    </div>

    {{if .Guilds}}
    <div>
      <label class="block text-xs text-gray-400 mb-1">Serveur</label>
      <select name="guild" class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
        <option value="">Tous les serveurs</option>
        {{range .Guilds}}
        <option value="{{.ID}}" {{if eq .ID $.FGuild}}selected{{end}}>{{.Name}}</option>
        {{end}}
      </select>
    </div>
    {{end}}

    <div>
      <label class="block text-xs text-gray-400 mb-1">Du</label>
      <input type="date" name="from" value="{{.FFrom}}"
             class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
    </div>

    <div>
      <label class="block text-xs text-gray-400 mb-1">Au</label>
      <input type="date" name="to" value="{{.FTo}}"
             class="w-full bg-discord-hover border border-discord-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-discord-accent">
    </div>
  </div>

  <div class="flex items-center gap-2">
    <button type="submit"
            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors">
      Filtrer
    </button>
    <a href="/transcripts" class="px-4 py-2 text-sm text-gray-400 hover:text-white border border-discord-border rounded-lg transition-colors">
      Réinitialiser
    </a>
    <span class="text-xs text-gray-500 ml-auto">{{.Total}} résultat{{if gt .Total 1}}s{{end}}</span>
  </div>
</form>

<!-- Tickets table -->
<div class="bg-discord-card rounded-lg border border-discord-border overflow-hidden">
  {{if .Tickets}}
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-xs text-gray-400 uppercase border-b border-discord-border">
          <th class="px-4 py-2 text-left">#</th>
          <th class="px-4 py-2 text-left">Serveur</th>
          <th class="px-4 py-2 text-left">Type</th>
          <th class="px-4 py-2 text-left">Utilisateur</th>
          <th class="px-4 py-2 text-left">Staff</th>
          <th class="px-4 py-2 text-left">Titre</th>
          <th class="px-4 py-2 text-left">Statut</th>
          <th class="px-4 py-2 text-left">Ouvert le</th>
          <th class="px-4 py-2 text-left">Fermé le</th>
          <th class="px-4 py-2 text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-discord-border">
        {{range .Tickets}}
        <tr class="hover:bg-white/5 transition-colors">
          <td class="px-4 py-2 text-indigo-400 font-mono">{{.TicketNumber}}</td>
          <td class="px-4 py-2 text-xs text-indigo-300">
            {{if .GuildID}}{{$gn := index $.GuildNames .GuildID}}{{if $gn}}{{$gn}}{{else}}{{.GuildID}}{{end}}{{else}}<span class="text-gray-600">—</span>{{end}}
          </td>
          <td class="px-4 py-2 text-gray-300">{{.Type}}</td>
          <td class="px-4 py-2 text-gray-400 font-mono text-xs">{{.UserID}}</td>
          <td class="px-4 py-2 text-gray-400 font-mono text-xs">
            {{if .ClaimedBy.Valid}}{{.ClaimedBy.String}}{{else}}—{{end}}
          </td>
          <td class="px-4 py-2 text-white max-w-[200px] truncate">
            {{if .TicketTitle.Valid}}{{.TicketTitle.String}}{{else}}<span class="text-gray-500">—</span>{{end}}
          </td>
          <td class="px-4 py-2">
            {{if eq .Status "open"}}
            <span class="px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-400 border border-green-800">Ouvert</span>
            {{else if eq .Status "claimed"}}
            <span class="px-2 py-0.5 rounded text-xs bg-yellow-900/40 text-yellow-400 border border-yellow-800">Claimé</span>
            {{else}}
            <span class="px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400">Fermé</span>
            {{end}}
          </td>
          <td class="px-4 py-2 text-gray-400 text-xs whitespace-nowrap">{{.OpenedAt.Format "02/01/06 15:04"}}</td>
          <td class="px-4 py-2 text-gray-400 text-xs whitespace-nowrap">
            {{if .ClosedAt.Valid}}{{.ClosedAt.Time.Format "02/01/06 15:04"}}{{else}}—{{end}}
          </td>
          <td class="px-4 py-2 text-right">
            <div class="flex items-center gap-1 justify-end">
              {{if .TranscriptPath.Valid}}
              <a href="/transcripts/view/{{.ID}}" target="_blank"
                 class="px-2 py-1 text-xs text-indigo-400 hover:text-indigo-300 border border-indigo-700/50 hover:border-indigo-500 rounded transition-colors">
                Voir
              </a>
              <a href="/transcripts/download/{{.ID}}"
                 class="px-2 py-1 text-xs text-gray-400 hover:text-gray-200 border border-gray-700 hover:border-gray-500 rounded transition-colors">
                ↓
              </a>
              {{else}}
              <span class="text-xs text-gray-600">—</span>
              {{end}}
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  {{if gt .Pages 1}}
  <div class="px-5 py-3 border-t border-discord-border flex items-center gap-2 text-sm">
    {{if gt .Page 1}}
    <a href="?page={{add .Page -1}}&status={{.FStatus}}&type={{.FType}}&staff={{.FStaff}}&guild={{.FGuild}}&from={{.FFrom}}&to={{.FTo}}&search={{.FSearch}}"
       class="px-3 py-1 rounded border border-discord-border text-gray-300 hover:text-white hover:border-gray-500 transition-colors">← Précédent</a>
    {{end}}
    <span class="text-gray-400">Page {{.Page}} / {{.Pages}}</span>
    {{if lt .Page .Pages}}
    <a href="?page={{add .Page 1}}&status={{.FStatus}}&type={{.FType}}&staff={{.FStaff}}&guild={{.FGuild}}&from={{.FFrom}}&to={{.FTo}}&search={{.FSearch}}"
       class="px-3 py-1 rounded border border-discord-border text-gray-300 hover:text-white hover:border-gray-500 transition-colors">Suivant →</a>
    {{end}}
  </div>
  {{end}}

  {{else}}
  <div class="px-5 py-12 text-center text-gray-500 text-sm">
    Aucun ticket trouvé pour ces critères.
  </div>
  {{end}}
</div>
{{end}}