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

  {# --- Create new group form --- #}
  <form method="post" action="{{ url_for('blog.tag_groups_admin.create') }}" class="border rounded p-4 bg-white space-y-3">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <h3 class="text-sm font-semibold text-stone-700">New Group</h3>
    <div class="flex flex-col sm:flex-row gap-3">
      <input
        type="text" name="name" placeholder="Group name" required
        class="flex-1 border rounded px-3 py-2 text-sm"
      >
      <input
        type="text" name="colour" placeholder="#colour"
        class="w-28 border rounded px-3 py-2 text-sm"
      >
      <input
        type="number" name="sort_order" placeholder="Order" value="0"
        class="w-20 border rounded px-3 py-2 text-sm"
      >
    </div>
    <input
      type="text" name="feature_image" placeholder="Image URL (optional)"
      class="w-full border rounded px-3 py-2 text-sm"
    >
    <button type="submit" class="border rounded px-4 py-2 bg-stone-800 text-white text-sm">
      Create
    </button>
  </form>

  {# --- Existing groups list --- #}
  {% if groups %}
    <ul class="space-y-2">
      {% for group in groups %}
        <li class="border rounded p-3 bg-white flex items-center gap-3">
          {% if group.feature_image %}
            <img src="{{ group.feature_image }}" alt="{{ group.name }}"
                 class="h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0">
          {% else %}
            <div class="h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
                 style="{% if group.colour %}background-color: {{ group.colour }}; color: white;{% else %}background-color: #e7e5e4; color: #57534e;{% endif %}">
              {{ group.name[:1] }}
            </div>
          {% endif %}
          <div class="flex-1">
            <a href="{{ url_for('blog.tag_groups_admin.edit', id=group.id) }}"
               class="font-medium text-stone-800 hover:underline">
              {{ group.name }}
            </a>
            <span class="text-xs text-stone-500 ml-2">{{ group.slug }}</span>
          </div>
          <span class="text-xs text-stone-500">order: {{ group.sort_order }}</span>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p class="text-stone-500 text-sm">No tag groups yet.</p>
  {% endif %}

  {# --- Unassigned tags --- #}
  {% if unassigned_tags %}
    <div class="border-t pt-4">
      <h3 class="text-sm font-semibold text-stone-700 mb-2">Unassigned Tags ({{ unassigned_tags|length }})</h3>
      <div class="flex flex-wrap gap-2">
        {% for tag in unassigned_tags %}
          <span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200 rounded">
            {{ tag.name }}
          </span>
        {% endfor %}
      </div>
    </div>
  {% endif %}

</div>
