{% extends "orga/cfp/base.html" %}
{% load bootstrap4 %}
{% load compress %}
{% load i18n %}
{% load static %}
{% load times %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{% static "vendored/apexcharts/apexcharts.css" %}" />
{% endblock %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "vendored/apexcharts/apexcharts.min.js" %}"></script>
        <script defer src="{% static "orga/js/question_stats.js" %}"></script>
    {% endcompress %}
{% endblock %}

{% block cfp_content %}
<h4>
    {{ quotation_open }}{{ question.question }}{{ qutoation_close }}
    <small>({{ question.get_variant_display }})</small>
    <a href="{{ question.urls.edit }}" class="btn btn-sm btn-outline-info">
        <i class="fa fa-edit"></i>
    </a>
</h4>

{% if answer_count %}
<div class="pb-4">
  <form class="form-inline">
    {% bootstrap_form filter_form layout='inline' %}
    <button class="btn btn-info" type="submit">{% translate "Filter" %}</button>
  </form>
</div>
{% endif %}

<p>
{% if question.active %}
    {% translate "This question is currently active, it will be asked during submission." %}
    <a class="btn btn-sm btn-danger" href="{{ question.urls.toggle }}">{% translate "Hide question" %}</a>
{% else %}
    {% translate "This question is currently inactive, and will not be asked during submission." %}
    <a class="btn btn-sm btn-success" href="{{ question.urls.toggle }}">{% translate "Activate question" %}</a>
{% endif %}
</p>

{% if not answer_count %}
    {% translate "Nobody has answered this question at the moment." %}
{% else %}
  <p>
    {% if missing_answers %}
        {% blocktranslate with count=answer_count|times missing=missing_answers trimmed %}
            This question has been answered <strong>{{ count }}</strong>, <strong>{{ missing }}</strong> answers are still missing.
        {% endblocktranslate %}
    {% else %}
        {% blocktranslate with count=question.answers.count|times trimmed %}
            This question has been answered <strong>{{ count }}</strong>, and no answers are missing.
        {% endblocktranslate %}
    {% endif %}
  </p>
  <div id="question-data" class="d-none"
        data-states='{{ grouped_answers_json }}'
        data-url="{{ request.event.orga_urls.submissions }}?{% if request.GET.role == 'accepted' %}state=accepted&state=confirmed&{% elif request.GET.role == 'confirmed' %}state=confirmed&{% endif %}{% if request.GET.track %}track={{ request.GET.track }}&{% endif %}{% if request.GET.submission_type %}submission_type={{ request.GET.submission_type }}&{% endif %}question={{ question.id }}&"
  >
  </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>
    {% endif %}
    <table class="table table-responsive">
      <thead>
        <th>{% translate "Answer" %}</th>
        <th>{% translate "Count" %}</th>
        <th class="text-center">{% translate "%" %}</th>
      </thead>
      <tbody>
        {% for answer in grouped_answers %}
          <tr>
            <td>
              <a href="{{ request.event.orga_urls.submissions }}?{% if request.GET.role == 'accepted' %}state=accepted&state=confirmed&{% elif request.GET.role == 'confirmed' %}state=confirmed&{% endif %}{% if request.GET.track %}track={{ request.GET.track }}&{% endif %}{% if request.GET.submission_type %}submission_type={{ request.GET.submission_type }}&{% endif %}question={{ question.id }}&{% if answer.answer %}answer={{ answer.answer|urlencode }}{% else %}answer__options={{ answer.options|urlencode }}{% endif %}">
                {% if answer.answer %}{{ answer.answer|truncatechars:140 }}{% else %}{{ answer.options__answer|truncatechars:140 }}{% endif %}
              </a>
            </td>
            <td class="text-center">
                {{ answer.count }}
            </td>
            <td class="text-right">
                {% widthratio answer.count answer_count 100 %}&nbsp;%
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}
{% endblock %}
