{% extends "statistiques/base.html" %}

{% block title %}{{block.super}} Typologie{% endblock %}

{% block breadcrumbs %}{{block.super}}<li>Typologie</li>{% endblock %}

{% block sidebar %}
  {{ block.super }}
  {% include "statistiques/filter_form.html" %}
  <p class="text-muted px-3">Échantillon : {{ queryset.count }} sujets</p>
{% endblock %}

{% block page_content %}
  <script type="text/javascript">
    function hideAll() {
      {% for _, graph in graphs %}{% with graph.get_html_id as id %}
      $("#tab-{{id}}").attr("class", "");
      $("#wrapper-{{id}}").hide();
      {% endwith %}{% endfor %}
    }

    function showGraph(id) {
      hideAll();
      $("#tab-" + id).attr("class", "active");
      $("#wrapper-" + id).show();
    }
  </script>
<ul class="nav nav-tabs">
  {% for title, graph in graphs %}
  <li class="nav-item" id="tab-{{graph.get_html_id}}">
    <a class="nav-link" href="#" onclick="showGraph('{{graph.get_html_id}}');">{{ title }}</a>
  </li>{% endfor %}
 </ul>

 {% for title, graph in graphs %}
    {{ graph.as_html }}
 {% endfor %}

{% endblock %}
