{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% load user_filters %}
{% block content %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="flex justify-between mb-4">
            <h1 class="heading">
                {% if user_form.instance.id %}
                    {% with user_form.username.value as user_name %}
                        {% blocktranslate trimmed %}
                            Edit account "{{ user_name }}"
                        {% endblocktranslate %}
                    {% endwith %}
                {% else %}
                    {% translate "Create new account" %}
                {% endif %}
            </h1>
            {% if perms.cms.change_user %}
                <button class="btn">
                    {% translate "Save" %}
                </button>
            {% endif %}
        </div>
        <div class="grid xl:grid-cols-2 2xl:grid-cols-3 gap-4">
            <div class="mb-4 rounded border border-blue-500 shadow-2xl bg-white">
                <div class="p-4 rounded bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="user" class="mr-2"></i> {% translate "General Settings" %}
                    </h3>
                </div>
                <div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
                    <!-- General Options for account management -->
                    <div>
                        <label for="{{ user_form.username.id_for_label }}">
                            {{ user_form.username.label }}
                        </label>
                        {% render_field user_form.username|add_error_class:"border-red-500" %}
                    </div>
                    <div>
                        <label for="{{ user_form.first_name.id_for_label }}">
                            {{ user_form.first_name.label }}
                        </label>
                        {% render_field user_form.first_name|add_error_class:"border-red-500" %}
                    </div>
                    <div>
                        <label for="{{ user_form.last_name.id_for_label }}">
                            {{ user_form.last_name.label }}
                        </label>
                        {% render_field user_form.last_name|add_error_class:"border-red-500" %}
                    </div>
                    <div>
                        <label for="{{ user_form.email.id_for_label }}">
                            {{ user_form.email.label }}
                        </label>
                        {% render_field user_form.email|add_error_class:"border-red-500" %}
                    </div>
                </div>
            </div>
            <div class="mb-4 rounded border border-blue-500 shadow-2xl bg-white">
                <div class="p-4 rounded bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="lock" class="mr-2"></i> {% translate "Login" %}
                    </h3>
                </div>
                <div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
                    <div>
                        {% render_field user_form.is_active %}
                        <label for="{{ user_form.is_active.id_for_label }}">
                            {{ user_form.is_active.label }}
                        </label>
                        <div class="help-text">
                            {{ user_form.is_active.help_text }}
                        </div>
                    </div>
                    {% if not user_form.instance.id %}
                        <div>
                            {% render_field user_form.send_activation_link %}
                            <label for="{{ user_form.send_activation_link.id_for_label }}">
                                {{ user_form.send_activation_link.label }}
                            </label>
                            <div class="help-text">
                                {{ user_form.send_activation_link.help_text }}
                            </div>
                        </div>
                    {% endif %}
                    <div>
                        <label for="{{ user_form.password.id_for_label }}">
                            {{ user_form.password.label }}
                        </label>
                        <ul class="help-text mt-2">
                            {% for item in user_form.password.help_text %}
                                <li>
                                    {{ item }}
                                </li>
                            {% endfor %}
                        </ul>
                        {% render_field user_form.password|add_error_class:"border-red-500" %}
                    </div>
                </div>
            </div>
            <div class="mb-4 rounded border border-blue-500 shadow-2xl bg-white">
                <div class="p-4 rounded bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="key" class="mr-2"></i> {% translate "Permissions" %}
                    </h3>
                </div>
                <div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
                    <div>
                        {% render_field user_form.expert_mode %}
                        <label for="{{ user_form.expert_mode.id_for_label }}">
                            {{ user_form.expert_mode.label }}
                        </label>
                        <div class="help-text">
                            {{ user_form.expert_mode.help_text }}
                        </div>
                    </div>
                    <div>
                        <label for="{{ user_form.role.id_for_label }}">
                            {{ user_form.role.label }}
                        </label>
                        {% render_field user_form.role|add_error_class:"border-red-500" required="required" %}
                        <div class="help-text">
                            {{ user_form.role.help_text }}
                        </div>
                    </div>
                    {% if user_form.organization.field.queryset.exists %}
                        <div>
                            <label for="{{ user_form.organization.id_for_label }}">
                                {{ user_form.organization.label }}
                            </label>
                            {% render_field user_form.organization|add_error_class:"border-red-500" %}
                            <div class="help-text">
                                {{ user_form.organization.help_text }}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if user_form.instance.id and perms.cms.delete_user %}
            {% if user_form.instance.regions.count == 1 %}
                <div class="pt-2 pb-4">
                    <button title="{% translate "Delete this account" %}"
                            class="btn confirmation-button btn-red"
                            data-confirmation-title="{% translate "Please confirm that you really want to delete this account" %}"
                            data-confirmation-text="{% translate "This cannot be reversed." %}"
                            data-confirmation-subject="{{ user_form.username.value }}"
                            data-action="{% url 'delete_region_user' region_slug=request.region.slug user_id=user_form.instance.id %}">
                        <i icon-name="trash-2" class="mr-2"></i>
                        {% translate "Delete account" %}
                    </button>
                </div>
            {% else %}
                <div class="pt-2 pb-4">
                    <button title="{% blocktranslate %}Remove this user from region {{ request.region }}{% endblocktranslate %}"
                            class="btn confirmation-button btn-red"
                            data-confirmation-title="{% blocktranslate %}Please confirm that you really want to remove this account from region {{ request.region }}.{% endblocktranslate %}"
                            data-confirmation-text="{% translate "The account will keep access to the following regions:" %} {{ user_form.instance|remaining_regions:request.region|join:', ' }}"
                            data-confirmation-subject="{{ user_form.username.value }}"
                            data-action="{% url 'delete_region_user' region_slug=request.region.slug user_id=user_form.instance.id %}">
                        <i icon-name="trash-2" class="mr-2"></i>
                        {% translate "Remove account from region" %}
                    </button>
                </div>
            {% endif %}
        {% endif %}
    </form>
    {% include "../generic_confirmation_dialog.html" %}
{% endblock content %}
