{% if useFieldsNamespace is not defined %}{% set useFieldsNamespace = true %}{% endif %}

{% if useFieldsNamespace %}
    {% set inputName = 'fields['~field.handle~']' %}
{% else %}
    {% set inputName = field.handle %}
{% endif %}

{% if useGrid is not defined %}
    {% set useGrid = true %}
{% endif %}

{% set errors = element.getErrors(field.handle) %}
<div{% if errors %} class="ring-1 ring-red-500 ring-offset-8 rounded-sm mb-8 sm:ring-offset-12 sm:mb-10"{% endif %}>

    <div class="flex">
        <div class="flex-grow">
            <label for="field-{{ field.id }}" class="block text-sm font-medium text-gray-700">
                {{ field.name }}
                {% if field.required %}<span class="text-red-600">*</span>{% endif %}
            </label>

            {% if field.instructions %}
                <p class="text-xs text-gray-500">{{ field.instructions|md(inlineOnly = true) }}</p>
            {% endif %}
        </div>

        {% if errors %}

            <div class="ml-3 leading-1 space-y-1.5">
                {% for error in errors %}
                    <p class="text-sm text-red-600">{{ error }}</p>
                {% endfor %}
            </div>

            <div class="flex-shrink-0 ml-3">
                {# 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>

    {{ hiddenInput(inputName, '') }}

    {% if value is not defined %}
        {% set value = element.getFieldValue(field.handle) %}
    {% endif %}
    {% if selectedIds is not defined %}
        {% set selectedIds = value ? value.ids()|join(',') : '' %}
    {% endif %}

    {{ sprig('_market/_components/assets/field', {
        _fieldId: field.id,
        _fieldHandle: field.handle,
        _fieldLimit: field.limit,
        _originalIds: selectedIds,
        _folderId: assetsFolderId,
        _inputName: inputName,
        _useGrid: useGrid
    }, {
        id: 'field-'~field.id,
        class: 'field-assets'
    }) }}
</div>