{% extends "orga/base.html" %}
{% comment %}
SPDX-FileCopyrightText: 2017-present Tobias Kunze
SPDX-License-Identifier: AGPL-3.0-only WITH LicenseRef-Pretalx-AGPL-3.0-Terms
{% endcomment %}

{% load i18n %}
{% load static %}
{% load times %}
{% load history_sidebar %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{% static 'vendored/apexcharts/apexcharts.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'orga/css/ui/stats.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'orga/css/forms/i18n.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'orga/css/ui/history.css' %}">
{% endblock stylesheets %}

{% block scripts %}
    <script defer src="{% static 'vendored/apexcharts/apexcharts.min.js' %}"></script>
    <script defer src="{% static 'orga/js/ui/questionstats.js' %}"></script>
    <script defer src="{% static 'common/js/ui/dialog.js' %}"></script>
    <script defer src="{% static 'common/js/ui/history-dialog.js' %}"></script>
{% endblock scripts %}

{% block extra_title %}{{ quotation_open }}{{ question.question }}{{ quotation_close }} ::
{% endblock extra_title %}

{% block content %}
    <h4>
        {{ quotation_open }}{{ question.question }}{{ quotation_close }}
        <small>({{ question.get_variant_display }})</small>
        {% if has_update_permission %}
            <a href="{{ question.urls.edit }}" class="btn btn-sm btn-outline-info">
                <i class="fa fa-edit"></i>
            </a>
        {% endif %}
    </h4>
    <div class="form-history-container">
        <div class="form-container">
            {% if answer_count %}
                <div class="pb-4">
                    <form class="form-inline filter-form">
                        {{ filter_form }}
                        <button class="btn btn-info" type="submit">{{ phrases.base.filter_action }}</button>
                    </form>
                </div>
            {% endif %}

            <div>
                {% if question.active %}
                    {{ phrases.orga.custom_field_active }}
                    <form method="post" action="{{ question.urls.toggle }}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger">{% translate "Hide field" %}</button>
                    </form>
                {% else %}
                    {{ phrases.orga.custom_field_inactive }}
                    <form method="post" action="{{ question.urls.toggle }}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-success">{% translate "Activate field" %}</button>
                    </form>
                {% endif %}
                {% if question.variant == "file" and answer_count %}
                    <a class="btn btn-sm btn-info" href="{{ question.urls.download }}">
                        <i class="fa fa-download"></i>
                        {% translate "Download all files" %}
                    </a>
                {% endif %}
            </div>

            {% if not answer_count %}
                {% translate "Nobody has responded to this field at the moment." %}
            {% else %}
                <p>
                    {% if missing_answers %}
                        {% blocktranslate with count=answer_count|times missing=missing_answers href=base_search_url trimmed %}
                            This field has <strong>{{ count }}</strong> responses, <strong>{{ missing }}</strong> <a
                                href="{{ base_search_url }}unanswered=1"
                            >are still missing</a>.
                        {% endblocktranslate %}
                    {% else %}
                        {% blocktranslate with count=question.answers.count|times trimmed %}
                            This field has <strong>{{ count }}</strong> responses, and no answers are missing.
                        {% endblocktranslate %}
                    {% endif %}
                </p>
                <div
                    id="question-data"
                    class="d-none"
                    data-states="{{ grouped_answers_json }}"
                    data-url="{{ base_search_url }}{% if answer.answer %}answer={{ answer.answer|urlencode }}{% else %}{{ answer.options|urlencode }}{% endif %}"
                >
                </div>
                <div id="question-stats" class="d-flex mt-4 pt-4">
                    {% if question.variant != "file" and grouped_answers|length < 50 %}
                        <div id="question-answers"></div>
                        <div class="table-responsive-sm">
                            <table class="table table-flip table-sticky">
                                <thead>
                                    <th>{% translate "Response" %}</th>
                                    <th class="numeric">{% translate "Count" %}</th>
                                    <th class="numeric">{% translate "%" %}</th>
                                </thead>
                                <tbody>
                                    {% for answer in grouped_answers %}
                                        <tr>
                                            <td>
                                                {% partialdef answer_label %}
                                                    {% if answer.answer %}
                                                        {{ answer.answer|truncatechars:140 }}
                                                    {% else %}
                                                        {{ answer.options__answer|truncatechars:140 }}
                                                    {% endif %}
                                                {% endpartialdef %}
                                                {% if question.target != "reviewer" %}
                                                    <a
                                                        href="{{ base_search_url }}{% if answer.answer %}answer={{ answer.answer|urlencode }}{% else %}answer__options={{ answer.options|urlencode }}{% endif %}"
                                                    >
                                                        {% partial answer_label %}
                                                    </a>
                                                {% else %}
                                                    {% partial answer_label %}
                                                {% endif %}
                                            </td>
                                            <td class="numeric">{{ answer.count }}</td>
                                            <td class="numeric">
                                                {% widthratio answer.count answer_count 100 %}&nbsp;%
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        <div class="sidebar-container">
            {% history_sidebar question %}
        </div>
    </div>
{% endblock content %}