{% extends 'base.html' %}

{% load evaluation_filters %}

{% block title %}{% translate 'Your EvaP' %} - {{ block.super }}{% endblock %}

{% block breadcrumb_bar %}
    <div class="breadcrumb-bar">
        <ul class="breadcrumb">
            <li class="breadcrumb-item">{{ evaluation.course.semester.name }}</li>
            <li class="breadcrumb-item">{{ evaluation.full_name }}</li>
        </ul>
    </div>
{% endblock %}

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

    <div class="callout callout-info small">
        {% if editable %}
            {% blocktranslate %}Please review the evaluation's details below, add all contributors and select suitable questionnaires. Once everything is okay, please approve the evaluation on the bottom of the page.{% endblocktranslate %}
        {% else %}
            {% blocktranslate %}You cannot edit this evaluation because it has already been approved.{% endblocktranslate %}
        {% endif %}
    </div>
    <h3>
        {{ evaluation.full_name }} ({{ evaluation.course.semester.name }})
    </h3>

    <form method="POST" class="form-horizontal multiselect-form tomselectform" id="evaluation-form">
        {% csrf_token %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{% translate 'Course data' %}</h5>
                <div class="d-flex">
                    <label class="col-md-3 pe-4 form-label">{% translate 'Name (German)' %}</label>
                    <div class="col-md-7 form-static-text">{{ evaluation.course.name_de }}</div>
                </div>
                <div class="d-flex">
                    <label class="col-md-3 pe-4 form-label">{% translate 'Name (English)' %}</label>
                    <div class="col-md-7 form-static-text">{{ evaluation.course.name_en }}</div>
                </div>
                <div class="d-flex">
                    <label class="col-md-3 pe-4 form-label">{% translate 'Responsibles' %}</label>
                    <div class="col-md-7 form-static-text">{{ evaluation.course.responsibles_names }}</div>
                </div>
                <div class="d-flex">
                    <label class="col-md-3 pe-4 form-label">{% translate 'Programs' %}</label>
                    <div class="col-md-7 form-static-text">
                        {% for program in evaluation.course.programs.all %}
                            <span class="badge bg-primary">{{ program }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="d-flex">
                    <label class="col-md-3 pe-4 form-label">{% translate 'Course type' %}</label>
                    <div class="col-md-7 form-static-text">
                        <span class="badge bg-secondary">{{ evaluation.course.type }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body table-responsive">
                <div class="d-flex">
                    <h5 class="card-title me-auto">{% translate 'Evaluation data' %}</h5>
                    {% if evaluation.allow_editors_to_edit %}
                        <div>
                            <button type="button" class="btn btn-sm btn-light mb-3 createAccountRequestModalShowButton">
                                {% translate 'Request creation of new account' %}
                            </button>
                        </div>
                    {% else %}
                        <div>
                            <button type="button" class="btn btn-sm btn-light changeEvaluationRequestModalShowButton">
                                {% translate 'Request changes' %}
                            </button>
                        </div>
                    {% endif %}
                </div>
                {% include 'evaluation_form_general_questionnaires.html' with evaluation_form=form %}
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body table-responsive">
                {% include 'contribution_formset.html' with formset=formset staff=False editable=editable %}
            </div>
        </div>

        <div class="card card-submit-area card-submit-area-3 text-center mb-3">
            <div class="card-body">
                {% if editable %}
                    <button name="operation" value="preview" type="submit" class="btn btn-light">{% translate 'Preview' %}</button>
                    <button name="operation" value="save" type="submit" class="btn btn-primary">{% translate 'Save' %}</button>

                    <confirmation-modal type="submit" name="operation" value="approve">
                        <span slot="title">{% translate 'Approve evaluation' %}</span>
                        <span slot="action-text">{% translate 'Approve evaluation' %}</span>
                        <span slot="question">
                            {% blocktranslate trimmed %}
                                Do you want to approve this evaluation? This will allow the evaluation team to proceed with the preparation, but you won't be able to make any further changes.
                            {% endblocktranslate %}
                        </span>

                        <button slot="show-button" type="button" class="btn btn-success">{% translate 'Save and approve' %}</button>
                    </confirmation-modal>
                {% endif %}
                <a href="{% url 'contributor:index' %}" class="btn btn-light">{% if edit %}{% translate 'Cancel' %}{% else %}{% translate 'Back' %}{% endif %}</a>
            </div>
        </div>
    </form>

    {% if preview_html %}
        <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="previewModalLabel">{% translate 'Preview' %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        {{ preview_html }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate 'Close' %}</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block modals %}
    {{ block.super }}

    {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktranslate %}
    {% translate 'Please tell us which new account we should create. We need the name and email for all new accounts.' as teaser %}
    {% include 'contact_modal.html' with modal_id='createAccountRequestModal' user=request.user title=title teaser=teaser %}

    {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request evaluation changes for {{ evaluation_name }}{% endblocktranslate %}
    {% translate 'Please tell us what changes to the evaluation we should make.' as teaser %}
    {% include 'contact_modal.html' with modal_id='changeEvaluationRequestModal' user=request.user title=title teaser=teaser %}
{% endblock %}

{% block additional_javascript %}
    {% include 'evap_evaluation_edit_js.html' %}

    {% if preview_html %}
        <script type="text/javascript">
            var previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
            previewModal.show();
        </script>
    {% endif %}
{% endblock %}