{% extends 'inactivity/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}

    {% if not has_policies %}
        <div class="alert alert-warning" role="alert">
            If you want to use this page, you need to define an inactivity policy first.
        </div>
    {% endif %}

    <!-- Nav tabs -->
    <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#tab-inactive-users" aria-controls="tab-inactive-users" role="tab" data-toggle="tab">
                {% translate "Currently inactive" %}
            </a>
        </li>
    </ul>

    <div class="panel panel-default panel-tabs">
        <div class="panel-body">
            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active" id="tab-inactive-users">
                    <div class="table-responsive">
                        <table id="table-inactive-users" style="width: 100%;" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Notified" %}</th>
                                    <th>{% translate "User" %}</th>
                                    <th>{% translate "Last login" %}</th>
                                    <th>{% translate "Policy" %}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>


{% endblock %}

{% block extra_javascript %}

    {% include 'bundles/datatables-js.html' %}

    <script>
        "use strict";
        $(document).ready(function () {

            /* dataTable def */
            let lengthMenu =  [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"],
            ];

            $("#table-inactive-users").DataTable({
                ajax: {
                    url: '{% url "inactivity:inactive_users_data" %}',
                    dataSrc: "data",
                    cache: false,
                },

                columns: [
                    {
                        data: 'notified_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    {
                        data: "user_html",
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    {
                        data: 'last_login_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: "policy" },
                ],

                lengthMenu: lengthMenu,

                order: [
                    [0, "desc"],
                ],
            });

        });
    </script>

{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    <link rel="stylesheet" href="{% static 'inactivity/css/aa-bootstrap-fix.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'inactivity/css/inactivity.css' %}" type="text/css">
{% endblock %}

{% block extra_script %}
{% endblock %}
