{% if product.regular_price|default or product.sale_price|default %}
<template x-if="currentIsInStock()">
<section id="fixedNavPrice"
class="w-full fixed bottom-0 left-0 right-0 bg-gray-100 shadow-[0_1px_13px_0px_rgba(0,0,0,0.1)] z-10 ease-in-out duration-500">
<div class="mx-auto max-w-screen-2xl flex flex-col md:flex-row gap-0 md:gap-4 md:px-5 lg:px-20">
<div class="flex flex-col md:flex-row md:w-full justify-between md:justify-start md:items-center md:gap-2 px-4 pb-4 md:py-3 md:px-0">
<span class="text-black md:text-2xl lg:min-w-fit py-1">{{ product.name }}</span>
<div class="flex flex-row justify-between items-end md:items-center w-full gap-4">
{% if totalPrice|default %}
<div>
<span class="text-xl text-black font-bold"
x-text="currentVariationTotalPrice()">{{ product.regular_price|number_format(2,',','.')|replace({',00':''}) ~ '€' }}</span>
<span x-text="'(' + amount + 'm)'">(1m)</span>
</div>
{% elseif product.regular_price|default and product.sale_price|default %}
<div class="flex flex-row md:flex-row-reverse items-end md:gap-2">
<span class="text-xs md:text-sm text-[#A3A3A3] line-through pr-1"
x-text="currentVariationRegularPrice()">{{ product.regular_price|number_format(2,',','.')|replace({',00':''}) ~ '€' }}</span>
<span class="text-xl text-black font-bold"
x-text="currentVariationSalePrice()">{{ product.sale_price|number_format(2,',','.')|replace({',00':''}) ~ '€' }}</span>
</div>
{% else %}
<span class="text-xl text-black font-bold"
x-text="currentVariationRegularPrice('{{ afterPrice|default }}')">{{ product.regular_price|number_format(2,',','.')|replace({',00':''}) ~ '€' ~ afterPrice|default }}</span>
{% endif %}
<button id="addToCartFixed"
data-redirect-to-cart="{{ cart_url }}"
class="single_add_to_cart_button w-full max-w-[300px] h-fit flex flex-row justify-center items-center gap-3 rounded-none bg-primary p-2 text-white text-center"
@click="addToCart()">
<svg id="loading_buy_fixed" class="hidden animate-spin h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span id="loading_buy_text_fixed">Añadir a la cesta</span>
</button>
</div>
</div>
</div>
</section>
</template>
{% endif %}