{% extends 'gestion/base.html' %}
{% load i18n %}

{% block contents %}

<style>
  .flexitem{
      flex: auto;
      margin: auto 5px;
      border: 1px solid black;
      border-radius: 5px;
  }
</style>

<div style="display: flex;">
  <div id="classes" class="flexitem">
    <div id="tabs">
      <ul>
	{% for cat in cat_clas %}
	<li><a href="#tabs-{{ forloop.counter }}">{{ cat }}</a></li>
	{% endfor %}
      </ul>
      {% for cat, clas in cat_clas.items %}
      <div id="tabs-{{ forloop.counter }}">
	<ul>
	  {% for c in clas %}
	  <li>
	    {{ c }}
	    <button data-libelle="{{ c.libelle }}"
		    onclick="classe_prend_livres(this)">
	      Liste de livres
	    </button>
	  </li>
	  {% endfor %}
	</ul>
      </div>
      {% endfor %}
    </div>
  </div>
  <div id="listes"  class="flexitem">
  </div>
</div>
<script>
  $( function() {
    $( "#tabs" ).tabs();
    } );
</script>

{% endblock %}