{% extends "distributed/base_manage.html" %}
{% load i18n %}

{% block title %}{% trans title %}{% endblock title %}

{% block headcss %}{{ block.super }}
    <style>
        #id_group {
            margin-bottom: 5px;
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script>
        var DEFAULT_LANGUAGE = "{{ default_language }}";
        $(function() {
            // Guarantee that SOME language code is either SELECTED by the back-end,
            // or selected to the default value in the front-end.
            if ($('#id_default_language option[selected]').length == 0) {
                $("#id_default_language").val(DEFAULT_LANGUAGE);
            }

        {# Allow admins to add a new group #}
        {% if request.is_admin %}
            {% trans "Add a new group" as add_new_group %}
            $('#id_group').parent().find(".helptext").html('(<a href="{% url 'add_group' %}?facility={{facility.id}}&next={{ request.get_full_path|urlencode }}">{{add_new_group}}</a>)');
        {% elif form.fields.group.choices.queryset.count == 0 %}
            $('#id_group').parent().hide();
        {% endif %}

        {# Do not allow teacher accounts to be in a group. #}
        {% if request.is_admin and teacher %}
            $("#id_group").attr('disabled',true);
            $("#id_group").parent().hide();
        {% endif %}

        {# Do not allow students to edit their own group #}
        {% if not request.is_admin %}
            $("#id_group").hide();
            $('#id_group').siblings('.helptext').hide()
            var group_name = $("#id_group option:selected").text()
            if (group_name === "---------") {
                group_name = "{% trans 'None' %}"
            } 
            $(sprintf("<span>%s</span>", group_name)).insertAfter($("#id_group"));
        {% endif %}        

        {# Show facility info #}
        {% if request.session.facility_count > 1 %}
            // Show the dropdown
            $("#id_facility").show();
        {% else %}
            // Show that there's only one facility, and it's being selected.
            $(sprintf("<span>%s</span>", $("#id_facility option:selected").text())).insertAfter($("#id_facility"));
        {% endif %}
        });
    </script>
{% endblock headjs %}

{% block content %}
    {{ block.super }}

    <div class="container">
        <h3 class="no-margin-top">{{ title }}</h3>
        <form method="post" class="basic-form">
            {% csrf_token %}

            {% for field in form.hidden_fields %}
                {{ field }}
            {% endfor %}
            {% for field in form.visible_fields %}
                <p>
                    {{ field.label_tag }}
                    {{ field }}
                    {{ field.errors }}
                    <span class="helptext">{{ field.help_text }}</span>
                </p>
            {% endfor %}

            <input type="submit" class="submit btn btn-success btn-md" value="{% if new_user %}{% trans 'Create user' %}{% else %}{% trans 'Update user' %}{% endif %}" />
        </form>

    </div>

{% endblock content %}
