@component('admin/layouts/main')
  @slot('main')
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">{{ tag ? 'Modifier le tag' : 'Nouveau tag' }}</h1>
    </div>

    <form action="{{ tag ? `/admin/tags/${tag.id}` : '/admin/tags' }}" method="POST" class="bg-white rounded shadow p-6 max-w-lg">
      {{{ csrfField() }}}
      
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nom</label>
        <input type="text" name="name" id="name" value="{{ tag?.name || '' }}" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
      </div>

      <div class="mb-4">
        <label for="color" class="block text-gray-700 text-sm font-bold mb-2">Couleur (Hex/Nom)</label>
        <div class="flex gap-2">
            <input type="text" name="color" id="color" value="{{ tag?.color || defaultColor || '#000000' }}" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="#000000">
            <input type="color" onchange="document.getElementById('color').value = this.value" value="{{ tag?.color || defaultColor || '#000000' }}" class="h-10 w-10 border rounded cursor-pointer">
        </div>
        <p class="text-xs text-gray-500 mt-1">Optionnel. Utilisé pour l'affichage.</p>
      </div>

      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
          Enregistrer
        </button>
        <a href="/admin/tags" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
          Annuler
        </a>
      </div>
    </form>
  @endslot
@end
