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

{% block details %}

    <!-- Nav tabs -->
    <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#tab-pending-requests" aria-controls="tab-pending-requests" role="tab" data-toggle="tab">
                {% translate "Pending" %}
                {% if unapproved_count > 0 %}
                    <span class="badge badge-nav">{{ unapproved_count }}</span>
                {% endif %}
            </a>
        </li>
        <li role="presentation" >
            <a href="#tab-closed-requests" aria-controls="tab-closed-requests" role="tab" data-toggle="tab">
                {% translate "Closed" %}
            </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-pending-requests">
                    <div class="table-responsive">
                        <table id="table-pending-requests" style="width: 100%;" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Submitted" %}</th>
                                    <th>{% translate "Requestor" %}</th>
                                    <th>{% translate "Start" %}</th>
                                    <th>{% translate "End" %}</th>
                                    <th>{% translate "Duration" %}</th>
                                    <th>{% translate "Description" %}</th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="tab-closed-requests">
                    <div class="table-responsive">
                        <table id="table-closed-requests" style="width: 100%;" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Submitted" %}</th>
                                    <th>{% translate "Requestor" %}</th>
                                    <th>{% translate "Start" %}</th>
                                    <th>{% translate "End" %}</th>
                                    <th>{% translate "Duration" %}</th>
                                    <th>{% translate "Description" %}</th>
                                    <th>{% translate "Result" %}</th>
                                    <th>{% translate "Processed by" %}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {% include 'inactivity/modals/modal_dialog.html' with name="ViewRequest" %}

{% endblock %}

{% block extra_javascript %}

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

    <script>
        "use strict";
        $(document).ready(function () {
            let lengthMenu = [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"],
            ];

            $("#table-pending-requests").DataTable({
                ajax: {
                    url: '{% url "inactivity:list_pending_loa_requests" %}',
                    dataSrc: "data",
                    cache: false,
                },
                columns: [
                    {
                        data: 'created_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: "requestor_html" },
                    { data: "start" },
                    { data: "end" },
                    { data: "duration" },
                    { data: "notes" },
                    { data: "actions" },
                ],
                lengthMenu: lengthMenu,
                columnDefs: [
                    { sortable: false, targets: [6] }
                ],
                order: [
                    [0, "asc"],
                ]
            });


            $("#table-closed-requests").DataTable({
                ajax: {
                    url: '{% url "inactivity:list_processed_loa_requests" %}',
                    dataSrc: "data",
                    cache: false,
                },
                columns: [
                    {
                        data: 'created_at',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: "requestor_html" },
                    { data: "start" },
                    { data: "end" },
                    { data: "duration" },
                    { data: "notes" },
                    { data: "status_html" },
                    { data: "approver_html" },
                ],
                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">
    <link rel="stylesheet" href="{% static 'inactivity/css/manage_requests.css' %}" type="text/css">
{% endblock %}

{% block extra_script %}
{% endblock %}
