{% 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">
  {% csrf_token %}
    <div class="d-sm-flex align-items-center justify-content-between my-3">
      <h1 class="text-gray-800 m-0"> {% trans 'Roles & Permissions' %}</h1>
      <a href="{% if object %}{{ object.get_absolute_url }}{% else %}{% url 'permafrost:roles-manage' %}{% endif %}" class="btn btn-outline-success ml-auto">{% trans 'Cancel' %}</a>
      <button type="submit" class="btn btn-success ml-1">
          {% if object %}
              {% trans 'Save' %}                
          {% else %}
              {% trans 'Create' %}    
          {% endif %}
      </button>
    </div>
    <div class="card text-gray-800 pb-5">
        <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 }}
            <div class="form-row">
                <div class="form-group col-12 col-md-4">
                    <label class="text-gray-600" for="{{ form.name.id_for_label }}">
                        {{ form.name.label }}
                    </label>
                    {% if form.name.required %}<span class="required">*</span>{% endif %}
                    <input 
                        name="{{ form.name.name }}" 
                        type="text" 
                        id="{{form.name.id_for_label}}" 
                        class="form-control{% if form.name.errors %} is-invalid{% endif %}" 
                        placeholder="{{ form.name.help_text }}" value="{% firstof form.initial.name form.data.name form.instance.name '' %}" >
                    
                    {% if form.name.errors %}
                        <div class="invalid-feedback">
                            {% for error in form.name.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                        
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label class="text-gray-600" for="{{ form.description.id_for_label }}">
                        {{ form.description.label }}
                    </label>
                    {% if form.description.required %}<span class="required">*</span>{% endif %}
                    <input 
                        name="{{ form.description.name }}" 
                        type="text" id="{{ form.description.id_for_label }}" 
                        class="form-control{% if form.description.errors %} is-invalid{% endif %}" 
                        placeholder="{{ form.description.help_text }}"
                        value="{% firstof form.initial.description form.data.description form.instance.description '' %}" >

                    {% if form.description.errors %}
                        <div class="invalid-feedback">
                            {% for error in form.description.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-12 col-md-4">
                    <label class="text-gray-600" for="{{ form.category.id_for_label }}">
                        {{ form.category.label }}
                    </label>
                    {% if form.category.required %}<span class="required">*</span>{% endif %}
                    
                    {% if object %}
                    <div class="disabled-select-wrapper">
                    {% endif %}
                        
                    {{ form.category }}
                    
                    {% if object %}
                        <i class="fas fa-lock"></i>
                    </div> {# end disabled-select-wrapper #}
                    {% endif %}
                        
                    {% if form.category.errors %}
                        <div class="invalid-feedback">
                            {% for error in form.category.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="form-row border-bottom-gray-300">
                <p class="col-6 font-weight-bold">{% trans 'Required Permissions' %}</p>
                <p class="col-6 font-weight-bold">{% trans 'Optional Permissions' %}</p>
            </div>
            <div class="form-row">
                {% if form.permissions.errors %}
                    <div class="invalid-feedback">
                        {% for error in form.permissions.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            {% for content_type, category in permission_categories.items %}
                <div class="row">
                    <p class="small font-weight-bold col-12 text-gray-600 mt-3 text-capitalize">{{ category.name }}</p>
                    <div class="col-6">
                        {% for permission in category.required %}
                        <div class="d-flex align-items-center">
                            <span>{{ permission.name }}</span>
                            {% if permission.short_description %} {# TODO: extend permission to include short_description for tooltip #}
                            <i class="ml-2 fas fa-info-circle text-gray-600" aria-label="{% trans 'Info' %}"></i>
                            {% endif %}
                            <i class="ml-auto fas fa-lock" aria-label="{% trans 'Default Permission' %}"></i>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="col-6">
                        {% for permission in category.optional %}
                        <div class="d-flex align-items-center">
                            <span>{{ permission.name }}</span>
                            
                            {% if permission.short_description %}
                            <i class="ml-2 fas fa-info-circle text-gray-600" aria-label="{% trans 'Info' %}"></i>
                            {% endif %}
                            <input 
                                class="ml-auto" 
                                type="checkbox" 
                                name="{{ form.permissions.name }}" 
                                value="{{ permission.id }}"
                                {% if permission.selected %} checked{% endif %}
                            >
                        </div>
                        {% endfor %}
                    </div>
                </div>
            {% empty %}
                <div class="pb-5 row">{# used for spacing when empty #}</div>
            {% endfor %}
        </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 %}
    