{#
 # Product Tabs (Bootstrap 5 Override)
 #
 # Renders product tabs (Description, Additional Info, Reviews) using
 # Bootstrap 5 nav-tabs and tab-content with fade transitions.
 #
 # Expected context:
 #   product_tabs - Associative array of tabs, each with:
 #     key.title    - Tab title
 #     key.callback - Tab content callback name
 #     key.priority - Sort order
 #
 # WooCommerce PHP equivalent: single-product/tabs/tabs.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% if product_tabs is defined and product_tabs|length > 0 %}
    <div class="woocommerce-tabs wc-tabs-wrapper mt-5">
        {# Tab navigation #}
        <ul class="nav nav-tabs" id="productTabs" role="tablist">
            {% for key, tab in product_tabs %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link{% if loop.first %} active{% endif %}"
                            id="{{ key }}-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#tab-{{ key }}"
                            type="button"
                            role="tab"
                            aria-controls="tab-{{ key }}"
                            aria-selected="{{ loop.first ? 'true' : 'false' }}">
                        {{ tab.title|esc_html }}
                    </button>
                </li>
            {% endfor %}
        </ul>

        {# Tab content panels #}
        <div class="tab-content py-4" id="productTabContent">
            {% for key, tab in product_tabs %}
                <div class="tab-pane fade{% if loop.first %} show active{% endif %}"
                     id="tab-{{ key }}"
                     role="tabpanel"
                     aria-labelledby="{{ key }}-tab"
                     tabindex="0">
                    {% if tab.callback is defined %}
                        {{ call_user_func(tab.callback, key, tab) }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        {{ do_action('woocommerce_product_after_tabs') }}
    </div>
{% endif %}