{% load wagtailcore_tags wagtailimages_tags static %}

<div class="row {%if self.settings.item_css_class%}{{self.settings.item_css_class}}{% else %}gx-4 gy-4{% endif %}">
    <div class="col-3">
        <!-- Tab navs -->
        <div
                class="nav flex-column nav-pills text-center"
                id="v-pills-tab"
                role="tablist"
                aria-orientation="vertical"
        >
            {% for instruction in self.steps %}
                <a
                        data-mdb-pill-init
                        class="nav-link {% if forloop.first %}active{% endif %}"
                        id="v-pills-{{ instruction.value.pill_label|slugify }}-tab"
                        href="#vp-{{ instruction.value.pill_label|slugify }}"
                        role="tab"
                        aria-controls="vp-{{ instruction.value.pill_label|slugify }}"
                        aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                >{{ instruction.value.pill_label }}</a>
            {% endfor %}
        </div>
        <!-- Tab navs -->
    </div>
    <div class="col-9">
        <!-- Tab content -->
        <div class="tab-content" id="vp-content">
            {% for instruction in self.steps %}
                <div
                        class="tab-pane fade show {% if forloop.first %}active{% endif %}"
                        id="vp-{{ instruction.value.pill_label|slugify }}"
                        role="tabpanel"
                        aria-labelledby="vp-{{ instruction.value.pill_label|slugify }}-tab"
                >
                    <h3 class="
                        {% if self.alignment == "center" %}text-center
                        {% elif self.alignment == "left" %}text-start
                        {% else %}text-end{% endif %}">{{ instruction.value.header }}</h3>
                    <div class="content-instructions">
                        {{ instruction.value.content_1|richtext }}
                    </div>
                    <div class="content-instructions">
                        {{ instruction.value.content_2|richtext }}
                    </div>
                    <div class="d-flex
                    {% if self.alignment == "center" %}justify-content-center
                        {% elif self.alignment == "left" %}justify-content-start
                        {% else %}justify-content-end{% endif %}">
                    {{ instruction.value.buttons }}
                    </div>
                </div>
            {% endfor %}
        </div>
        <!-- Tab content -->
    </div>
</div>