{% if value and value == prefix %}
    {% set value = '' %}
{% endif %}
<div>
    <label for="{{ variantKey }}-sku" class="block text-sm font-medium text-gray-700">
        {{ 'SKU'|t('commerce') }}
        <span class="text-red-600">*</span>
    </label>

    <div x-data="Market.skuField()"
         x-init="initField('{{ prefix }}', '{{ value|replace(prefix, '') }}')"
         class="mt-1 flex relative rounded-md shadow-sm"
    >
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
            {{ prefix }}
        </span>

        <input type="hidden"
               name="variants[{{ variantKey }}][sku]"
               value="{{ value }}"
               x-ref="input"
        >

        <input type="text"
               id="{{ variantKey }}-sku"
               value="{{ value|replace(prefix, '') }}"
               x-model="skuValue"
               x-on:input="onUpdate"
               class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm {{ errors ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
               placeholder="JOY-CARD-YELLOW"
        >

        {% if errors %}
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                {# Heroicon name: solid/exclamation-circle #}
                <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </div>
        {% endif %}

    </div>

    {% for error in errors %}
        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
    {% endfor %}
</div>