{% load wagtailimages_tags %}
<section class="saas-features saas-features--grid saas-features--{{ self.background_style }}"
         data-width="{{ self.layout_width }}">
    <div class="saas-features__container">
        <header class="saas-features__header">
            <h2 class="saas-features__title">{{ self.section_title }}</h2>
            {% if self.section_subtitle %}
            <div class="saas-features__subtitle">{{ self.section_subtitle }}</div>
            {% endif %}
        </header>
        <div class="saas-features__grid saas-features__grid--cols-{{ self.columns }}">
            {% for feature in self.features %}
            <article class="saas-features__card{% if feature.highlight == 'featured' %} saas-features__card--featured{% endif %}">
                {% if feature.highlight == 'new' %}
                <span class="saas-features__badge">{% if request.LANGUAGE_CODE == 'ru' %}Ново{% elif request.LANGUAGE_CODE == 'de' %}Neu{% elif request.LANGUAGE_CODE == 'fr' %}Nouveau{% elif request.LANGUAGE_CODE == 'es' %}Nuevo{% elif request.LANGUAGE_CODE == 'it' %}Nuovo{% elif request.LANGUAGE_CODE == 'pt' %}Novo{% else %}New{% endif %}</span>
                {% endif %}
                <div class="saas-features__icon-wrapper">
                    {% if feature.icon_image %}
                        {% image feature.icon_image width-64 class="saas-features__icon-img" %}
                    {% elif feature.icon %}
                        <i class="saas-features__icon bi bi-{{ feature.icon }}"></i>
                    {% else %}
                        <div class="saas-features__icon-placeholder"></div>
                    {% endif %}
                </div>
                <h3 class="saas-features__card-title">{{ feature.title }}</h3>
                {% if feature.description %}<div class="saas-features__card-desc">{{ feature.description }}</div>{% endif %}
                {% if feature.link_text and feature.link_url %}
                <a href="{{ feature.link_url }}" class="saas-features__card-link">
                    {{ feature.link_text }}
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
                {% endif %}
            </article>
            {% endfor %}
        </div>
    </div>
</section>