{{#each product.accessories:num }}
    {{#if status != 0 }}
        <div class="swiper-slide">
            <div class="accessory flex flex-col px-1.5 h-full items-center bg-white rounded-2xl">
                <a class="flex flex-col items-center" href="{{belongs_to_product.urlname}}-{{belongs_to_product.id}}.html">
                    <img alt="{{belongs_to_product.name}}" class="w-16 mt-2 mb-2 mix-blend-multiply" src="{{productImage(image_name, 180)}}">
                    <h4 class="text-product-color text-base text-center break-words">{{belongs_to_product.name}}</h4>
                </a>
                <div class="flex flex-col flex-grow justify-center text-center">
                    <span class="text-sm font-semibold">
                        {{#if alternative != "" }}
                            {{alternative}}
                        {{/if}}
                    </span>
                    <div class="price leading-none font-semibold">
                        {{#if (saleprice.value > 0) && (saleprice.value < price.value)}}
                            <span class="text-danger font-family-mikado-complete text-lg">{{display_price(saleprice)}}</span>
                            <strike class="ordinary-price font-family-mikado-complete text-xs">{{display_price(price)}}</strike>
                        {{else}}
                            <span class="text-danger font-family-mikado-complete text-lg">{{display_price(price)}}</span>
                        {{/if}}
                    </div>
                </div>
                <div class="rating flex justify-center mt-1 mb-2">
                    <div class="flex">
                        {{#each [1,2,3,4,5]:i }}
                            {{#if belongs_to_product.rating > i}}
                                <img alt="{{l.translate('Gul krona')}}" class="h-2.5 ml-0.5" src="{{image_url}}site/icons/Partyking_krona_betyg_gul_RGB.svg"/>
                            {{else}}
                                <img alt="{{l.translate('Grå krona')}}" class="h-2.5 ml-0.5" src="{{image_url}}site/icons/Partyking_krona_betyg_gra_RGB.svg"/>
                            {{/if}}

                        {{/each}}
                    </div>
                </div>
                <div class="w-full py-2">
                    {{#if instock > 0}}
                        <button on-click="addToCart" class="flex w-full pk-button-yellow">
                        <span class="text-sm uppercase" id="addToCartText">{{l.translate('Lägg i varukorg')}}</span>
                        </button>
                    {{elseif instock < 1 || !instock}}
                        <button disabled class="flex w-full text-xs font-semibold items-center justify-center py-2 bg-accent rounded-2xl">
                        <span class="text-sm uppercase" id="addToCartText">{{l.translate('Tillfälligt slut')}}</span>
                        </button>
                    {{else}}
                        <button on-click="addToCart" value="{{product.accessories[num]}}" class="flex w-full text-xs font-semibold items-center justify-center py-2 bg-primary rounded-2xl">
                        <span class="text-sm uppercase" id="addToCartText">{{l.translate('Beställningsvara')}}</span>
                        </button>
                    {{/if}}
                </div>
            </div>
        </div>
    {{/if}}
{{/each}}