{{define "title"}}Panels{{end}}
{{define "header"}}Panels{{end}}
{{define "content"}}
<div class="flex items-center justify-between mb-6">
  <p class="text-gray-400 text-sm">{{len .Panels}} panel{{if gt (len .Panels) 1}}s{{end}} configuré{{if gt (len .Panels) 1}}s{{end}}</p>
  <a href="/panels/new" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors">
    + Créer un panel
  </a>
</div>

{{if .Panels}}
<div class="grid gap-4">
  {{range .Panels}}
  <div class="bg-discord-card rounded-lg border border-discord-border p-5 flex items-center gap-4">
    <!-- Color swatch -->
    <div class="w-1 self-stretch rounded-full flex-shrink-0" style="background-color:{{.EmbedColor}}"></div>
    <!-- Info -->
    <div class="flex-1 min-w-0">
      <div class="flex items-center gap-2 mb-1">
        <span class="font-semibold text-white">{{.Name}}</span>
        <span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">{{len .Types}} type{{if gt (len .Types) 1}}s{{end}}</span>
        {{if .MessageID.Valid}}<span class="text-xs text-green-400 bg-green-900/30 px-2 py-0.5 rounded">Envoyé</span>{{end}}
        {{if .GuildID}}
          {{$gname := index $.GuildNames .GuildID}}
          <span class="text-xs text-indigo-300 bg-indigo-900/30 px-2 py-0.5 rounded">{{if $gname}}{{$gname}}{{else}}{{.GuildID}}{{end}}</span>
        {{end}}
      </div>
      <p class="text-sm text-gray-400 truncate">{{.EmbedTitle}}</p>
      {{if .ChannelID.Valid}}<p class="text-xs text-gray-600 mt-0.5">Channel : {{.ChannelID.String}}</p>{{end}}
    </div>
    <!-- Actions -->
    <div class="flex items-center gap-2 flex-shrink-0">
      <a href="/panels/{{.ID}}/edit" class="px-3 py-1.5 text-sm text-indigo-400 hover:text-indigo-300 border border-indigo-700/50 hover:border-indigo-500 rounded-lg transition-colors">
        Éditer
      </a>
      <form method="POST" action="/panels/{{.ID}}/duplicate">
        <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
        <button type="submit" class="px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200 border border-gray-700 hover:border-gray-500 rounded-lg transition-colors">
          Dupliquer
        </button>
      </form>
      <button onclick="confirmDelete({{.ID}}, '{{.Name}}')"
              class="px-3 py-1.5 text-sm text-red-400 hover:text-red-300 border border-red-900/50 hover:border-red-700 rounded-lg transition-colors">
        Supprimer
      </button>
    </div>
  </div>
  {{end}}
</div>
{{else}}
<div class="text-center py-20">
  <p class="text-gray-500 mb-4">Aucun panel configuré.</p>
  <a href="/panels/new" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors">
    Créer votre premier panel
  </a>
</div>
{{end}}

<!-- Delete confirmation modal -->
<div id="deleteModal" 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">Supprimer le panel</h3>
    <p class="text-gray-400 text-sm mb-6">
      Supprimer <strong id="deleteModalName" class="text-white"></strong> ? Cette action est irréversible.
    </p>
    <div class="flex gap-3 justify-end">
      <button onclick="document.getElementById('deleteModal').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 id="deleteForm" method="POST">
        <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">
          Supprimer
        </button>
      </form>
    </div>
  </div>
</div>

<script>
function confirmDelete(id, name) {
  document.getElementById('deleteModalName').textContent = name;
  document.getElementById('deleteForm').action = '/panels/' + id + '/delete';
  document.getElementById('deleteModal').classList.remove('hidden');
}
document.getElementById('deleteModal').addEventListener('click', function(e) {
  if (e.target === this) this.classList.add('hidden');
});
</script>
{{end}}