{% set value = value ?? '' %}
{% if element is defined and element %}{% set value = element.title %}{% endif %}
{% set errors = errors ?? (element is defined and element ? element.getErrors('title') : []) %}
{% if name is not defined %}{% set name = 'title' %}{% endif %}
{% if id is not defined %}{% set id = 'title' %}{% endif %}
{% if label is not defined %}{% set label = 'Title'|t('app') %}{% endif %}

{% set autoSlug = element is defined and not element.slug %}

<div x-data="Market.titleField()" x-init="initField('{{ value|e('js') }}')">
    <label for="{{ id }}" class="block text-sm font-medium text-gray-700">
        {{ label }}
        <span class="text-red-600">*</span>
    </label>

    <div class="mt-1 relative rounded-md shadow-sm">
        <input type="text"
               name="{{ name }}"
               id="{{ id }}"
               value="{{ value }}"
               x-model="titleValue"
               {% if autoSlug %}x-on:blur="updateSlug"{% endif %}
               {% if updateVariantTitle is defined %}x-on:blur="updateVariantBlock"{% endif %}
               class="mt-1 block w-full sm:text-sm rounded-md {{ 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' }}"
        >
        {% 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>