{% if cards|length > 0 %}
<div class="mb-4 ps-4 pe-4"> 
    <div class="multiple-item ps-3 pe-3 d-none"> 
        {% for card in cards %}
            {% set principalColor = 'black' %}
            {% for color in colors %}   
                {% if card.color != null and color.hex == card.color %}
                    {% set principalColor = color.principal %}
                {% endif %}
            {% endfor %}
            <div class="mx-3">
                <div class="card card-filter" data-id-card={{card.id}} data-name-card="{{ card.name }}" data-active-color={{ principalColor }} data-is-filterable={{card.calculated is defined ? 1 : 0}}>
                    <div class="card-body">
                        <div style="display: flex;align-items: center;">
                            <h2 style="width: fit-content;margin: 0px 20px 0px 0px;"><b>{{ card.calculated is defined ? card.calculated : '--' }}</b></h2>
                            <h4>órdenes</h4>
                        </div>                    
                        <p class="card-text">
                            <b style="color:{{principalColor}};">{{ card.name }}</b>
                        </p>
                        <small class="text-muted">{{ card.datetime is defined ? 'Hace ' ~ card.datetime ~ ' minuto/s' : 'No disponible. Intente en unos minutos' }}</small>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% else %}
<div class="mb-3">
    <div class="card card-body text-bg-light">
        <span>No existen tarjetas de filtros creadas. Para crearlas haz click <a href="{{ path( 'SellerController_indexView' ) }}">aquí</a>.</span> 
        <span>Si necesitas ayuda con el uso y comportamiento de las tarjetas podes leer el siguiente <a target="_blank" href="https://fulljaus.atlassian.net/wiki/external/NDVlODc4NTdkZDRiNDE2MmEzNmNkZjU1MzgzZjM4ZDc">instructivo</a>.</span>
    </div>            
</div>
{% endif %}