{% load wagtailcore_tags ocyan_thumbnail %}
<section class="tabs {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			{% if self.body %}
			<div class="col-lg-6 mx-auto text-lg-center mb-5">
				<h2 class="h2 mb-3">{{ self.header }}</h2>
				{{ self.body|richtext }}
			</div>
			{% endif %}
			<div class="col-lg-12"></div>
			{% with uuid=self.block.get_uuid %}
			<div class="col-lg-5">
				{% if not self.body %}
				<h3 class="h3 mb-5">{{ self.header }}</h3>
				{% endif %}
				<ul class="nav nav-pills flex-column mb-3" id="tabs-{{ uuid }}" role="tablist" aria-orientation="vertical">
					{% for tab in self.tabs %}
					{% with tab_id="block"|add:uuid|stringformat:"s"|add:"_tab"|add:forloop.counter|stringformat:"s" tab_button_id="block"|add:uuid|stringformat:"s"|add:"_tab_button"|add:forloop.counter|stringformat:"s" %}
					<li class="nav-item" role="presentation">
						<button class="nav-link{% if forloop.first %} active{% endif %}" id="{{ tab_button_id }}" data-bs-toggle="pill" data-bs-target="#{{ tab_id }}" type="button" role="tab" aria-controls="{{ tab_id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
							{{ tab.header }}
						</button>
					</li>
					{% endwith %}
					{% endfor %}
				</ul>
			</div>
			<div class="col-lg-7 mb-5 pe-lg-5 tab-style-1">
				<div class="tab-content" id="tabs-content-{{ uuid }}">
					{% for tab in self.tabs %}
					{% with tab_id="block"|add:uuid|stringformat:"s"|add:"_tab"|add:forloop.counter|stringformat:"s" tab_button_id="block"|add:uuid|stringformat:"s"|add:"_tab_button"|add:forloop.counter|stringformat:"s" %}
					<div class="tab-pane fade{% if forloop.first %} show active{% endif %}" id="{{ tab_id }}" role="tabpanel" aria-labelledby="{{ tab_button_id }}" tabindex="0">
						<div class="image-wrapper mb-5">
							{% lazy_responsive_image tab.image.file classes="image-bottom img-fluid" %}
						</div>
						{% if tab.button %}
						{{ tab.body|richtext }}
						<div class="buttons-wrapper">
							{% include "coyote/blocks/partials/button.html" with button=tab.button %}
						</div>
						{% else %}
						{{ tab.body|richtext }}
						{% endif %}
					</div>
					{% endwith %}
					{% endfor %}
				</div>
			</div>
			{% endwith %}
		</div>
	</div>
</section>