<div class="max-w-2xl mx-auto px-4 py-6 space-y-6">

  {# --- Edit group form --- #}
  <form method="post" action="{{ url_for('blog.tag_groups_admin.save', id=group.id) }}"
        class="border rounded p-4 bg-white space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="space-y-3">
      <div>
        <label class="block text-xs font-medium text-stone-600 mb-1">Name</label>
        <input
          type="text" name="name" value="{{ group.name }}" required
          class="w-full border rounded px-3 py-2 text-sm"
        >
      </div>
      <div class="flex gap-3">
        <div class="flex-1">
          <label class="block text-xs font-medium text-stone-600 mb-1">Colour</label>
          <input
            type="text" name="colour" value="{{ group.colour or '' }}" placeholder="#hex"
            class="w-full border rounded px-3 py-2 text-sm"
          >
        </div>
        <div class="w-24">
          <label class="block text-xs font-medium text-stone-600 mb-1">Order</label>
          <input
            type="number" name="sort_order" value="{{ group.sort_order }}"
            class="w-full border rounded px-3 py-2 text-sm"
          >
        </div>
      </div>
      <div>
        <label class="block text-xs font-medium text-stone-600 mb-1">Feature Image URL</label>
        <input
          type="text" name="feature_image" value="{{ group.feature_image or '' }}"
          placeholder="https://..."
          class="w-full border rounded px-3 py-2 text-sm"
        >
      </div>
    </div>

    {# --- Tag checkboxes --- #}
    <div>
      <label class="block text-xs font-medium text-stone-600 mb-2">Assign Tags</label>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-64 overflow-y-auto border rounded p-2">
        {% for tag in all_tags %}
          <label class="flex items-center gap-2 px-2 py-1 hover:bg-stone-50 rounded text-sm cursor-pointer">
            <input
              type="checkbox" name="tag_ids" value="{{ tag.id }}"
              {% if tag.id in assigned_tag_ids %}checked{% endif %}
              class="rounded border-stone-300"
            >
            {% if tag.feature_image %}
              <img src="{{ tag.feature_image }}" alt="" class="h-4 w-4 rounded-full object-cover">
            {% endif %}
            <span>{{ tag.name }}</span>
          </label>
        {% endfor %}
      </div>
    </div>

    <div class="flex gap-3">
      <button type="submit" class="border rounded px-4 py-2 bg-stone-800 text-white text-sm">
        Save
      </button>
    </div>
  </form>

  {# --- Delete form --- #}
  <form method="post" action="{{ url_for('blog.tag_groups_admin.delete_group', id=group.id) }}"
        class="border-t pt-4"
        onsubmit="return confirm('Delete this tag group? Tags will not be deleted.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <button type="submit" class="border rounded px-4 py-2 bg-red-600 text-white text-sm">
      Delete Group
    </button>
  </form>

</div>
