{% set currentVendor = market.vendors.getCurrentVendor() %}

{% if count is not defined %}
    {% set count = startingCount %}
{% endif %}

{% if count > startingCount %}

    <div x-data="Market.variantBlock()"
         x-init="initBlock(false, true, true, '')"
         class="variant-block bg-white shadow rounded-md relative"
         x-show="visible"
         x-on:update-from-title="updateTitle"
         x-on:make-default="isDefault = true"
         x-transition:enter="ease-in-out duration-500"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in-out duration-500"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
    >
        {% set variantKey = 'new'~count %}

        {% include '_market/_includes/variant-block-header.html' with {
            enabled: true,
            isDefault: false
        }%}

        <div x-show="isExpanded"
             class="bg-gray-50 px-2 py-2.5 sm:p-3 rounded-b-md grid gap-3 grid-cols-2"
        >
            {# Title #}
            {% include '_market/_includes/fields/title.html' with {
                value: '',
                errors: [],
                name: 'variants['~variantKey~'][title]',
                id: 'variants-'~variantKey~'-title',
                updateVariantTitle: true
            } %}

            {% include '_market/_includes/variant-fields' with {
                variant: false,
                vendorCode: currentVendor.code
            } %}
        </div>
    </div>
{% endif %}

<button sprig
        s-val:count="{{ count + 1 }}"
        s-select=".variant-block"
        s-target="#variants-list"
        s-swap="beforeend swap:200ms"
        s-swap-oob="true"
        id="add-variant-button"
        type="button"
        class="mr-4 relative inline-flex items-center space-x-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-action-700 bg-action-100 hover:bg-action-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
>
    {# Heroicon name: plus-circle #}
    <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5 text-action-500" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
    </svg>
    Add a variant
</button>