{% set card_data = category.getCategoryCardData() %}

{% if category.name %}

    <li class="gridItem {{ class }}">

        <div class="innerGridItem">

            <a href="{{ card_data.actionUrl }}" class="cardHeader">
                <h5>{{ category.name|lower|capitalize }}</h5>

                {% if category.description_small is not empty %}
                    <p>
                        {{ category.description_small|striptags()|raw }}
                    </p>
                {% endif %}
            </a> <!-- .cardHeader -->

            <a href="{{ card_data.actionUrl }}" class="cardImage">
                <picture class="imageWrap">
                    {% if category.image is not empty %}
                        <img
                            src="/uploads/images/categories/cards_landscape/{{ category.image }}"
                            alt="{% if category.image_alt is not empty %}{{ category.image_alt }}{% else %}{{ category.name }}{% endif %}"
                            width="402"
                            height="298"
                            loading="lazy"
                        >
                    {% else %}
                        <div class="noImageSvg">
                            {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/picture.svg')|raw }}
                        </div> <!-- .noImageSvg -->
                    {% endif %}
                </picture>
            </a> <!-- .cardImage -->

            <div class="cardFooter">
                <a href="{{ card_data.actionUrl }}" class="cardPrice">
                    {% if category.starting_price is not empty and category.starting_price > 0 %}
                        <div class="priceHeader">
                            Starting from
                        </div> <!-- .priceHeader -->

                        <div class="price">
                            {{ category.starting_price|multi_currency|raw }}
                        </div> <!-- .price -->
                    {% endif %}
                </a> <!-- .cardPrice -->

                <div class="cardCta">
                    <a type="button" class="button" href="{{ card_data.actionUrl }}">
                        {{ card_data.actionLabel }}
                    </a>
                </div> <!-- .cardCta -->
            </div> <!-- .cardFooter -->

        </div>

    </li> <!-- .gridItem -->

{% endif %}
