{% extends "base.html.twig" %}
{% block title %} {{parent()}} Classification {% endblock %}

{% block body %}

<h1 class="display-1 mb-4">{{"lst_classification"|trans}}</h1>

<div class="row mb-2">
  <div class="col-6">
    <div class="btn-group mr-2" role="group" aria-label="First group">
    <a class="btn {{syntacCat is defined ? "btn-secondary" : "btn-light" }}" href="{{path('classification')}}">Tout</a>
      {% for cat in syntacCats %}
        <a class="btn {{((syntacCat is defined) and (cat.id == syntacCat.id)) ? "btn-light" : "btn-secondary"}}" href="{{path('classification_categorie', {'id': cat.id} )}}">
          {{cat.value|trans}}
        </a>
      {% endfor %}
    </div>
  </div>
  <div class="col text-right">
    {% set cat = (syntacCat is defined) ? syntacCat : null %}
    {% if syntacCat is defined %}
    <h2>
      <span class="badge badge-dark block p-3">{{syntacCat.value|trans}}</span>
    </h2>
    {% endif %}
  </div>
</div>

  {% set lastClass = null %}
  {% for i, currentSClass in semanticClassesSubClasses %}
    {% set nextClass = (semanticClassesSubClasses[ i + 1] is defined) ? semanticClassesSubClasses[ i + 1].semanticClass : null %}
    {% set nextSubClassValue = (nextClass) ? semanticClassesSubClasses[ i + 1].semanticSubClass.value : null %}
    {% set realClass =  currentSClass.semanticClass %}
    {% set realSubClass = currentSClass.semanticSubClass %}
    {% set isNewClass = (realClass != lastClass) %}
    {% set isFirstClass = (i == 0) %}
    {% set semanticClassProperties = currentSClass.descriptionClass ~  ' <i>' ~ currentSClass.testAppartClass ~ '</i>' %}
    {% set semanticSubClassesProperties = currentSClass.descriptionSubClass ~ ' <i>' ~ currentSClass.testAppartSubClass ~ '</i>' %}

     {% if isNewClass %}
       {% set lastClass = realClass %}

        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-4">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="collapse" data-target="#collapse-sc-{{realClass.id}}">
                {{realClass.value}}
                </button>
              </div>
              <div class="col-8 text-right">
                {{semanticClassProperties|raw}}
              </div>
            </div>
          </div> <!-- fin header -->


          <div id="collapse-sc-{{realClass.id}}" class="collapse">
            <div class="card-body">
      {% endif %}

              <div class="row pb-2">
                <div class="col-2">
                    {% if (i > 0 and semanticClassesSubClasses[i-1].semanticSubClass.value != currentSClass.semanticSubClass.value) or (i == 0) %}
                    <span class="btn btn-sm btn-info">
                      {{currentSClass.semanticSubClass.value}}
                    </span>
                    {% endif %}
                  </div>
                  <div class="col">
                    {% if syntacCat is not defined %}
                      <span class="btn btn-sm btn-outline-secondary mr-2">
                        {{currentSClass.syntacCatClassSubClass.value}}
                      </span>
                    {% endif %}

                    {% for lexicalEntry in currentSClass.lexicalEntries %}
                      {% if (cat and lexicalEntry.cat == syntacCat) or (cat is null) %}
                      <a class="classmembers" href="{{ path("lexicalentry_display", {'id': lexicalEntry.id}) }}">{{lexicalEntry.lemma.value}}</a>,
                      {% endif %}
                    {% endfor %}
                    <br/><span class="text-muted">{{semanticSubClassesProperties | raw}}</span>
                  </div>
              </div>

        <!--Si prochain classSubClass a une class différent, on ferme le body / collapse / card -->
        {% if nextClass is null or nextClass.value != currentSClass.semanticClass.value %}
          </div>
         </div>
        </div>
        {% endif %}

    {% endfor %}

{%  endblock %}