{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_stylesheet.html.twig" %}
{% block content %}
<div class="flexmodule flexmodule-tabs">
    <div id="tabs{{ data.id }}" class="divTabs">
        {# Tab Headers #}
        
        {# Add the data-deep-link attributes to the <ul> #}
        <ul class="moduleTabs cf tabs" data-responsive-accordion-tabs="tabs small-accordion large-tabs" id="tabs{{ data.id }}_elem" data-deep-link="true" data-update-history="true">

            {% for element in elements %}

                {# Create a unique, semantic slug from the header text #}
                {% set tabSlug = (element.header|slug) ~ '-' ~ loop.index %}

                {# Use the slug for the li id #}
                <li style="height: 18px" class="tabs-title{% if loop.first %} is-active{% endif %}" id="header-{{ tabSlug }}">
                    
                    {# Use the slug for the a href #}
                    <a href="#{{ tabSlug }}">
                        {{- element.header -}}
                        <span></span>
                    </a>
                </li>
            {% endfor %}
        </ul>
        
        {# Tab Contents #}
        <div class="divTabsContent tabs-content" data-tabs-content="tabs{{ data.id }}_elem">
            {% for element in elements %}

                {# Create the *same* slug again for the content panel #}
                {% set tabSlug = (element.header|slug) ~ '-' ~ loop.index %}

                {# Use the slug for the div id #}
                <div id="{{ tabSlug }}" class="tabs-panel{% if loop.first %} is-active{% endif %}">
                    {{ content_element(element.reference) }}
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
{% block style %}

<style>
/* Match tab font and spacing to accordion buttons */
.moduleTabs.tabs {
    border: none;
    margin: 0 0 1rem 0;
    display: flex;
    gap: 1rem;
    padding-left: 0;
    list-style: none;
}

.moduleTabs.tabs .tabs-title {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #3d7320; /* Same green as accordion */
    position: relative;
    cursor: pointer;
}

.moduleTabs.tabs .tabs-title a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0.5rem 0;
}

.moduleTabs.tabs .tabs-title a::before {
    content: "›";
    display: inline-block;
    margin-right: 0.5rem;
    color: inherit;
    transition: transform 0.2s;
}

.moduleTabs.tabs .tabs-title.is-active a::before {
    transform: rotate(90deg); /* Point down when active */
}

.moduleTabs.tabs .tabs-title.is-active {
    font-weight: 700;
    text-decoration: underline;
}

.tabs-content {
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.tabs-panel {
    margin-top: 0.5rem;
}


</style>
{% endblock %}