{% set routename = app.request.get('_route') %}
<div class="card {{routename == 'search' and cours.type == 'Formation' ? 'border-success' }} radius shadow h-100">
        {% if cours.type == 'Formation' %}
            <a class="text-decoration-none" href="{{ path('description_formation', {'slug': cours.slug}) }}">
        {% else %}
            <a class="text-decoration-none" href="{{ path('description', {'slug': cours.slug}) }}">
        {% endif %}
        <div class="p-2">
            {% if cours.image is null %}
            <img src="{{asset('images/formation/defaultformation.jpg')}}" class="card-img-top rounded-img-5 img-card-size" alt="course"> {% else %}
            <img class="card-img radius img-card-size" src="{{ asset('images/formation/'~ cours.image) }}" alt="Image Description"> {% endif %}
        </div>
    </a>
    <div class="card-body">
       
        {% if routename == 'search' %}
            {% if cours.type == 'Formation' %}
            <svg width="20" height="20" fill="#198754" class="bi bi-mortarboard me-2 mb-1" viewBox="0 0 16 16">
                <path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z"></path>
                <path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z"></path>
              </svg>
                <small class="card-subtitle">{{cours.category.name}}</small>
                
            {% endif %}
        {% else %}
            <small class="card-subtitle">{{cours.category.name}}</small>
        {% endif %}
        
         {% if (cours.skills == "Débutant") %}
            <span class="badge bg-success float-end">Débutant</span> 
        {% elseif (cours.skills == "Amateur") %}
            <span class="badge bg-warning float-end">Amateur</span> 
        {% else %}
            <span class="badge bg-danger float-end">Expert</span> 
        {% endif %}
        <h3 class="card-title h-title-card">
            {% if cours.type == 'Formation' %}
            <a class="black-title nav-link fs-5 px-0" href="{{ path('description_formation', {'slug': cours.slug}) }}">{{cours.title}}</a>
            {% else %}
            <a class="black-title nav-link fs-5 mt-4 px-0" href="{{ path('description', {'slug': cours.slug}) }}">{{cours.title}}</a>
            {% endif %}
        </h3>
        <div class="row align-items-center">
            <div class="col">
                <div class="avatar-group">
                    <a class="avatar avatar-circle text-decoration-none" data-toggle="tooltip" data-placement="top" title="Créé par {{cours.user.lastname ~ ' ' ~ cours.user.firstname}}" href="#">
                  {% if cours.user.picture is null %}
                    <span class="default-profile-card px-3 py-2 text-white" data-color="{{cours.user.colorProfile}}">{{ cours.user.firstName[:1]|upper }}</span>
                  {% else %}
                  <img class="img-fluid avatar-img-feature"
                    src="{{asset('images/userprofile/' ~ cours.user.picture)}}" alt="image utilisateur">
                  {% endif %}
                </a>
                </div>
            </div>
            <div class="col-auto pt-3">
                {% if cours.type == 'Courses' %}
                <ul class="list-inline list-separator small ms-auto">
                    <li class="list-inline-item">
                        <svg width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
                    <path
                      d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                  </svg> {{cours.chapters|length }} chapitres
                    </li>
                </ul>
                {% endif %}   
            </div>
        </div>
        <div class="row py-1">
            <p>{{cours.description| u.truncate(60, '..') | raw }}</p>
        </div>
    </div>
    <div class="card-footer bg-white card-footer-radius">
        {% if cours.type == 'Formation' %}
            <a class="card-link nav-link d-flex" href="{{ path('description_formation', {'slug': cours.slug}) }}">
        {% else %}
            <a class="card-link nav-link d-flex" href="{{ path('description', {'slug': cours.slug}) }}">
        {% endif %}
        <div class="align-middle align-self-center">Lire encore </div>
        <div class="align-middle align-self-center">
            <svg width="12" height="12" fill="currentColor" class="bi bi-chevron-right m-1" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
            </svg>
        </div>
        </a>
    </div>

</div>