{% set is_active = categorie.active %}

{% if only_enabled == 'true' %}
    {% set only_enabled = true %}
{% else %}
    {% set only_enabled = false %}
{% endif %}

{% if (only_enabled and is_active) or (not only_enabled) %}

{% set enfants = categorie.enfants|mediacategorie_sort %}
{% set cpt_enfant = 0 %}
{% for enfant in enfants if ((only_enabled and enfant.active) or (not only_enabled)) %}
    {% set cpt_enfant = cpt_enfant + 1 %}
{% endfor %}

{% set est_connecte = true %} {# shunt pour l'instant, au besoin il faudra l'ajouter dans le contrôleur et dans les twig qui l'invoquent #}
{% set sid = 'category' ~ categorie.id %}
<div class="card" id="{{ sid }}">

    <div class="card-header">

        {# si cette catégorie contient des sous-catégories #}
        {% if cpt_enfant>0 %}
            <button type="button"
                    class="btn btn-sm btn-primary btn-show-enfants collapsed"
                    title="Voir les rubriques filles"
                    data-toggle="collapse"
                    data-target="#{{ sid }}_body"
                    aria-expanded="false"><!-- voir css --></button>
        {% else %}
            <!-- em>aucune catégorie fille</em -->
        {% endif %}
        <h2 class="d-inline-block m-0">
            {{ categorie.libelle }}
            {% if not is_active %}<em>(désactivée)</em>{% endif %}
        </h2>

        <div class="card-header-actions">
            <ul class="d-flex list-unstyled m-0">
                {% if est_connecte %}
                    <li class="">
                        <div class="btn btn-sm btn-outline-primary btn-edit popin"
                             title="Modifer"
                             data-title="Modification de la rubrique ''{{ categorie.libelle }}'' "
                             data-href="{{ path('courses_mediacategorie_edit',{id:categorie.id})|raw }}">
                             <i class="fa fa-edit"></i>
                        </div>
                    </li>
                {% endif %}

                {#
                {% if est_connecte %}

                    {% set attrs = ' title="Voir ses médias (à droite)" ' %}
                    {% set classes = ' btn-show-medias btn-show-media-maim ' %}
                    {% if medias|length<=0 %}
                        {% set attrs = ' title="Aucun média" disabled="disabled" ' %}
                        {% set classes = ' disabled ' %}
                    {% endif %}
                    <li class="">
                        <div class="btn btn-sm btn-primary ml-2 {{ classes }}"
                             {{ attrs|raw }}
                             data-href="{{ path('courses_media_index',{categorie_id:id, recurse:true})|raw }}">
                             <i class="fa fa-fast-forward"></i>
                        </div>
                    </li>
                {% endif %}
                #}
                {# ### dans popin
                {% if est_connecte %}
                    <li class="">
                        <div class="btn btn-sm btn-outline-dark btn-delete ajax"
                           data-href="{{ path('courses_mediacategorie_delete',{id:id})|raw }}">
                            Supprimer
                        </div>
                    </li>
                {% endif %}
                #}
            </ul>
        </div>
    </div>
    <div id="{{ sid }}_body" class="card-body collapse">

        {# bouton pour révéler est dans card-header-actions #}
        <ul id="{{ sid }}_enfants"
            class="categories list-unstyled">

            {# MAYDO: faire dans le contrôleur TreeData #}
            {% for enfant in enfants if ((only_enabled and enfant.active) or (not only_enabled)) %}
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                    {% set categorie = enfant %}
                    {% include "@Courses/Media/tree_categorie.html.twig"
                        with {'categorie': categorie,
                        'only_enabled': only_enabled } only %}
                </li>
            {% endfor %}
        </ul>

        {# si cette catégorie contient des media (et qu'on souhaite les afficher DANS l'arborescence) # }
        {% if medias|length>0 %}
        <button type="button"
                class="btn btn-primary"
                data-toggle="collapse"
                data-target="#{{ sid }}_medias"
                aria-expanded="false">
            voir ses medias (ici)
        </button>
        {% else %}
            <!-- em>aucun media</em -->
        {% endif %}
        <ul id="{{ sid }}_medias"
            class="medias list-unstyled collapse">
            {% for media in medias %}
                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                    {% include "@Courses/Media/tree_media.html.twig" with media only %}
                </li>
            {% endfor %}
        </ul>
        #}
    </div>
    <div class="card-footer">
        <div class="card-header-actions">
            <ul class="d-flex list-unstyled m-0">
                {% if est_connecte %}
                    <li class="">
                        <div class="btn btn-sm btn-outline-primary btn-new popin"
                           data-title="Ajout d'une rubrique fille à ''{{ categorie.libelle }}''"
                           data-href="{{ path('courses_mediacategorie_create', {parent_id:categorie.id})|raw }}">
                            Ajouter une rubrique
                        </div>
                    </li>
                {% endif %}
                {#
                {% if est_connecte %}
                    <li class="">
                        <div class="btn btn-sm btn-outline-primary btn-new popin"
                           data-title="Ajout d'un média fille à ''{{ libelle }}''"
                           data-href="{{ path('courses_media_create', {categorie_id:id})|raw }}">
                            Ajouter un media
                        </div>
                    </li>
                {% endif %}
                #}
            </ul>
        </div>
    </div>
</div>
{% endif %}