{% if atributos|default and atributo|default %}
<div id="{{ atributo }}" class="flex flex-col space-y-2 text-black">
<div class="text-sm font-light">
<div class="flex items-center gap-x-4">
<span class="font-bold uppercase">{{ titulo|default ? titulo|raw : 'Selecciona ' ~ fn('wc_attribute_label', atributo)|raw }}</span>
{% if modal|default %}
<button data-modal-target="{{ modal }}"
class="relative flex w-fit cursor-pointer select-none flex-row items-center gap-2 rounded-full border border-gray-400 px-2 py-0.5 text-xs group text-center hover:bg-black hover:bg-opacity-10 transition-all whitespace-nowrap"
:class="{'hidden': !getAttributeImage('{{ atributo }}', current.attributes.attribute_{{ atributo }})}">
{% include 'assets/info.svg' %}
Ver detalles
</button>
{% endif %}
</div>
</div>
<div class="flex flex-row flex-wrap gap-2">
<template x-for="attribute in {{ atributos }} || []">
<label :for="'{{ atributo }}_' + attribute"
class="relative flex w-fit cursor-pointer select-none flex-row items-center gap-2 rounded-none border border-gray-300 px-3 py-1 text-xs bg-white has-[:disabled]:hidden transition-all"
@click.stop="changeVariation('{{ atributo }}', attribute)">
<span class="text-start text-sm font-bold"
x-text="getAttributeName('{{ atributo }}', attribute)"></span>
<input :id="'{{ atributo }}_' + attribute"
class="absolute h-0 w-0 appearance-none opacity-0"
type="radio" name="{{ atributo }}"
:value="attribute"
@click.stop
:checked="isCurrentAttribute('{{ atributo }}', attribute)"
:disabled="!variationExists('{{ atributo }}', attribute)"/>
<span aria-hidden="true"
class="outline-2 absolute inset-0 hidden rounded-none bg-black bg-opacity-10 outline outline-black"></span>
</label>
</template>
</div>
</div>
{% endif %}