{% extends "security-users-container.html" %}

{% block head %}
    {{ block.super }}

    <script type="text/javascript">
        $(function() {
            $("#tab-user-management").attr("class", "active");

            DosisAuth.Management.setup({
                URLs: {
                    ajax_update: "{% url 'site:settings-update-user-field' %}"
                },
                CSRF_token: '{{ csrf_token }}',
                show_add_form_errors: {{ add_form.errors|yesno:"true,false" }}
            });

            $("#inactive-user-disp-btn").click(function () {
                var inactive_disp_val = 'none';
               if ($(this).text().startsWith("Show")) {
                   $(this).text("Hide Inactive Users");
                   inactive_disp_val = 'table-row';
               } else {
                   $(this).text("Show Inactive Users");
               }

               $("input[id$='-active']").each(function (e) {
                    if (!($(this).prop('checked'))) {
                        $(this).closest('td').parent()[0].style.display = inactive_disp_val;
                    }
                });
            });

            $("input[id$='-active']").click(function () {
                if (!($(this).prop('checked'))) {
                    $(this).closest('td').parent().find('td').addClass("decommissioned-cell");
                } else {
                    $(this).closest('td').parent().find('td').removeClass("decommissioned-cell")
                }
            });

            $("input[id$='-active']").each(function (e) {
                if (!($(this).prop('checked'))) {
                    $(this).closest('td').parent()[0].style.display = 'none';
                }
            });

        });
    </script>

{% endblock %}

{% block sub-content %}
    {% if 'edit_password_success' in request.GET %}
        <div class="spacer-md-auth"></div>
        <div class="alert alert-success">
            User password edited successfully.
        </div>
    {% endif %}
    <form class="ajax-update-form-auth" method="POST">
        <button type="button" class="btn btn-default btn-default-auth add-dialog-btn add-dialog-btn-auth">Add User</button>
        <button type="button" id="inactive-user-disp-btn" name="inactive-user-disp-btn"
                style="float: right;" class="btn btn-default btn-default-auth add-dialog-btn-auth">Show Inactive Users</button>
        <div id="user-form-rep">
        {% include 'manage-security-users-rep.html' %}
        </div>
        <button type="button" class="btn btn-default btn-default-auth add-dialog-btn add-dialog-btn-auth">Add User</button>
    </form>
    <div class="add-dialog" title="Add User">
        <form class="add-form" method="POST">
            {% csrf_token %}
            <input type="hidden" name="add_user_flag" value="ADD"/>
            <input type="hidden" name="{{ add_form.active.html_name }}" value="True"/>
            <div class="alert alert-error add-form-validation-alert" style="display: none;">
                {% for field, error in add_form.errors.items %}
                    {{ error }}
                {% endfor %}
                <ul class="client-errorlist"></ul>
            </div>
            <table class="add-dialog-table-auth">
                <tr>
                    <td colspan="2">
                        <label for="{{ add_form.username.id_for_label }}">Username</label>{{ add_form.username }}
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="{{ add_form.email_address.id_for_label }}">Email Address</label>{{ add_form.email_address }}
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="{{ add_form.first_name.id_for_label }}">First Name</label>{{ add_form.first_name }}
                    </td>
                    <td>
                        <label for="{{ add_form.last_name.id_for_label }}">Last Name</label>{{ add_form.last_name }}
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="{{ add_form.initials.id_for_label }}">Initials</label> {{ add_form.initials }}
                    </td>
                    <td>
                        <label for="{{ add_form.user_role.id_for_label }}">Role</label> {{ add_form.user_role }}
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="well well-small">
                            <label for="id_add_user_password">Password</label>
                            <input id="id_add_user_password" type="password" name="password">
                            <label for="id_add_user_password_confirmation">Confirm Password</label>
                            <input id="id_add_user_password_confirmation" type="password" name="password_confirmation">
                            <label>Show Passwords:
                                <input type="checkbox" class="show-password-checkbox-auth" data-inputs="#id_add_user_password, #id_add_user_password_confirmation">
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="{{ add_form.pw_change_at_login.id_for_label }}">Force User to Change Password On First Login?</label> {{ add_form.pw_change_at_login }}
                    </td>
                    <td>
                        <label for="{{ add_form.pw_never_expires.id_for_label }}">Password Never Expires? </label> {{ add_form.pw_never_expires }}
                    </td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}