{% extends "admin/components/datatable.html" %}
{% block title %} SKA Referee Test | Manage Exams {% endblock %}
{% block content %}
    {% include "admin/components/client-alerts.html" %}
    <h1>Manage Exams</h1>
    {% include "admin/components/secondary-navs/tests.html" %}
    <h2>{{ display_title }}</h2>
    {% if tests %}
        <table id="active-test-table" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th data-priority="1">
                        Start Date
                    </th>
                    <th data-priority="1">
                        Exam Code
                    </th>
                    <th data-priority="2">
                        Expiry Date
                    </th>
                    <th data-priority="3">
                        Time Limit
                    </th>
                    <th data-priority="4">
                        Entries
                    </th>
                    <th data-priority="1">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for test in tests %}
                    <tr class="table-row">
                        <td>
                            {{ test.start_date.strftime('%d %b %y %H:%M') }}
                        </td>
                        <td>
                            {{ test.get_code() }}
                        </td>
                        <td>
                            {{ test.end_date.strftime('%d %b %Y %H:%M') }}
                        </td>
                        <td>
                            {% if test.time_limit == None -%}
                                None
                            {% elif test.time_limit == 60 -%}
                                1 hour
                            {% elif test.time_limit == 90 -%}
                                1 hour 30 min
                            {% elif test.time_limit == 120 -%}
                                2 hours
                            {% else -%}
                                {{ test.time_limit }}
                            {% endif %}
                        </td>
                        <td>
                            {{ test.entries|length }}
                        </td>
                        <td class="row-actions">
                            <a
                                href="#"
                                class="btn btn-primary test-action"
                                data-id="{{test.id}}"
                                title="Edit Exam"
                                data-action="edit"
                            >
                                <i class="bi bi-file-earmark-text-fill button-icon"></i>
                            </a>
                            <a
                                href="#"
                                class="btn btn-danger test-action"
                                data-id="{{test.id}}"
                                title="Delete Exam"
                                data-action="delete"
                            >
                                <i class="bi bi-file-earmark-excel-fill button-icon"></i>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% elif not filter == 'create' %}
            <div class="alert alert-primary alert-db-empty">
                <i class="bi bi-info-circle-fill" aria-title="Alert" title="Alert"></i>
                {{ error_none }}
            </div>
    {% endif %}
    {% if form %}
        <div class="form-container">
            <form name="form-create-test" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="/admin/tests/">
                <h2 class="form-heading">Create Exam</h2>
                {{ form.hidden_tag() }}
                <div class="form-date-input">
                    {{ form.start_date(placeholder="Enter Start Date", class_ = "datepicker") }}
                    {{ form.start_date.label }}
                </div>
                <div class="form-date-input">
                    {{ form.expiry_date(placeholder="Enter Expiry Date", class_ = "datepicker") }}
                    {{ form.expiry_date.label }}
                </div>
                <div class="form-select-input">
                    {{ form.time_limit(placeholder="Select Time Limit") }}
                    {{ form.time_limit.label }}
                </div>
                <div class="form-select-input">
                    {{ form.dataset(placeholder="Select Question Dataset") }}
                    {{ form.dataset.label }}
                </div>
                {% include "admin/components/client-alerts.html" %}
                <div class="container form-submission-button">
                    <div class="row">
                        <div class="col text-center">
                            <button title="Create Exam" class="btn btn-md btn-success btn-block" type="submit">
                                <i class="bi bi-file-earmark-plus-fill button-icon"></i>
                                Create Exam
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    {% endif %}
{% endblock %}
{% if tests %}
    {% block custom_data_script %}
    <script>
        $(document).ready(function() {
            $('#active-test-table').DataTable({
                'columnDefs': [
                    {'sortable': false, 'targets': [1,3,5]},
                    {'searchable': false, 'targets': [3,5]}
                ],
                'order': [[0, 'desc'], [2, 'asc']],
                dom: 'lfBrtip',
                'buttons': [
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [0, 1, 2, 3]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [0, 1, 2, 3]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [0, 1, 2, 3]
                        }
                    },
                ],
                'responsive': 'true',
                'colReorder': 'true',
                'fixedHeader': 'true',
            });
            // $('.buttons-pdf').html('<span class="glyphicon glyphicon-file" data-toggle="tooltip" title="Export To Excel"/>') -->
        } );
        $('#active-test-table').show();
        $(window).trigger('resize');
    </script>
    {% endblock %}
{% endif %}