{% load wagtailcore_tags wagtailimages_tags mandel_template_engine %}
<section class="mandel-block mandel-showcase mandel-showcase--{{ value.appearance }}"><div class="container">
<div class="row mb-4 g-4"><div class="col-lg-6">{% if value.eyebrow %}<p class="mandel-eyebrow">{{ value.eyebrow }}</p>{% endif %}{% if value.heading %}<h2 class="display-6">{{ value.heading }}</h2>{% endif %}{{ value.intro_left|richtext }}</div><div class="col-lg-6">{{ value.intro_right|richtext }}</div></div>
<div id="{{ mandel_component_id }}" class="carousel slide" data-bs-wrap="{{ value.loop|yesno:'true,false' }}" {% if value.autoplay %}data-bs-ride="carousel" data-bs-interval="{{ value.interval_ms }}"{% endif %}>
<div class="carousel-indicators">{% for slide in value.slides %}<button type="button" data-bs-target="#{{ mandel_component_id }}" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>{% endfor %}</div>
<div class="carousel-inner">{% for slide in value.slides %}<div class="carousel-item {% if forloop.first %}active{% endif %}"><article class="mandel-showcase-slide">{% if slide.mobile_image %}<div class="d-lg-none">{% picture slide.mobile_image format-{avif,webp,jpeg} width-900 class="d-block w-100" %}</div><div class="d-none d-lg-block">{% picture slide.image format-{avif,webp,jpeg} width-1800 class="d-block w-100" %}</div>{% else %}{% picture slide.image format-{avif,webp,jpeg} width-1800 class="d-block w-100" %}{% endif %}<div class="mandel-showcase-overlay"><div>{% if slide.eyebrow %}<p class="mandel-eyebrow text-white">{{ slide.eyebrow }}</p>{% endif %}{% if slide.badge %}<span class="badge text-bg-light mb-2">{{ slide.badge }}</span>{% endif %}<h3 class="display-6">{{ slide.heading }}</h3>{% if slide.body %}<p class="lead">{{ slide.body }}</p>{% endif %}{% if slide.action.label %}{% mandel_link_url slide.action as href %}<a class="btn btn-light" href="{{ href }}"{% if slide.action.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ slide.action.label }}</a>{% endif %}</div></div></article></div>{% endfor %}</div>
<button class="carousel-control-prev" type="button" data-bs-target="#{{ mandel_component_id }}" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button>
<button class="carousel-control-next" type="button" data-bs-target="#{{ mandel_component_id }}" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button>
</div>
{% if value.footer_actions %}<div class="d-flex flex-wrap gap-2 mt-4">{% for action in value.footer_actions %}{% mandel_link_url action as href %}<a class="btn {% if action.style == 'secondary' %}btn-secondary{% elif action.style == 'outline' %}btn-outline-secondary{% elif action.style == 'link' %}btn-link{% else %}btn-primary{% endif %}" href="{{ href }}"{% if action.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ action.label }}</a>{% endfor %}</div>{% endif %}
</div></section>