{% extends 'base.html' %}
{% load form_tags %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="space-y-4">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">{{ title }}</h1>
    <a href="{% url 'accounts:group_list' %}" class="btn btn-ghost btn-sm">Back to Groups</a>
  </div>

  <div class="card max-w-3xl border border-base-300 bg-base-100">
    <div class="card-body">
      <form method="post" class="space-y-3">
        {% csrf_token %}
        {% if form.non_field_errors %}
          <div class="alert alert-error">{{ form.non_field_errors }}</div>
        {% endif %}
        {% for field in form %}
          <div class="form-control">
            <label class="label" for="{{ field.id_for_label }}">
              <span class="label-text">{{ field.label }}</span>
            </label>
            {{ field|daisyui }}
            {% if field.help_text %}
              <span class="label-text-alt mt-1 opacity-70">{{ field.help_text }}</span>
            {% endif %}
            {% for error in field.errors %}
              <span class="text-error text-sm mt-1">{{ error }}</span>
            {% endfor %}
          </div>
        {% endfor %}
        <div class="flex justify-end gap-2 pt-2">
          <a href="{% url 'accounts:group_list' %}" class="btn btn-ghost">Cancel</a>
          <button type="submit" class="btn btn-primary">Save Group</button>
        </div>
      </form>
    </div>
  </div>

  {% if current_capabilities %}
    <div class="card max-w-3xl border border-base-300 bg-base-100">
      <div class="card-body">
        <h2 class="card-title text-base">Current Capabilities</h2>
        <div class="flex flex-wrap gap-1">
          {% for cap in current_capabilities %}
            <span class="badge badge-ghost badge-sm">{{ cap.capability }}</span>
          {% endfor %}
        </div>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}