<section class="journey-tabs {{ fields.border_on_bottom ? 'green-border-bottom' : '' }}">
    <div class="container-fluid journey-tabs__inner">
        <div class="row d-flex justify-center journey-tabs__inner-title">
            <div class="col-lg-6 col-l-4 journey-tabs__title-wrap">
                <h3 class="t-700">{{ fields.main_title }}</h3>
                <h5>{{ fields.subtitle }}</h5>
            </div>
        </div>
        {% if fields.cards %}
        <div class="row d-flex justify-center journey-tabs__cards-wrap">
            <div class="col-lg-10 col-l-8 d-flex justify-center">
                <div class="journey-tabs__cards">
                    {% for card in fields.cards %}
                        {% if card.is_link_to_delta_experience %}
                        <a href="{{ delta_experience_link }}" target="_blank" class="journey-tabs__card" >
                        {% elseif card.link %}
                        <a href="{{ card.link }}" class="journey-tabs__card" >
                        {% else %}
                        <div class="journey-tabs__card">
                        {% endif %}
                            <div class="journey-tabs__card-top-lines js-line"></div>
                            <div class="journey-tabs__card-bottom-lines js-line"></div>
                            <div class="journey-tabs__card-inner">
                                <h4 class="journey-tabs__card-title js-card-title">{{ card.title }}</h4>
                                <h6>{{ card.text }}</h6>
                                <div>
                                  <button class="btn btn--primary btn--small journey-tabs__button" type="button">
                                    {% if card.is_link_to_delta_experience %}
                                    <img src="{{ function('get_frontend_static_asset', 'assets/images/logo_xp.svg') }}" alt="Delta Experience logo">
                                    {{ t("Visit DeltaExperience") }}
                                    {% else %}
                                    {{ t("Read more") }}
                                    {% endif %}
                                  </button>
                                </div>
                            </div>
                            {% if card.image %}
                            <div class="journey-tabs__card-image">
                                <img src="{{ card.image.url }}" alt="{{ card.image.alt }}">
                            </div>
                            {% endif %}
                        {% if card.is_link_to_delta_experience or card.link %}
                        </a>
                        {% else %}
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>