{% 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 %}
                    {% blocktrans with role_name=role_form.instance.get_name_display %}Edit role "{{ role_name }}"{% endblocktrans %}
	            {% else %}
		            {% trans 'Create new role' %}
	            {% endif %}
            </h1>
        </div>
        <div class="w-3/5 flex justify-end">
            <button class="btn">{% trans '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 data-feather="key" class="mr-2"></i> {% trans '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 %}
