{% extends "base.html" %}
{% load django_bootstrap5 %}
{% load i18n %}

{% block title %}{{ title }}{% endblock %}

{% block page_heading %}{{ title }}{% endblock page_heading %}

{% block content %}
{# as the user form: what the members may do first, then who they are #}
<form id="create-update" method="post">
    {% csrf_token %}
    {% bootstrap_form_errors form type="non_fields" %}
    {% bootstrap_field form.name %}

    <h4 class="h5 mb-1">{% trans "What can its members do?" %}</h4>
    <p class="small text-body-secondary mb-2">{% trans "Each member has these permissions besides their own." %}</p>
    <div class="border-top mb-4">
        {% for box, help in form.permission_rows %}
            <div class="form-check form-switch border-bottom py-2 ps-5">
                <input id="{{ box.id_for_label }}" class="form-check-input" type="checkbox" role="switch" name="permissions"
                       value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
                <label class="form-check-label" for="{{ box.id_for_label }}">
                    <span class="d-block">{{ box.data.value.instance.name }}</span>
                    <span class="small text-body-secondary">{{ help }}</span>
                </label>
            </div>
        {% endfor %}
        {% for error in form.permissions.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
    </div>

    <fieldset class="mb-3">
        <legend class="fs-6 fw-semibold">{% trans "Members" %}</legend>
        <div class="d-flex flex-wrap gap-2">
            {% for box in form.users %}
                <label class="border rounded px-2 py-1 text-break">
                    <input id="{{ box.id_for_label }}" class="form-check-input me-1" type="checkbox" name="users" value="{{ box.data.value }}"{% if box.data.selected %} checked{% endif %}>
                    {{ box.choice_label }}
                </label>
            {% endfor %}
        </div>
        {% for error in form.users.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
    </fieldset>

    <div class="d-flex justify-content-end gap-2 mt-3">
        <a class="btn btn-outline-secondary" href="{% url 'admin:group_list' %}">{% trans "Cancel" %}</a>
        <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
    </div>
</form>
{% endblock content %}