{% extends "permafrost/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% if object %}{% trans 'Edit Role' %}{% else %}{% trans 'Create Role' %}{% endif %}{% endblock %}

{% block content %}
<form method="POST" id="role_form">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h2> {% trans 'Roles & Permissions' %}</h2>
<a href="{% if object %}{{ object.get_absolute_url }}{% else %}{% url 'permafrost:roles-manage' %}{% endif %}" class="btn btn-success btn-outline ml-auto">{% trans 'Cancel' %}</a>
<button type="submit" class="btn btn-success ml-1">
    {% if object %}
        {% trans 'Save' %}                
    {% else %}
        {% trans 'Create' %}    
    {% endif %}
</button>
</div>
    {% csrf_token %}
    <div class="card">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 text-primary font-weight-bold">
                {% if object %}
                {% trans 'Edit Permissions' %}: {{ form.initial.name }}
                {% else %}
                {% trans 'Create Role' %}
                {% endif %}
            </h6>
        </div>
        <div class="card-body">
            {{ form.non_field_errors }}
            {% for field in form %}
                <div class="fieldWrapper form-group" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>
                    {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}
                    
                    {{ field }}
                    
                    {% if field.help_text %}
                    <p class="help">{{ field.help_text|safe }}</p>
                    {% endif %}
                    {{ field.errors }}
                </div>
            {% endfor %}
        </div>
        <div class="card-footer">
        </div>
    </div>
</form>
{% endblock %}


{% block extra_js %}
    {% if not object %} {# "Hide JS change handler on edit " #}
    <script>
        $(document).ready(function(){
            $('#id_category').on('change', function(){
                if ($(this).val()){
                    $form = $(this).closest('form')
                    $form.append('<input type="hidden" name="select_role" value="on"/>')
                    $form.submit()
                }
            })
        })
    </script>
    {% endif %}
{% endblock %}
    