{% extends "chrono/manager_home_reports.html" %}
{% load gadjo static i18n %}

{% block css %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" media="all" href="{% static "css/gadjo.multiselectwidget.css" %}" />
{% endblock %}

{% block extrascripts %}
  {{ block.super }}
  <script src="{% static "js/gadjo.multiselectwidget.js" %}"></script>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'chrono-manager-pso-stats' %}">{% trans "PSO Stats" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'PSO Stats' %}</h2>
{% endblock %}

{% block content %}
  <div class="section">
    <h3>{% trans "Report configuration" %}</h3>
    <div>
      <form>
        {{ form|with_template }}
        <h3>{% trans "Row configuration" %}</h3>
        {{ formset.management_form }}
        <table id="pso-stats-row-forms">
          <thead>
            <tr>
              {% for field in formset.0 %}
                <th class="column-{{ field.name }}{% if field.required %} required{% endif %}">{{ field.label }}</th>
              {% endfor %}
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for sub_form in formset %}
              <tr class="pso-stats-row-form">
                {% for field in sub_form %}
                  <td class="field-{{ field.name }}">
                    {{ field.errors.as_ul }}
                    {{ field }}
                  </td>
                {% endfor %}
                <td>
                  <button data-formset-id="pso-stats-row" class="formset--remove-button" type="button"></button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <button data-formset-id="pso-stats-row" class="formset--add-button" type="button">{% trans "Add another row" %}</button>
        <div class="buttons">
          <button class="submit-button">{% trans "Preview" %}</button>
          {% if request.GET and form.is_valid and formset.is_valid %}
            <button class="submit-button" name="ods">{% trans "Get ODS file" %}</button>
          {% endif %}
        </div>
      </form>
    </div>
  </div>
  {% if request.GET and form.is_valid and formset.is_valid %}
    <div class="section">
      <h4>{% trans "Preview of the report" %}</h4>
      <div>
        <ul>
          <li>{% trans "Number of concerned agendas:" %} {{ preview.concerned_agendas }}</li>
          {% for data in preview.formset %}
            <li>
              {{ data.label }}{% trans ":" %}
              {% blocktrans count count=data.users %}{{ count }} different user{% plural %}{{ count }} different users{% endblocktrans %},
              {% blocktrans count count=data.families %}{{ count }} different family{% plural %}{{ count }} different families{% endblocktrans %},
              {% blocktrans count count=data.bookings %}{{ count }} presence{% plural %}{{ count }} presences{% endblocktrans %}
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endif %}
{% endblock %}