{% extends "base_site.html" %}
{% load staticfiles %}

{% block title %}Roles{% endblock %}

{% block extrahead %}{{ block.super }}
    <link rel="stylesheet" href="{% static 'ietf/css/jquery-ui.css' %}">
    <script src="{% static 'ietf/js/jquery-ui.js' %}"></script>
    <script src="{% static 'secr/js/utils.js' %}"></script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup ({
                cache: false
            });

            $('#id_group').change(function(){
                var loadUrl = "/secr/roles/ajax/get-roles/" + $(this).val() + "/";
                var ajax_load = '<img class="loading" src="{% static "secr/images/ajax-loader.webp" %}" alt="loading...">';
                var text = $(this).val();
                $("#id_group_acronym").val(text);
                $("#roles-list").html(ajax_load).load(loadUrl);
            });

            var sel = $('#id_group').val();
            if (sel != '') { $('#id_group').change(); }

        });

    </script>
{% endblock %}

{% block breadcrumbs %}{{ block.super }}
    &raquo; Roles
{% endblock %}
{% block instructions %}
    <a href="#" target="_blank">Instructions</a>
{% endblock %}

{% block content %}

    <div class="module interim-container">
        <form id="roles-form" method="post">{% csrf_token %}
        <h2>Role Tool</h2>
        <div class="inline-related">
            <h3><b>Select Group</b></h3>
            <p>Select a Group to change roles.</p>
                {{ group_form.as_p }}
        </div> <!-- inline-related -->
        <br>

        <div class="inline-related">
            <h3>Role Details</h3>
            <div id="roles-list"></div>
        </div> <!-- inline-related -->

        <div class="inline-related">
            <h3>Add Role</h3>
            {% with role_form as form %}
                    {{ role_form.non_field_errors }}
                    <table class="full-width">
                        <tbody>
                        <tr>
                            <td>{{ form.group_acronym.errors }}{{ form.group_acronym }}</td>
                            <td>{{ form.name.errors }}{{ form.name }}</td>
                            <td>{{ form.person.errors }}{{ form.person }}{% if form.person.help_text %}<br>{{ form.person.help_text }}{% endif %}</td>
                            <td>{{ form.email.errors }}{{ form.email }}{% if form.email.help_text %}<br>{{ form.email.help_text }}{% endif %}</td>
                            <td><button type="submit" name="submit">Add</button></td>
                        </tr>
                        </tbody>
                    </table>
            {% endwith %}
        </div> <!-- inline-related -->
        </form>

        <div class="button-group">
            <ul>
                <li><button type="button" onclick="window.location='../'">Back</button></li>
            </ul>
        </div> <!-- button-group -->

    </div> <!-- module -->

{% endblock %}