Blättern - Navigation zwischen Produkten

{{ if $wsViews.current.info.product }}
    {{ var $cProductId = $wsViews.current.info.product.base.id
                         | ifNull($wsViews.current.info.product.id) }}

    {{ var $cNavCatId = "" }}
    {{ foreach $cPart in $wsNavigation.path }}
        {{ if $cPart.type == "category" }}
            {{ $cNavCatId = $cPart.object.id }}
        {{ /if }}
    {{ /foreach }}

    {{ if $cNavCatId }}
        {{ var $cCatProducts = $wsCategories.loadProducts($cNavCatId) }}
        {{ var $cPrevProduct = null }}
        {{ var $cNextProduct = null }}
        {{ var $cCurrentPos = 0 }}
        {{ var $cCounter = 0 }}
        {{ var $cTotal = len($cCatProducts) }}

        {{ foreach $cCatProduct in $cCatProducts }}
            {{ var $cCompareId = $cCatProduct.base.id | ifNull($cCatProduct.id) }}
            {{ if $cCompareId == $cProductId }}
                {{ $cCurrentPos = $cCounter }}
            {{ /if }}
            {{ $cCounter = $cCounter + 1 }}
        {{ /foreach }}

        {{ if $cCurrentPos > 0 }}
            {{ $cPrevProduct = $cCatProducts[$cCurrentPos - 1] }}
        {{ /if }}
        {{ if $cCurrentPos < $cTotal - 1 }}
            {{ $cNextProduct = $cCatProducts[$cCurrentPos + 1] }}
        {{ /if }}

        <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 12px;">

            {{ if $cPrevProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cPrevProduct.id}) }}"
                   aria-label="Vorheriges Produkt"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647
                            5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </span>
            {{ /if }}

            <span style="font-size: 13px; color: #888;">
                {{= $cCurrentPos + 1 }}/{{= $cTotal }}
            </span>

            {{ if $cNextProduct }}
                <a href="{{= $wsViews.url('Product', {productId: $cNextProduct.id}) }}"
                   aria-label="Nächstes Produkt"
                   style="display: inline-flex; align-items: center; justify-content: center;
                          width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 4px;
                          text-decoration: none; color: inherit;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </a>
            {{ else }}
                <span style="display: inline-flex; align-items: center; justify-content: center;
                             width: 32px; height: 32px; border: 1px solid #eee; border-radius: 4px;
                             color: #ccc; cursor: not-allowed;"
                      aria-disabled="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                         fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1
                            0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </span>
            {{ /if }}

        </div>
    {{ /if }}
{{ /if }}