{% set nom = ligns.nom.value %}
{% set exercice = ligns %}
{% set visuel = ligns.visuel.value %}
{% set statut = exercice._object.statut %}
{% set classificationId = exercice._object.c0.id %}
{% set id = exercice._object.id %}
{% set tags = ligns.tags.value|split(',') %}
{% set favori = exercice._object.isFavori %}

<div class="oka-flip tgo-exo_card {% if statut == 0 %}-brouillon{% endif %}  {% if statut == 2 %}-archive{% endif %}" id="exercice-card-seance" data-id="{{ligns.id.value}}" >
    <input type="checkbox" id="flip-{{ id }}" class="oka-flip__pilot" />       
    <div class="oka-flip__inner">
        <div class="oka-flip__front">
            {# LIEN #}
            <a class="oka-card__link" {# href="{{ path('exercice.classification.show', {'classificationId': classificationId, 'id': exercice._object.id}) }}"#}></a>    

            {# VISUEL #}
            <div class="oka-card__media oka-ratio -16-9 " style="background-image: url({{ asset('visuels/exercice/visuel/' ~ visuel) }});background-size: cover;"></div>

            {# RUBBAN #}
            {% if statut == 0 %}

            <div class="oka-card__pin">
                <div class="oka-card__corner">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><polygon points="0 60 0 0 60 0 0 60" fill="var(--color-1--lighter)"></polygon></svg>
                    <i id="exoFavori" class="fa-solid fa-pen" style="position: absolute; left: 0.5rem; top: 0.45rem; font-size:0.6rem;color:var(--oka-color-system-contrast-medium)"></i>

                </div>
            </div>

            {% endif %}
           

            {% if favori == 1 %}
                <div class="oka-card__pin">
                    <div class="oka-card__corner">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><polygon points="0 60 0 0 60 0 0 60" fill="var(--color-1--lighter)"></polygon></svg>

                        <i id="exoFavori" class="fa-solid fa-star" style="position: absolute; left: 0.5rem; top: 0.35rem; font-size:0.6rem;color:var(--oka-color-warning-contrast-medium)"></i>
                    </div>
                </div>
            {% endif %}


            <div class="oka-card__head">
                <div class="u-oka-flex -flex-center-left">
                    {# TITRE #}
                    <div class="oka-data -sm -strong -crop" style="max-width: 85%; overflow-wrap: break-word;">
                        {{ nom }}
                    </div>

                     {# TOOGLE CONTROL #}
                    {# <label for="flip-{{ id }}" class="oka-flip__flipper oka-bt -ghost"><i class="fa-regular fa-circle-info"></i></label> #}
                    <a href="{{ path('exercice.classification.show', {'classificationId': classificationId, 'id': exercice._object.id}) }}" onclick="rememberSommaire(document.location.href)" class="oka-flip__flipper oka-bt -sm -ghost"><i class="fa-regular fa-eye"></i></a>
                </div>
                
            </div>


        </div>
        
    </div> 
</div>