{#
    Tile: Featured Collection
    - Used in recipe landing pages showing featured collections
#}

{% set tag = tag|default("li") %}
{% set classes = classes|default("") %}
{% set params = params|default("") %}
{% set headingClass = "h3" %}

{% if isSmall %}
    {% set classes = "tile-featured-collection--small " ~ classes|default("") %}
    {% set headingClass = "h5" %}
{% endif %}

{% if isAlternate %}
    {% set classes = "tile-featured-collection--alternate " ~ classes|default("") %}
    {% set headingClass = "h4" %}
{% endif %}

<{{ tag }} class="tile tile-featured-collection {{ classes }}" {{ params }}>
    <a href="{{ href }}" target="{{ target }}">
        {% if image %}
            {% if image.wordpressId %}
                {% include "@views/components/media/image/template.twig" with {
                    classes: "tile-featured-collection__background",
                    aspectRatio: "portrait",
                    alt: image.alt,
                    wordpressId: image.wordpressId,
                    resizeConfig: {
                        xs: [360, 450],
                        xl: [1024, 1280],
                        xxl: [1024, 1280]
                    }
                } %}
            {% elseif image.src %}
                {% include "@views/components/media/image/template.twig" with {
                    classes: "tile-featured-collection__background",
                    aspectRatio: "portrait",
                    alt: image.alt,
                    src: image.src,
                    srcTablet: image.src,
                    srcMobile: image.src
                } %}
            {% endif %}
        {% endif %}

        <div class="tile-featured-collection__content aspect-ratio aspect-ratio--portrait">
            <div class="tile-featured-collection__text-group">
                {% if label %}
                    <div class="tile-featured-collection__label strong">
                        {# <figure class="tile-featured-collection__label-icon">
                            {% include "@assets/vectors/icons-24/collection.svg" %}
                        </figure> #}
                        <span class="">{{ label }}</span>
                    </div>
                {% endif %}

                <div>
                    {% if eyebrow %}
                        <div class="tile-featured-collection__eyebrow">
                            <span class="">{{ eyebrow|raw }}</span>
                        </div>
                    {% endif %}

                    {% if heading %}
                        <div class="tile-featured-collection__heading">
                            <h4 class="{{ headingClass }}">{{ heading|raw }}</h4>
                        </div>
                    {% endif %}

                    {% if imageTiles %}
                        <div class="tile-featured-collection__image-tiles">
                            <ul>
                                {% for imageTile in imageTiles %}
                                    <li>
                                        {% include "@views/components/media/image/template.twig" with {
                                            classes: "tile-featured-collection__image-tile",
                                            aspectRatio: "square",
                                            alt: imageTile.alt,
                                            wordpressId: imageTile.wordpressId,
                                            resizeConfig: {
                                                xs: [60, 60],
                                                xl: [60, 60],
                                                xxl: [60, 60]
                                            }
                                        } %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </a>
</{{ tag }}>