{% extends "controlpanel/base.html" %}
{% load lucide ui %}

{% block heading %}Grant platform access{% endblock heading %}

{% block panel %}
    <div class="card max-w-xl bg-base-100 shadow">
        <div class="card-body">
            <div class="alert alert-info">
                <span>Platform admins can manage every club. They must set up two-factor authentication before they can sign in.</span>
            </div>
            <form method="post">
                {% csrf_token %}
                {% for error in form.non_field_errors %}
                    <div class="alert alert-error my-2"><span>{{ error }}</span></div>
                {% endfor %}
                {% for field in form %}
                    <div class="form-control my-3 w-full">
                        {% if field.field.widget.input_type == "checkbox" %}
                            <label class="label cursor-pointer justify-start gap-3" for="{{ field.id_for_label }}">
                                {{ field|daisy }}
                                <span class="label-text">{{ field.label }}</span>
                            </label>
                        {% else %}
                            <label class="label" for="{{ field.id_for_label }}"><span class="label-text">{{ field.label }}</span></label>
                            {{ field|daisy }}
                        {% endif %}
                        {% if field.help_text %}<span class="label-text-alt mt-1 text-base-content/70">{{ field.help_text }}</span>{% endif %}
                        {% for error in field.errors %}<span class="label-text-alt mt-1 text-error">{{ error }}</span>{% endfor %}
                    </div>
                {% endfor %}
                <div class="card-actions justify-end pt-2">
                    <a class="btn btn-outline gap-2" href="{% url 'controlpanel:admins' %}">{% lucide "arrow-left" size=16 %} Cancel</a>
                    <button class="btn btn-primary gap-2" type="submit">{% lucide "user-plus" size=16 %} Grant access</button>
                </div>
            </form>
        </div>
    </div>
{% endblock panel %}