{# Inline "add participant" form for logged-in members (anonymous applicants
   use the dedicated one-step form, {@see _anonymous.html.twig}).
   Include WITHOUT `only` (needs live props and `_errors`). #}

<div class="rounded-lg bg-gray-50 dark:bg-gray-700">
    <form class="space-y-4 px-4 py-5 sm:p-6">
        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-50">
            {{ 'applicationForm.newParticipant.title'|trans({}, 'cms') }}</h3>

        <div class="max-w-xl text-sm text-gray-500 dark:text-gray-400">
            <p>{{ 'applicationForm.newParticipant.addInfo'|trans({}, 'cms') }}</p>
        </div>

        <div class="grid grid-cols-6 gap-4">

            <div class="relative col-span-6 sm:col-span-2">
                <label for="inp-firstname"
                       class="absolute -top-2 left-2 inline-block bg-gray-50 px-1 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-100">{{ 'participants.label.firstname'|trans({}, 'cms') }}</label>
                <input type="text" required data-model="norender|newParticipant.firstname" id="inp-firstname"
                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset dark:text-gray-100 {{ _errors.has('newParticipant.firstname') ? 'ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-red-500' : 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' }} focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6">
                {% if _errors.has('newParticipant.firstname') %}
                    <p class="mt-1 text-xs leading-3 text-red-600">{{ _errors.get('newParticipant.firstname') }}</p>
                {% endif %}
            </div>

            <div class="relative col-span-6 sm:col-span-2">
                <label for="inp-lastname"
                       class="absolute -top-2 left-2 inline-block bg-gray-50 px-1 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-100">{{ 'participants.label.lastname'|trans({}, 'cms') }}</label>
                <input type="text" required data-model="norender|newParticipant.lastname" id="inp-lastname"
                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset dark:text-gray-100 {{ _errors.has('newParticipant.lastname') ? 'ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-red-500' : 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' }} focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6">
                {% if _errors.has('newParticipant.lastname') %}
                    <p class="mt-1 text-xs leading-3 text-red-600">{{ _errors.get('newParticipant.lastname') }}</p>
                {% endif %}
            </div>

            <div class="relative col-span-6 sm:col-span-2">
                <label for="inp-dob"
                       class="absolute -top-2 left-2 inline-block bg-gray-50 px-1 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-100">{{ 'participants.label.dateOfBirth'|trans({}, 'cms') }}</label>
                <input type="date" required data-model="norender|newParticipantDateOfBirth"
                       id="inp-dob"
                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset dark:text-gray-100 {{ _errors.has('newParticipant.dateOfBirth') ? 'ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-red-500' : 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' }} focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6">
                {% if _errors.has('newParticipant.dateOfBirth') %}
                    <p class="mt-1 text-xs leading-3 text-red-600">{{ _errors.get('newParticipant.dateOfBirth') }}</p>
                {% endif %}
            </div>

            {% if accessCode is not null %}
                <div class="relative col-span-6 sm:col-span-3">
                    <label for="inp-acco"
                           class="absolute -top-2 left-2 inline-block bg-gray-50 px-1 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-100">{{ 'registration.accessCode'|trans({}, 'cms') }}</label>
                    <input type="text" required data-model="norender|accessCode.code" id="inp-acco"
                           class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset dark:text-gray-100 {{ _errors.has('accessCode') ? 'ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-red-500' : 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' }} focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6">
                    {% if _errors.has('accessCode') %}
                        <p class="mt-1 text-xs leading-3 text-red-600">{{ _errors.get('accessCode') }}</p>
                    {% endif %}
                </div>
            {% endif %}

        </div>

        <div>
            <twig:Cms:Button variant="primary"
                             type="submit"
                             data-action="live#action:prevent"
                             data-live-action-param="saveParticipant">
                {{ 'applicationForm.newParticipant.submit'|trans({}, 'cms') }}
            </twig:Cms:Button>
        </div>

    </form>
</div>
