TabbycatDebate/tabbycat

{% extends "standings_base.html" %}
{% load debate_tags static i18n %}

{% block page-title %}🗃{% trans "Diversity Overview" %}{% endblock %}
{% block head-title %}<span class="emoji">🗃</span>{% trans "Diversity Overview" %}{% endblock %}
{% block diversity_active %}active{% endblock %}

{% block page-subnav-sections %}
  {% if user.is_superuser %}
    {{ block.super }}
  {% endif %}
{% endblock %}

{% block page-subnav-actions %}
  {% if user.is_superuser %}
    {{ block.super }}
  {% endif %}
{% endblock %}

{% block page-alerts %}

  {% blocktrans trimmed asvar text %}
    The results data displayed here is presented without tests for statistical significance.
    Correlations should not be automatically considered reliable; particularly at small tournaments.
    A 'region' is a customisable category assigned to a set of institutions, and counted using the
    number of participants assigned to those institutions.
  {% endblocktrans %}
  {% include "components/explainer-card.html" with type="info" %}

{% endblock %}

{% block content %}

  <div class="d-lg-flex justify-content-lg-between">
    <div class="nav nav-pills btn-group">
      <button class="btn btn-primary gender-display gender-nm h6">
        {% trans "Non-cis male identifying" %}
      </button>
      <button class="btn btn-primary gender-display gender-male h6">
        {% trans "Cis-male identifying" %}
      </button>
      <button class="btn btn-primary gender-display gender-unknown h6">
        {% trans "Unspecified/unrecorded" %}
      </button>
    </div>
    <div class="nav nav-pills btn-group mt-md-0 mt-3">
      {% for r in regions %}
        <button class="btn btn-primary region-display region-{{ r.seq }} h6">
          {{ r.name }}
        </button>
      {% endfor %}
    </div>
  </div>

  <div id="vueMount">
    <diversity-container :graphs-data="graphsData"></diversity-container>
  </div>

{% endblock content %}

{% block js %}
  <script>
    window.vueData = {
      graphsData: {{ data_sets|safe }}
    }
  </script>
  {{ block.super }}
{% endblock js %}