{#
/*
 * Spring Signage Ltd - http://www.springsignage.com
 * Copyright (C) 2015-16 Spring Signage Ltd
 * (user-page.twig)
 */
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}

{% block actionMenu %}
    <ul class="nav nav-pills pull-right">
        {% if currentUser.isSuperAdmin() or currentUser.isGroupAdmin() %}
        <li class="btn btn-success btn-xs"><a class="XiboFormButton btns" title="{% trans "Add a new User" %}" href="{{ urlFor("user.add.form") }}"><i class="fa fa-user-plus" aria-hidden="true"></i> {% trans "Add User" %}</a></li>
        {% endif %}
        <li class="btn btn-info btn-xs"><a class="XiboFormButton btns" title="{% trans "View my authenticated applications" %}" href="{{ urlFor("user.applications") }}"><i class="fa fa-check-circle" aria-hidden="true"></i> {% trans "My Applications" %}</a></li>
    </ul>
{% endblock %}

{% block pageContent %}
    <div class="widget">
        <div class="widget-title">{% trans "Users" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="usersView">
                <div class="XiboFilter well">
                    <div class="FilterDiv" id="Filter">
                        <form class="form-inline">
                            {% set title %}{% trans "Name" %}{% endset %}
                            {{ inline.input("userName", title) }}

                            {% set title %}{% trans "User Type" %}{% endset %}
                            {{ inline.dropdown("userTypeId", "single", title, "", [{userTypeId:null, userType:""}]|merge(userTypes), "userTypeId", "userType") }}

                            {% set title %}{% trans "Retired" %}{% endset %}
                            {% set values = [{id: 1, value: "Yes"}, {id: 0, value: "No"}] %}
                            {{ inline.dropdown("retired", "single", title, 0, values, "id", "value") }}
                        </form>
                    </div>
                </div>
                <div class="XiboData">
                    <table id="users" class="table table-striped">
                        <thead>
                            <tr>
                                <th>{% trans "Name" %}</th>
                                <th>{% trans "Homepage" %}</th>
                                <th>{% trans "Email" %}</th>
                                <th>{% trans "Library Quota" %}</th>
                                <th>{% trans "Last Login" %}</th>
                                <th>{% trans "Logged In?" %}</th>
                                <th>{% trans "Retired?" %}</th>
                                <th>{% trans "First Name" %}</th>
                                <th>{% trans "Last Name" %}</th>
                                <th>{% trans "Phone" %}</th>
                                <th>{% trans "Ref 1" %}</th>
                                <th>{% trans "Ref 2" %}</th>
                                <th>{% trans "Ref 3" %}</th>
                                <th>{% trans "Ref 4" %}</th>
                                <th>{% trans "Ref 5" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
        $(document).ready(function() {
            var table = $("#users").DataTable({
                "language": dataTablesLanguage,
                serverSide: true, stateSave: true,
                searchDelay: 3000,
                "order": [[0, "asc"]],
                "filter": false,
                ajax: {
                    url: "{{ urlFor("user.search") }}",
                    "data": function (d) {
                        $.extend(d, $("#users").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                    }
                },
                "columns": [
                    {"data": "userName"},
                    {"data": "homePage"},
                    {"data": "email"},
                    {
                        "name": "libraryQuota",
                        "data": null,
                        "render": {"_": "libraryQuota", "display": "libraryQuotaFormatted", "sort": "libraryQuota"}
                    },
                    {"data": "lastAccessed", "visible": false},
                    {
                        "data": "loggedIn",
                        "render": dataTableTickCrossColumn,
                        "visible": false
                    },
                    {
                        "data": "retired",
                        "render": dataTableTickCrossColumn
                    },
                    {"data": "firstName", "visible": false},
                    {"data": "lastName", "visible": false},
                    {"data": "phone", "visible": false},
                    {"data": "ref1", "visible": false},
                    {"data": "ref2", "visible": false},
                    {"data": "ref3", "visible": false},
                    {"data": "ref4", "visible": false},
                    {"data": "ref5", "visible": false},
                    {
                        "orderable": false,
                        "data": dataTableButtonsColumn
                    }
                ]
            });

            table.on('draw', dataTableDraw);
            table.on('processing.dt', dataTableProcessing)
            dataTableAddButtons(table, $('#users_wrapper').find('.col-sm-6').eq(1));
        });

        function userFormOpen() {
            // Bind to the add form submit
            $(".UserForm").validate({
                submitHandler: function (form) {
                    // Grab and alter the value in the library quota field
                    var libraryQuotaField = $(form).find("input[name=libraryQuota]");
                    var libraryQuotaUnitsField = $(form).find("select[name=libraryQuotaUnits]");
                    var libraryQuota = libraryQuotaField.val();

                    if (libraryQuotaUnitsField.val() == 'mb') {
                        libraryQuota = libraryQuota * 1024;
                    } else if (libraryQuotaUnitsField.val() == 'gb') {
                        libraryQuota = libraryQuota * 1024 * 1024;
                    }

                    // Set the field
                    libraryQuotaField.prop('value', libraryQuota);

                    XiboFormSubmit(form);
                },
                errorElement: "span",
                highlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                success: function(element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                invalidHandler: function() {
                    // Remove the spinner
                    $(this).closest(".modal-dialog").find(".saving").remove();
                }
            });
        }
    </script>
{% endblock %}