{% load wagtailcore_tags ocyan_thumbnail i18n %}
<section class="tabs {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			{% with uuid=self.block.get_uuid %}
			{% with tablist_id="coyote-tabs-"|add:uuid|stringformat:"s" %}
			<div class="col-lg-5 mb-5 pe-lg-5 tab-style-1 block-lead">
				<h5 class="text-muted mb-3">{{ self.header }}</h5>
				<ul class="nav nav-pills mb-3" id="{{ tablist_id }}" role="tablist" aria-label="{{ self.header|default:_('Tabbed content') }}">
					{% for tab in self.tabs %}
					{% with tab_id="coyote-tab-"|add:uuid|stringformat:"s"|add:"-"|add:forloop.counter|stringformat:"s" panel_id="coyote-tabpanel-"|add:uuid|stringformat:"s"|add:"-"|add:forloop.counter|stringformat:"s" %}
					<li class="nav-item" role="presentation">
						<button class="nav-link{% if forloop.first %} active{% endif %}" id="{{ tab_id }}" data-bs-toggle="pill" data-bs-target="#{{ panel_id }}" type="button" role="tab" aria-controls="{{ panel_id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
							{{ tab.header }}
						</button>
					</li>
					{% endwith %}
					{% endfor %}
				</ul>
				<div class="tab-content" id="{{ tablist_id }}-content">
					{% for tab in self.tabs %}
					{% with tab_id="coyote-tab-"|add:uuid|stringformat:"s"|add:"-"|add:forloop.counter|stringformat:"s" panel_id="coyote-tabpanel-"|add:uuid|stringformat:"s"|add:"-"|add:forloop.counter|stringformat:"s" %}
					<div class="tab-pane fade{% if forloop.first %} show active{% endif %}" id="{{ panel_id }}" role="tabpanel" aria-labelledby="{{ tab_id }}" tabindex="0">
						{% 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 %}
			{% endwith %}
		</div>
	</div>
	{% lazy_responsive_image self.image.file classes="image-bottom img-fluid" alt=self.image.title|default:self.header|default:_('Tabbed content image') %}
</section>