{% set currentCurrency = craft.commerce.getPaymentCurrencies().primaryPaymentCurrency %}
<div>
    <label for="{{ variantKey }}-price" class="block text-sm font-medium text-gray-700">
        {{ 'Price'|t('commerce') }}
        <span class="text-red-600">*</span>
    </label>
    <div class="mt-1 relative rounded-md shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span class="text-gray-500 sm:text-sm">
                {{ craft.app.locale.getCurrencySymbol(currentCurrency.iso) }}
            </span>
        </div>
        <input type="number"
               step=".01"
               min="0"
               id="{{ variantKey }}-price"
               name="variants[{{ variantKey }}][price]"
               value="{{ value }}"
               class="block w-full pl-7 sm:text-sm rounded-md {{ errors ? 'pr-20 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500' : 'pr-12 border-gray-300 focus:ring-action-500 focus:border-action-500' }}"
               placeholder="0.00"
               aria-describedby="price-currency"
        >
        <div class="absolute inset-y-0 {{ errors ? 'right-10' : 'right-0 pr-3' }} flex items-center pointer-events-none">
            <span class="text-gray-500 sm:text-sm" id="price-currency">
                {{ currentCurrency.iso }}
            </span>
        </div>
        {% 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>