{% extends '00_bases/base.html.twig' %}

{% block title %}Vignettes{% endblock %}

{% block body %}
<style>
.oka-filters {
    --oka-filters-color-bg : var(--oka-color-system-contrast-low);
    --oka-filters-radius : 0.5rem;
    --oka-filters-border-color : var(--oka-color-primary-contrast-medium);
    --oka-filters-border-width : 0;
    --oka-filters-padding : 1rem 1rem;
}

.oka-pagination {
    margin: 1rem 0 3rem;
}
</style>
<div class="example-wrapper">
    <h1>Affichage en vignettes</h1>
    <p class="oka-text -lg">Le mode d'affichage en vignette ne supporte pas les trie. Tout tri ajouté seront ignorés.</p>

    <div class="oka-spacer -md"></div>

    <div class="oka-tabs" style="overflow-y:visible">
        {% set cardsTemplate = [
            "pages/card_case/normal-case/_tab.html.twig",
            "pages/card_case/with-filter/_tab.html.twig",
            "pages/card_case/css-normal/_tab.html.twig",
            "pages/card_case/css-body/_tab.html.twig",
            "pages/card_case/lazy-loading/_tab.html.twig",
        ] %}

        {% include 'pages/card_case/_tabs.html.twig'  %}
    </div>
</div>
{% endblock %}