{% extends 'staff_semester_base.html' %}

{% load static %}
{% load evaluation_filters %}

{% block content %}
    {{ block.super }}

    <header class="pb-3 d-flex flex-wrap gap-2 align-items-start">
        <h3 class="m-0 me-1">{{ semester.name }}</h3>

        <div class="d-inline-flex flex-wrap gap-2 align-items-start justify-content-start">
            {% if request.user.is_manager %}
                <a href="{% url 'staff:semester_edit' semester.id %}" class="btn btn-sm btn-secondary">{% translate 'Edit' %}</a>
                <form reload-on-success method="POST" action="{% url 'staff:semester_make_active' %}" class="d-inline">
                    {% csrf_token %}
                    <confirmation-modal type="submit" name="semester_id" value="{{ semester.id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% if semester.is_active %}{% translate 'This is the active semester.' %}<br>{% endif %}{% blocktranslate %}The active semester is the semester that is initially opened for managers, reviewers, and grade uploaders. In the user profile form only the active semester's participations can be edited.{% endblocktranslate %}">
                        <span slot="title">{% translate 'Make this the active semester' %}</span>
                        <span slot="action-text">{% translate 'Make active' %}</span>
                        <span slot="question">
                            {% blocktranslate trimmed %}
                                Do you want to make this the active semester?
                            {% endblocktranslate %}
                        </span>

                        <button
                            slot="show-button"
                            type="button"
                            class="btn btn-sm btn-light"
                            {% if semester.is_active %}disabled{% endif %}
                        >
                            {% translate 'Make active' %}
                        </button>
                    </confirmation-modal>
                </form>

                <form method="POST" action="{% url 'staff:semester_delete' %}" class="d-inline">
                    {% csrf_token %}
                    <input type="hidden" name="semester_id" value="{{ semester.pk }}" />

                    <confirmation-modal type="submit" confirm-button-class="btn-danger">
                        <span slot="title">{% translate 'Delete semester' %}</span>
                        <span slot="action-text">{% translate 'Delete semester' %}</span>
                        <span slot="question">
                            {% blocktranslate trimmed with semester_name=semester.name %}
                                Do you really want to delete the semester <strong>{{ semester_name }}</strong>?
                                All courses and evaluations will be deleted as well as all results.
                                If you are sure, enter the name of the semester below.
                            {% endblocktranslate %}
                        </span>

                        <div slot="extra-inputs">
                            <input type="text" name="validated-semester-name" data-must-equal="{{ semester.name }}" class="form-control" />
                        </div>

                        <button
                            slot="show-button"
                            type="button"
                            {% if not semester.can_be_deleted_by_manager %}disabled{% endif %}
                            class="btn btn-sm btn-danger"
                        >
                            {% translate 'Delete' %}
                        </button>

                        <script type="text/javascript">
                            const modal = document.currentScript.closest("confirmation-modal");

                            modal.querySelectorAll("[data-must-equal]").forEach(element => {
                                element.addEventListener("change", () => {
                                    if (element.value === element.dataset.mustEqual) {
                                        element.setCustomValidity("");
                                    } else {
                                        element.setCustomValidity("{% translate 'Please enter the required text.' %}");
                                    }

                                    element.reportValidity();
                                });
                                element.dispatchEvent(new Event("change"));
                            });
                        </script>
                    </confirmation-modal>
                </form>
            </div>
        {% endif %}
    </header>
    {% if request.user.is_manager %}
        <div class="card collapsible mb-3">
            <div class="card-header d-flex">
                <a class="collapse-toggle{% if not semester.participations_are_archived and not semester.grade_documents_are_deleted and not semester.results_are_archived %} collapsed{% endif %}" data-bs-toggle="collapse" href="#archivingCard">{% translate 'Archiving' %}</a>
            </div>
            <div class="collapse{% if semester.participations_are_archived or semester.grade_documents_are_deleted or semester.results_are_archived %} show{% endif %}" id="archivingCard">
                <div class="card-body d-flex flex-wrap gap-2">
                    {% if semester.participations_can_be_archived %}
                        <form reload-on-success method="POST" action="{% url 'staff:semester_archive_participations' %}">
                            {% csrf_token %}
                            <confirmation-modal type="submit" name="semester_id" value="{{ semester.id }}" confirm-button-class="btn-danger">
                                <span slot="title">{% translate 'Archive participations' %}</span>
                                <span slot="action-text">{% translate 'Archive participations' %}</span>
                                <span slot="question">
                                    {% blocktranslate trimmed with semester_name=semester.name %}
                                        Do you really want to archive all participations in the semester <strong>{{ semester_name }}</strong>?
                                        Further changes to the evaluations won't be possible and you can't undo this action.
                                    {% endblocktranslate %}
                                </span>

                                <button slot="show-button" type="button" class="btn btn-sm btn-warning">{% translate 'Archive participations' %}</button>
                            </confirmation-modal>
                        </form>
                    {% elif semester.participations_are_archived %}
                        <button type="button" disabled class="btn btn-sm btn-success">{% translate 'Participations have been archived' %}</button>
                    {% else %}
                        <button type="button" disabled class="btn btn-sm btn-warning"
                            data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'The participations in this semester cannot be archived.' %}">
                            {% translate 'Archive participations' %}</button>
                    {% endif %}
                    {% if semester.grade_documents_can_be_deleted %}
                        <form reload-on-success method="POST" action="{% url 'staff:semester_delete_grade_documents' %}">
                            {% csrf_token %}
                            <confirmation-modal type="submit" name="semester_id" value="{{ semester.id }}" confirm-button-class="btn-danger">
                                <span slot="title">{% translate 'Delete grade documents' %}</span>
                                <span slot="action-text">{% translate 'Delete grade documents' %}</span>
                                <span slot="question">
                                    {% blocktranslate trimmed with semester_name=semester.name %}
                                        Do you really want to delete the grade documents in the semester <strong>{{ semester_name }}</strong>?
                                        This will delete all existing grade documents for this semester's courses and will disable new uploads.
                                        You can't undo this action.
                                    {% endblocktranslate %}
                                </span>

                                <button slot="show-button" type="button" class="btn btn-sm btn-warning">{% translate 'Delete grade documents' %}</button>
                            </confirmation-modal>
                        </form>
                    {% elif semester.grade_documents_are_deleted %}
                        <button type="button" class="btn btn-sm btn-success disabled">{% translate 'Grade documents have been deleted' %}</button>
                    {% endif %}
                    {% if semester.results_can_be_archived %}
                        <form reload-on-success method="POST" action="{% url 'staff:semester_archive_results' %}">
                            {% csrf_token %}
                            <confirmation-modal type="submit" name="semester_id" value="{{ semester.id }}" confirm-button-class="btn-danger">
                                <span slot="title">{% translate 'Archive results' %}</span>
                                <span slot="action-text">{% translate 'Archive results' %}</span>
                                <span slot="question">
                                    {% blocktranslate trimmed with semester_name=semester.name %}
                                        Do you really want to archive the results in the semester <strong>{{ semester_name }}</strong>?
                                        This will make the results of all evaluations inaccessible for all users except their contributors and managers.
                                        You can't undo this action.
                                    {% endblocktranslate %}
                                </span>

                                <button slot="show-button" type="button" class="btn btn-sm btn-warning">{% translate 'Archive results' %}</button>
                            </confirmation-modal>
                        </form>
                    {% elif semester.results_are_archived %}
                        <button type="button" disabled class="btn btn-sm btn-success">{% translate 'Results have been archived' %}</button>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card collapsible mb-3">
        <div class="card-header d-flex">
            <a id="collapseOverviewCardButton" class="collapse-toggle collapsed" data-bs-toggle="collapse" href="#overviewCard" aria-expanded="false" aria-controls="overviewCard">{% translate 'Overview' %}</a>
            {% if request.user.is_manager %}
                <div class="ms-auto">
                    {% if not semester.participations_are_archived %}
                        <a href="{% url 'staff:semester_preparation_reminder' semester.id %}" class="btn btn-sm btn-light">{% translate 'Preparation reminder' %}</a>
                        <a href="{% url 'staff:semester_grade_reminder' semester.id %}" class="btn btn-sm btn-light ms-2">{% translate 'Grade publish reminder' %}</a>
                    {% endif %}
                    <form id="form_activation_status" class="d-inline" method="post" action="{% url 'rewards:semester_activation_edit' semester.id %}">
                        {% csrf_token %}
                        <div class="btn-switch ms-2">
                            <div class="btn-switch-label">{% translate 'Reward points active' %}</div>
                            <div class="btn-switch btn-group icon-buttons">
                                <confirmation-modal type="submit" name="activation_status" value="on" confirm-button-class="btn-primary">
                                    <span slot="title">{% translate 'Activate reward points' %}</span>
                                    <span slot="action-text">{% translate 'Activate reward points' %}</span>
                                    <span slot="question">
                                        {% blocktranslate trimmed with semester_name=semester.name %}
                                            Do you want to activate the reward points for the semester <strong>{{ semester_name }}</strong>?
                                            The activation will allow participants to receive reward points when voting and will also grant all eligible points for participants who have already voted so far.
                                            The process will take a while.
                                        {% endblocktranslate %}
                                    </span>

                                    <button slot="show-button" type="button" class="btn btn-sm btn-light{% if rewards_active %} active{% endif %}"><span class="fas fa-check" aria-hidden="true"></span></button>
                                </confirmation-modal>

                                <button type="submit" name="activation_status" value="off" form="form_activation_status" class="btn btn-sm btn-light{% if not rewards_active %} active{% endif %}"><span class="fas fa-xmark" aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </form>
                </div>
            {% endif %}
        </div>
        <div class="collapse" id="overviewCard">
            <div class="card-body table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="width-percent-19">{% translate 'Program' %}</th>
                            <th class="width-percent-30">{% translate 'Evaluation period' %}</th>
                            <th class="width-percent-17">{% translate 'Finished evaluations' %}</th>
                            <th class="width-percent-17">{% translate 'Reviewed text answers' %}</th>
                            <th class="width-percent-17">{% translate 'Participation' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for program, stats in program_stats.items %}
                        <tr{% if program == 'total' %} class="table-total-stats"{% endif %}>
                            <td>
                                {% if program == 'total' %}{% translate 'Total' %}{% else %}{{ program }}{% endif %}
                            </td>
                            <td>
                                {% if stats.num_evaluations != 0 %}
                                    {{ stats.first_start }} &ndash; {{ stats.last_end }}
                                {% endif %}
                            </td>
                            <td>
                                {% include 'progress_bar.html' with done=stats.num_evaluations_evaluated total=stats.num_evaluations %}
                            </td>
                            <td>
                                {% include 'progress_bar.html' with done=stats.num_textanswers_reviewed total=stats.num_textanswers %}
                            </td>
                            <td>
                                {% include 'progress_bar.html' with done=stats.num_votes total=stats.num_enrollments_in_evaluation %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card card-outline-primary">
        <div class="card-header d-flex">
            <ul class="nav nav-pills" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="evaluationsTab" data-bs-toggle="pill" href="#evaluations" role="tab">
                        <span class="fas fa-clipboard-check"></span> {% translate 'Evaluations' %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="coursesTab" data-bs-toggle="pill" href="#courses" role="tab">
                        <span class="fas fa-chalkboard-user"></span> {% translate 'Courses' %}
                    </a>
                </li>
            </ul>
            <div class="ms-auto">
                {% if request.user.is_manager %}
                    {% if not semester.participations_are_archived %}
                        <a class="btn btn-sm btn-light" href="{% url 'staff:semester_import' semester.id %}">
                            {% translate 'Import' %}
                        </a>
                    {% endif %}
                    <div class="btn-group ms-2" role="group">
                        <button type="button" id="btnExport" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% translate 'Export' %}</button>
                        <div class="dropdown-menu" aria-labelledby="btnExport">
                            <a class="dropdown-item" href="{% url 'staff:semester_export' semester.id %}">{% translate 'Export results' %}</a>
                            <a class="dropdown-item" href="{% url 'staff:semester_raw_export' semester.id %}">{% translate 'Export raw evaluation data' %}</a>
                            <a class="dropdown-item" href="{% url 'staff:semester_participation_export' semester.id %}">{% translate 'Export participation data' %}</a>
                            <a class="dropdown-item" href="{% url 'staff:vote_timestamps_export' semester.id %}">{% translate 'Export vote timestamps' %}</a>
                        </div>
                    </div>
                    {% if not semester.participations_are_archived %}
                        <a href="{% url 'staff:semester_questionnaire_assign' semester.id %}" class="btn btn-sm btn-light ms-2">{% translate 'Assign questionnaires' %}</a>
                    {% endif %}
                {% endif %}
                {% if request.user.is_reviewer %}
                    <a class="btn btn-sm btn-light ms-2" href="{% url 'staff:semester_flagged_textanswers' semester.id %}">
                        {% translate 'Flagged textanswers' %}
                    </a>
                {% endif %}
            </div>
        </div>
        <div class="card-body tab-content">
            <div class="tab-pane show active" id="evaluations" role="tabpanel">
                <div class="row align-items-center mb-3">
                    <div class="col-9">
                        {% if request.user.is_manager %}
                            <a class="btn btn-sm btn-dark" href="{% url 'staff:evaluation_create_for_semester' semester.id %}">
                                {% translate 'Create evaluation' %}
                            </a>
                        {% endif %}
                    </div>
                    <div class="col-3">
                        <div class="input-group">
                            <input type="search" name="search-evaluation" class="form-control" placeholder="{% translate 'Search...' %}" />
                            <button class="btn btn-light text-secondary" type="button" data-reset="search-evaluation" data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Clear search filter' %}">
                                <span class="fas fa-delete-left"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="btn-switch mb-2" id="evaluation-filter-buttons">
                    <div class="btn-switch-label my-auto pe-0">{% translate 'Filter' %}</div>
                    <div>
                        <div class="btn-switch btn-group icon-buttons">
                            {% for approval_state in approval_states %}
                                {% with approval_state_values=approval_state|approval_state_values %}
                                    <button type="button" class="btn btn-sm btn-light" data-filter="{{ approval_state }}"
                                        data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                        title="{{ approval_state_values.description }}">
                                        <span class="{{ approval_state_values.icon }}"></span>
                                    </button>
                                {% endwith %}
                            {% endfor %}
                        </div>
                        <div class="btn-switch btn-group icon-buttons">
                            <button type="button" class="btn btn-sm btn-light" data-filter="evaluation_not_yet_started"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Evaluation did not start yet' %}">
                                <span class="fas fa-pause icon-gray"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="in_evaluation"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'In evaluation' %}">
                                <span class="fas fa-play icon-gray"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="evaluated"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Evaluated' %}">
                                <span class="fas fa-stop icon-green"></span>
                            </button>
                        </div>
                        <div class="btn-switch btn-group icon-buttons">
                            <button type="button" class="btn btn-sm btn-light" data-filter="no_review"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'No text answers available or evaluation not yet finished' %}">
                                <span class="fas fa-comment icon-gray"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="unreviewed_textanswers"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Text answers awaiting review' %}">
                                <span class="fas fa-comment icon-blue"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="unreviewed_textanswers_urgent"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Text answers awaiting urgent review because grading process is finished' %}">
                                <span class="fas fa-comment icon-red"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="textanswers_reviewed"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Text answers reviewed' %}">
                                <span class="fas fa-comment icon-green"></span>
                            </button>
                        </div>
                        <div class="btn-switch btn-group icon-buttons">
                            <button type="button" class="btn btn-sm btn-light" data-filter="evaluation_not_finished"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Evaluation not finished' %}">
                                <span class="fas fa-chart-simple icon-gray"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="results_not_yet_published"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Results not yet published' %}">
                                <span class="fas fa-chart-simple icon-blue"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="results_not_published"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Results not yet published although grading process is finished' %}">
                                <span class="fas fa-chart-simple icon-red"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-light" data-filter="results_published"
                                data-bs-toggle="tooltip" data-bs-placement="top" data-container=".btn-switch"
                                title="{% translate 'Results published' %}">
                                <span class="fas fa-chart-simple icon-green"></span>
                            </button>
                        </div>
                    </div>
                </div>

                {% for evaluation in evaluations %}
                    {# separate forms for each modal since we want separate date-selection inputs because each exam_creation_modal needs its own exam date input field. #}
                    <form id="exam_creation_form_{{ evaluation.id }}" reload-on-success method="post" action="{% url 'staff:create_exam_evaluation' %}">
                        {% csrf_token %}
                    </form>
                {% endfor %}

                <form id="evaluation-deletion-form" custom-success method="POST" action="{% url 'staff:evaluation_delete' %}">
                    {% csrf_token %}
                </form>

                <script type="module">
                    import { fadeOutThenRemove } from "{% static 'js/utils.js' %}";
                    document.getElementById("evaluation-deletion-form").addEventListener("submit-success", event => {
                        fadeOutThenRemove(document.getElementById(`evaluation-row-${event.detail.body.get("evaluation_id")}`))
                    });
                </script>

                <form id="evaluation_operation_form" class="table-responsive" method="GET" action="{% url 'staff:evaluation_operation' semester.pk %}">
                    <table id="evaluation-table" class="table table-striped table-narrow table-vertically-aligned">
                        <colgroup>
                            <col style="width: 2.75em" />
                            <col style="width: 1.25em" />
                            <col style="width: 1.25em" />
                            <col style="width: 1.25em" />
                            <col style="width: 1.25em" />
                            <col />
                            <col style="width: 12.25em" />
                            <col style="width: 12em" />
                            <col style="width: 8.5em" />
                        </colgroup>
                        <thead>
                            <tr>
                                <th></th>
                                <th class="col-order" data-col="state-approval"></th>
                                <th class="col-order" data-col="state-evaluating"></th>
                                <th class="col-order" data-col="state-textanswers"></th>
                                <th class="col-order" data-col="state-results"></th>
                                <th class="col-order" data-col="name">{% translate 'Name' %}</th>
                                <th class="col-order" data-col="period">{% translate 'Evaluation period' %}</th>
                                <th data-not-searchable></th>
                                <th data-not-searchable></th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for evaluation in evaluations %}
                            <tr id="evaluation-row-{{ evaluation.id }}">
                                {% include 'staff_semester_view_evaluation.html' with semester=semester evaluation=evaluation info_only=False %}
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr class="empty-disclaimer">
                                <td colspan="999">{% translate 'No matching evaluations found.' %}</td>
                            </tr>
                        </tfoot>
                    </table>

                    {% if request.user.is_manager and not semester.participations_are_archived %}
                        <div class="my-2">
                            <button type="button" class="btn btn-sm btn-secondary" id="selectAllButton">{% translate 'Select all' %}</button>
                            <button type="button" class="btn btn-sm btn-secondary" id="selectNoneButton">{% translate 'Select none' %}</button>
                        </div>
                        <div>
                            <button name="target_state" value="{{ Evaluation.State.PREPARED }}" type="submit" class="btn btn-sm btn-light"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Evaluations in preparation or approved by editors' %}">
                                <span class="{{ Evaluation.State.NEW|approval_state_icon }}"></span>
                                <span class="{{ Evaluation.State.EDITOR_APPROVED|approval_state_icon }}"></span>
                                {% translate 'Ask for editor review' %}
                            </button>
                            <button name="target_state" value="{{ Evaluation.State.NEW }}" type="submit" class="btn btn-sm btn-light"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Evaluations awaiting editor review, approved by editor or approved by manager' %}">
                                <span class="{{ Evaluation.State.PREPARED|approval_state_icon }}"></span>
                                <span class="{{ Evaluation.State.EDITOR_APPROVED|approval_state_icon }}"></span>
                                <span class="{{ Evaluation.State.APPROVED|approval_state_icon }}"></span>
                                {% translate 'Revert to preparation' %}
                            </button>
                            <button name="target_state" value="{{ Evaluation.State.IN_EVALUATION }}" type="submit" class="btn btn-sm btn-light"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Evaluations waiting for evaluation period to start' %}">
                                <span class="fas fa-pause icon-gray"></span>
                                {% translate 'Start evaluation' %}
                            </button>
                            <button name="target_state" value="{{ Evaluation.State.PUBLISHED }}" type="submit" class="btn btn-sm btn-light"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Unpublished evaluations' %}">
                                <span class="fas fa-chart-simple icon-blue"></span>
                                <span class="fas fa-chart-simple icon-red"></span>
                                {% translate 'Publish' %}
                            </button>
                            <button name="target_state" value="{{ Evaluation.State.REVIEWED }}" type="submit" class="btn btn-sm btn-light"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Published evaluations' %}">
                                <span class="fas fa-chart-simple icon-green"></span>
                                {% translate 'Unpublish' %}
                            </button>
                        </div>
                    {% endif %}
                </form>
            </div>

            <div class="tab-pane" id="courses" role="tabpanel">
                <div class="row align-items-center mb-3">
                    <div class="col-9">
                        {% if request.user.is_manager %}
                            <a class="btn btn-sm btn-dark" href="{% url 'staff:course_create' semester.id %}">
                                {% translate 'Create course' %}
                            </a>
                        {% endif %}
                    </div>
                    <div class="col-3">
                        <div class="input-group">
                            <input type="search" name="search-course" class="form-control" placeholder="{% translate 'Search...' %}" />
                            <button class="btn btn-light text-secondary" type="button" data-reset="search-course" data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Clear search filter' %}">
                                <span class="fas fa-delete-left"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <form id="course-deletion-form" custom-success method="POST" action="{% url 'staff:course_delete' %}">
                    {% csrf_token %}
                </form>
                <script type="module">
                    import { fadeOutThenRemove } from "{% static 'js/utils.js' %}";

                    document.getElementById("course-deletion-form").addEventListener("submit-success", event => {
                        fadeOutThenRemove(document.querySelector(`#course-row-${event.detail.body.get("course_id")}`));
                    });
                </script>

                <table id="course-table" class="table table-striped table-narrow table-vertically-aligned">
                    <colgroup>
                        <col />
                        <col style="width: 14em" />
                        <col style="width: 10em" />
                        <col style="width: 10em" />
                        <col style="width: 9em" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="col-order" data-col="name">{% translate 'Course' %}</th>
                            <th class="col-order" data-col="responsible">{% translate 'Responsible' %}</th>
                            <th class="col-order" data-col="evaluation-count">{% translate '#Evaluations' %}</th>
                            <th class="col-order" data-col="ignored-evaluation-count">{% translate '#Ignored evaluations' %}</th>
                            <th data-not-searchable></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for course in courses %}
                            <tr id="course-row-{{ course.id }}">
                                <td data-col="name" data-order="{{ course.name|lower }}">
                                    <div>
                                        <a href="{% url 'staff:course_edit' course.id %}">{{ course.name }}</a>
                                        {% include 'cms_course_link_icons.html' %}
                                    </div>
                                    {% include 'course_badges.html' %}
                                </td>
                                <td data-col="responsible" data-order="{{ course.responsibles.first.last_name|lower }}">
                                    <div class="fst-italic">
                                        {{ course.responsibles_names }}
                                    </div>
                                </td>
                                <td data-col="evaluation-count" data-order="{{ course.evaluations.count }}">
                                    {% if course.evaluations.count == 0 %}
                                        <span class="badge bg-warning">{% translate 'No evaluations' %}</span>
                                    {% else %}
                                        {{ course.evaluations.count }}
                                    {% endif %}
                                </td>
                                <td data-col="ignored-evaluation-count" data-order="{{ course.ignored_evaluations.count }}">
                                    {{ course.ignored_evaluations.count }}
                                </td>
                                <td class="icon-buttons">
                                    {% if request.user.is_manager %}
                                        <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip"
                                            href="{% url 'staff:evaluation_create_for_course' course.id %}"
                                            title="{% translate 'Create evaluation for this course' %}">
                                            <span class="fas fa-clipboard-check"></span>
                                        </a>
                                        <a class="btn btn-sm btn-dark" data-bs-toggle="tooltip"
                                            href="{% url 'staff:course_copy' course.id %}"
                                            title="{% translate 'Copy course' %}">
                                            <span class="fas fa-copy"></span>
                                        </a>
                                    {% endif %}
                                    {% if course.can_be_deleted_by_manager %}
                                        <confirmation-modal type="submit" form="course-deletion-form" name="course_id" value="{{ course.id }}" confirm-button-class="btn-danger">
                                            <span slot="title">{% translate 'Delete course' %}</span>
                                            <span slot="action-text">{% translate 'Delete course' %}</span>
                                            <span slot="question">
                                                {% blocktranslate trimmed with course_name=course.name %}
                                                    Do you really want to delete the course <strong>{{ course_name }}</strong>?
                                                {% endblocktranslate %}
                                            </span>

                                            <button slot="show-button" type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% translate 'Delete' %}">
                                                <span class="fas fa-trash" aria-hidden="true"></span>
                                            </button>
                                        </confirmation-modal>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr class="empty-disclaimer">
                            <td colspan="999">{% translate 'No matching courses found.' %}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block additional_javascript %}
    <script type="text/javascript">
        var overviewCard = document.getElementById('overviewCard');
        var overviewCardCollapse = new bootstrap.Collapse(overviewCard, {
            toggle: localStorage['show_overview'] === 'true'
        });

        function saveCollapseState() {
            var state = localStorage['show_overview'] === 'true';
            localStorage['show_overview'] = (!state).toString();
        }
        document.getElementById("collapseOverviewCardButton").addEventListener("click", saveCollapseState);

        if(localStorage['selected_tab'] === 'courses') {
            var coursesTab = document.getElementById('coursesTab');
            var coursesTabTrigger = new bootstrap.Tab(coursesTab);
            coursesTabTrigger.show();
        }

        function saveSelectedTab(tab) {
            localStorage['selected_tab'] = tab;
        }
        document.getElementById("evaluationsTab").addEventListener("click", () => saveSelectedTab("evaluations"));
        document.getElementById("coursesTab").addEventListener("click", () => saveSelectedTab("courses"));

        window.addEventListener("pageshow", () => {
            document.querySelectorAll('#evaluation_operation_form input[type=checkbox]').forEach(checkbox => {checkbox.checked = false;}); // prevent wrong autofills
        });

        document.getElementById("selectAllButton").addEventListener("click", () =>
            document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = true;}));

        document.getElementById("selectNoneButton").addEventListener("click", () =>
            document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = false;}));
    </script>
    <script type="module">
        import {EvaluationGrid, TableGrid} from "{% static 'js/datagrid.js' %}";
        const evaluationTable = document.querySelector("#evaluation-table");
        if (evaluationTable) {
            new EvaluationGrid({
                storageKey: "evaluation-semester-{{ semester.id }}-data-grid",
                table: evaluationTable,
                searchInput: document.querySelector("input[name=search-evaluation]"),
                filterButtons: [...document.querySelectorAll("#evaluation-filter-buttons [data-filter]")],
                resetSearch: document.querySelector("[data-reset=search-evaluation]"),
            }).init();
        }
        const courseTable = document.querySelector("#course-table");
        if (courseTable) {
            new TableGrid({
                storageKey: "course-semester-{{ semester.id }}-data-grid",
                table: courseTable,
                searchInput: document.querySelector("input[name=search-course]"),
                resetSearch: document.querySelector("[data-reset=search-course]"),
            }).init();
        }
    </script>
{% endblock %}