{{define "title"}}Sessions{{end}}
{{define "header"}}Sessions actives{{end}}
{{define "content"}}

<div class="flex items-center justify-between mb-6">
  <p class="text-gray-400 text-sm">{{len .Sessions}} session{{if gt (len .Sessions) 1}}s{{end}} active{{if gt (len .Sessions) 1}}s{{end}}</p>
  <button onclick="document.getElementById('revokeAllModal').classList.remove('hidden')"
          class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors">
    Révoquer toutes les autres
  </button>
</div>

<div class="bg-discord-card rounded-lg border border-discord-border overflow-hidden">
  {{if .Sessions}}
  <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">Admin</th>
          <th class="px-4 py-2 text-left">IP</th>
          <th class="px-4 py-2 text-left">User Agent</th>
          <th class="px-4 py-2 text-left">Dernière activité</th>
          <th class="px-4 py-2 text-left">Créée le</th>
          <th class="px-4 py-2 text-right">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-discord-border">
        {{range .Sessions}}
        <tr class="hover:bg-white/5 transition-colors {{if .IsCurrent}}bg-indigo-900/20{{end}}">
          <td class="px-4 py-2 text-white">
            {{.DiscordUsername}}
            {{if .IsCurrent}}<span class="ml-1 text-xs text-indigo-400">(vous)</span>{{end}}
          </td>
          <td class="px-4 py-2 text-gray-400 font-mono text-xs">{{.IPAddress}}</td>
          <td class="px-4 py-2 text-gray-500 text-xs max-w-[200px] truncate" title="{{.UserAgent}}">{{.UserAgent}}</td>
          <td class="px-4 py-2 text-gray-400 text-xs whitespace-nowrap">{{.LastActivity.Format "02/01/2006 15:04:05"}}</td>
          <td class="px-4 py-2 text-gray-400 text-xs whitespace-nowrap">{{.CreatedAt.Format "02/01/2006 15:04:05"}}</td>
          <td class="px-4 py-2 text-right">
            {{if not .IsCurrent}}
            <form method="POST" action="/sessions/{{.ID}}/revoke">
              <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
              <button type="submit"
                      class="px-3 py-1 text-xs text-red-400 hover:text-red-300 border border-red-900/50 hover:border-red-700 rounded transition-colors">
                Révoquer
              </button>
            </form>
            {{else}}
            <span class="text-xs text-gray-600">Session courante</span>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="px-5 py-12 text-center text-gray-500 text-sm">
    Aucune session active.
  </div>
  {{end}}
</div>

<!-- Revoke All Modal -->
<div id="revokeAllModal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50">
  <div class="bg-discord-card border border-discord-border rounded-xl p-6 w-full max-w-sm mx-4">
    <h3 class="text-white font-semibold mb-2">Révoquer toutes les autres sessions</h3>
    <p class="text-gray-400 text-sm mb-6">
      Cette action déconnectera toutes les sessions actives sauf la vôtre. Cette action est irréversible.
    </p>
    <div class="flex gap-3 justify-end">
      <button onclick="document.getElementById('revokeAllModal').classList.add('hidden')"
              class="px-4 py-2 text-sm text-gray-400 hover:text-white border border-gray-700 rounded-lg transition-colors">
        Annuler
      </button>
      <form method="POST" action="/sessions/revoke-all">
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
        <button type="submit" class="px-4 py-2 text-sm bg-red-600 hover:bg-red-500 text-white rounded-lg transition-colors">
          Révoquer tout
        </button>
      </form>
    </div>
  </div>
</div>

<script>
document.getElementById('revokeAllModal').addEventListener('click', function(e) {
  if (e.target === this) this.classList.add('hidden');
});
</script>
{{end}}