{% macro render_card(fiche) %}
    <ferronier-card
        class="col"
        id="card{{ fiche.id }}"
        style="order: 0;"
        >
        <div
            class="card h-100 small"
            >
            {% if fiche.URL_image %}
                <img
                    src="{{ fiche.URL_image }}"
                    loading="lazy"
                    onerror="if (this.src != 'https://ressourcerie.forge.apps.education.fr/images/_manquante.webp') this.src = 'https://ressourcerie.forge.apps.education.fr/images/_manquante.webp';"
                    class="card-img-top"
                    alt="Illustration de {{ fiche.Titre }}"
                >
            {% else %}
                <div
                    class="card-img-top"
                    >
                    {{ fiche.Titre[0] }}
                </div>
            {% endif %}
            <div class="card-body pb-1">
                {% if cards and cards.banner %}
                <div class="banner">{{ fiche.get(cards.banner) }}</div>
                {% endif %}
                <h2
                    class="card-title mb-0 fw-bold fs-6"
                    >
                    {{ fiche.Titre }}
                </h2>
                {% if fiche.Description %}
                <p
                    class="card-text"
                    >
                    {{ fiche.Description }}
                </p>
                {% endif %}
                <p class="card-text">
                    {% for filter in _plugins.searchsortfilter.filters %}
                        {% for value in fiche|expandvalues(filter.key) %}
                        <ferronier-tag
                            class="badge bg-secondary"
                            >
                            {{ value }}
                        </ferronier-tag>
                        {% endfor %}
                    {% endfor %}
                </p>
            </div>

            <div class="card-footer text-center pb-3">
                {% if fiche.URL_publique %}
                    <a href="{{ fiche.URL_publique }}" target="_blank" class="mt-1 btn btn-primary btn-sm me-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accéder à cette ressource"><i class="fa-solid fa-paper-plane"></i></a>
                {% endif %}
                {% if fiche.Description_longue %}
                <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" data-bs-offset="0,10" data-bs-title="Plus d'informations">
                    <button
                        class="mt-1 btn btn-light btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#modalDescription"
                        data-title="{{ fiche.Titre }}"
                        data-description="description/{{ fiche.id }}.description"
                        >
                        <i class="fa-solid fa-circle-question"></i>
                    </button>
                </span>
                {% endif %}
                <a href="{{ fiche.URL_depot }}" target="_blank" class="mt-1 btn btn-light btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Voir le code source du projet"><i class="fa-solid fa-code"></i></a>
                <a href="{{ fiche.URL_depot }}/-/issues" target="_blank" class="mt-1 btn btn-light btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Rédiger un nouveau ticket pour signaler un bug ou suggérer une amélioration"><i class="fa-solid fa-bug"></i></a>
        </div>
    </div>
</ferronier-card>
{% endmacro %}