{% extends "base.html" %}

{% load i18n %}
{% load crispy_forms_filters %}

{% block content %}
    <div class="card bg-body shadow">
        <div class="card-header text-center">
            <h4>
                {% trans "survey"|capfirst %} {{ survey.survey_id }}
                <a href="{{ TFJM.LIMESURVEY_URL }}/index.php/{{ survey.survey_id }}" target="_blank"><i class="fas fa-arrow-up-right-from-square"></i></a>
            </h4>
        </div>
        <div class="card-body">
            <dl class="row">
                <dt class="col-sm-6 text-sm-end">{% trans "Name:" %}</dt>
                <dd class="col-sm-6">{{ survey.name }}</dd>

                <dt class="col-sm-6 text-sm-end">{% trans "One answer per team:" %}</dt>
                <dd class="col-sm-6">{{ survey.invite_team|yesno }}</dd>

                {% if not survey.invite_team %}
                    <dt class="col-sm-6 text-sm-end">{% trans "Coaches can answer the survey:" %}</dt>
                    <dd class="col-sm-6">{{ survey.invite_coaches|yesno }}</dd>
                {% endif %}

                {% if survey.tournament %}
                    <dt class="col-sm-6 text-sm-end">{% trans "Tournament restriction:" %}</dt>
                    <dd class="col-sm-6">{{ survey.tournament }}</dd>
                {% endif %}

                <dt class="col-sm-6 text-sm-end">{% trans "Completion rate:" %}</dt>
                <dd class="col-sm-6">
                    {{ survey.completed.count }}/{{ survey.participants.count }}
                    <a href="{% url "survey:survey_refresh_completed" pk=survey.pk %}"><i class="fas fa-arrow-rotate-right" alt="refresh"></i></a>
                </dd>
            </dl>
        </div>
        <div class="card-footer text-center">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateSurveyModal">{% trans "Update" %}</button>
            <a class="btn btn-secondary" href="{% url "survey:survey_invite" pk=survey.pk %}">{% trans "Send invites" %}</a>
        </div>
    </div>

    <hr>

    <table class="table table-condensed table-striped">
        <thead>
            <tr>
                <th>{% trans "participant"|capfirst %}</th>
                <th>{% trans "tournament"|capfirst %}</th>
                <th>{% trans "completed"|capfirst %}</th>
            </tr>
        </thead>
        <tbody>
            {% for participant in survey.participants %}
                <tr class="{% if participant in survey.completed.all %}table-success{% else %}table-danger{% endif %}">
                    {% if survey.invite_team %}
                        <td>{% trans "Team" %} {{ participant.name }} ({{ participant.trigram }})</td>
                        <td>{{ participant.participation.tournament.name }}</td>
                    {% else %}
                        <td>{{ participant.user.first_name }} {{ participant.user.last_name }} ({% trans "team" %} {{ participant.team.trigram }})</td>
                        <td>{{ participant.team.participation.tournament.name }}</td>
                    {% endif %}
                    {% if participant in survey.completed.all %}
                        <td>{% trans "Yes" %}</td>
                    {% else %}
                        <td>{% trans "No" %}</td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>

    {% trans "Update survey" as modal_title %}
    {% trans "Update" as modal_button %}
    {% url "survey:survey_update" pk=survey.pk as modal_action %}
    {% include "base_modal.html" with modal_id="updateSurvey" %}
{% endblock %}

{% block extrajavascript %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initModal("updateSurvey", "{% url "survey:survey_update" pk=survey.pk %}")
        })
    </script>
{% endblock %}
