{% extends "cradmin_legacy/base.django.html" %}
{% load i18n %}
{% load cradmin_legacy_tags %}

{% block title %}
    {{ period }}
{% endblock %}



{% block content %}

    {# Adds a simple css class does not show the button in the print version #}
    <style>
    @media print {
        .no-print, no-print * {
            display: none !important;
        }
        thead
        {
            display: table-header-group;
        }
        tfoot
        {
            display: table-footer-group;
        }
        footer {
            display: none
        }

        header {
            display: none
        }
    }
    </style>

    <div class="container">
        <div class="devilry-dashboard-container devilry-dashboard-container-withtopmargin">

    <h2>{{ period }}, {{createtime}}</h2>

    <p class="devilry-buttonbar"> 
        <a id="devilry_qualifiesforexam_back_index_button" class="btn btn-primary no-print" href="{% cradmin_instance_url 'qualifiesforexam' 'INDEX' %}">
            <span class="glyphicon glyphicon-chevron-left"> </span> {% trans "Back to mainpage" %}
        </a>

        <a id="devilry_qualifiesforexam_print_link" class="btn btn-primary no-print" style="margin-left: auto;" onclick="window.print();">
            <span class="glyphicon glyphicon-print"> </span> {% trans "Print qualified list" %}
        </a>

        <a id="devilry_qualifiesforexam_print_csv" class="btn btn-primary no-print" href="{% cradmin_instance_url 'qualifiesforexam' 'download-status-csv' status.id %}?order_by={{ order_by_queryparam }}">
            <span class="glyphicon glyphicon-download"></span> {% trans 'Download results as CSV' %}
        </a>
    </p>





    <div class="no-print">
        {% trans 'Order by' context 'qualifies-for-exam-order-by-lastname' %}:
        <select onchange="onOrderChange(event)">
          <option value="lastname" {% if order_by_queryparam == "lastname" %}selected{% endif %}>
              {% trans 'Last name' context 'qualifies-for-exam-order-by-lastname' %}
          </option>
          <option value="fullname" {% if order_by_queryparam == "fullname" %}selected{% endif %}>
              {% trans 'Full name' context 'qualifies-for-exam-order-by-fullname' %}
          </option>
          <option value="username" {% if order_by_queryparam == "username" %}selected{% endif %}>
              {% trans 'Username' context 'qualifies-for-exam-order-by-username' %}
          </option>
        </select>
    </div>
    <table class="table">
        <caption>
            {% trans "Qualified for final exams" %}
        </caption>
        <thead>
            <tr>
                <th>{% trans 'LASTNAME' %}</th>
                <th>{% trans 'FULL NAME' %}</th>
                <th>{% trans 'USERNAME' %}</th>
                <th>{% trans 'CAN TAKE EXAM' %}</th>
                <th>{% trans 'NOTE' %}</th>
            </tr>
        </thead>
        {% for relatedstudent in qualifying_students %}
        <tr>

            <td>{{ relatedstudent.user.lastname }}</td>
            <td>{{ relatedstudent.user.fullname }}</td>
            <td>{{ relatedstudent.user.shortname }}</td>
            <td>{% trans 'Yes' %}</td>
            <td>[ ]</td>

        </tr>
        {% endfor %}
    </table>
    <table class="table">
        <caption>
            {% trans "NOT qualified for final exams" %}
        </caption>
        <thead>
            <tr>
                <th>{% trans 'LASTNAME' %}</th>
                <th>{% trans 'FULL NAME' %}</th>
                <th>{% trans 'USERNAME' %}</th>
                <th>{% trans 'CAN TAKE EXAM' %}</th>
                <th>{% trans 'NOTE' %}</th>
            </tr>
        </thead>
        {% for relatedstudent in nonqualifying_students %}
        <tr>

            <td>{{ relatedstudent.user.lastname }}</td>
            <td>{{ relatedstudent.user.fullname }}</td>
            <td>{{ relatedstudent.user.shortname }}</td>
            <td>{% trans 'No' %}</td>
            <td>[ ]</td>

        </tr>
        {% endfor %}
    </table>
        </div>
    </div>
{% endblock %}

{% block end-of-body %}
    <script type="text/javascript">
        function onOrderChange (e) {
          let value = e.target.value
          window.location.search = "?order_by=" + value
        }
    </script>
{% endblock end-of-body %}