{% extends "_base.html" %}
{% load i18n %}
{% block content %}
    {% load static %}
    {% load widget_tweaks %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="flex flex-wrap mb-4">
            <div class="w-2/5 flex flex-wrap flex-col justify-center">
                <h1 class="heading">
                    {% if role_form.instance.id %}
                        {% blocktranslate trimmed with role_name=role_form.instance.get_name_display %}
                            Edit role "{{ role_name }}"
                        {% endblocktranslate %}
                    {% else %}
                        {% translate "Create new role" %}
                    {% endif %}
                </h1>
            </div>
            <div class="w-3/5 flex justify-end">
                <button class="btn">
                    {% translate "Save" %}
                </button>
            </div>
        </div>
        <div class="flex flex-wrap">
            <div class="w-full">
                <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                    <div class="w-full p-4 rounded bg-water-500">
                        <h3 class="heading font-bold text-black">
                            <i icon-name="key" class="mr-2"></i> {% translate "Role settings" %}
                        </h3>
                    </div>
                    <div class="px-4 pb-4">
                        <label for="{{ role_form.name.id_for_label }}">
                            {{ role_form.name.label }}
                        </label>
                        {% render_field role_form.name %}
                        {% render_field role_form.staff_role %}
                        <label for="{{ role_form.staff_role.id_for_label }}">
                            {{ role_form.staff_role.label }}
                        </label>
                        <div class="help-text">
                            {{ role_form.staff_role.help_text }}
                        </div>
                        <label for="{{ group_form.permissions.id_for_label }}">
                            {{ group_form.permissions.label }}
                        </label>
                        {% render_field group_form.permissions %}
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock content %}
