{#
 # Brands A-Z Listing (Bootstrap 5 Override)
 #
 # Alphabetical index of product brands used by [product_brand_list] shortcode.
 #
 # Expected context:
 #   index          - Array of index characters (A-Z, 0-9)
 #   product_brands - Array keyed by character, each containing brand term objects
 #   show_empty     - Whether to show empty index letters
 #   show_top_links - Whether to show "Top" links after each section
 #
 # WooCommerce PHP equivalent: brands/shortcodes/brands-a-z.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

<div id="brands_a_z">
    <nav class="mb-4" aria-label="{{ __('Brand index') }}">
        <ul class="list-inline brands_index">
            {% for i in index %}
                {% if product_brands[i] is defined %}
                    <li class="list-inline-item">
                        <a href="#brands-{{ i|esc_attr }}" class="btn btn-sm btn-outline-primary">{{ i|esc_html }}</a>
                    </li>
                {% elseif show_empty %}
                    <li class="list-inline-item">
                        <span class="btn btn-sm btn-outline-secondary disabled">{{ i|esc_html }}</span>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>

    {% for i in index %}
        {% if product_brands[i] is defined %}
            <h3 id="brands-{{ i|esc_attr }}" class="h5 border-bottom pb-2 mt-4 mb-3">{{ i|esc_html }}</h3>

            <ul class="list-unstyled brands row row-cols-1 row-cols-sm-2 row-cols-md-3 g-2 mb-3">
                {% for brand in product_brands[i] %}
                    <li class="col">
                        <a href="{{ get_term_link(brand.slug, 'product_brand')|esc_url }}">
                            {{ brand.name|esc_html }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            {% if show_top_links %}
                <a class="btn btn-sm btn-link" href="#brands_a_z">
                    <i class="bi bi-arrow-up me-1" aria-hidden="true"></i>{{ __('Top') }}
                </a>
            {% endif %}
        {% endif %}
    {% endfor %}
</div>