@php
    $mode ??= 'static';
    $idPrefix ??= '';
    $firstName ??= '';
    $lastName ??= '';
    $birthDate ??= '';
    $gender ??= null;
    $avatar ??= null;
    $hasAeeh ??= false;
    $nameRequired ??= true;
    $requiredMark = $nameRequired ? '<span class="profile-required">*</span>' : '';
@endphp

@if ($mode === 'dynamic')
    <div class="employer-child-actions-group">
        @include('employers.partials.child-avatar-picker', [
            'state' => $xModel,
            'avatarNameAttr' => ':name="'.$nameExpr." + '[avatar]'\"",
            'genderNameAttr' => ':name="'.$nameExpr." + '[gender]'\"",
        ])
        <div class="child-aeeh-field">
            <x-toggle-switch class="child-aeeh-toggle" x-bind:name="{{ $nameExpr }} + '[has_aeeh]'" value="1" x-model="{{ $xModel }}.hasAeeh" aria-label="Éligible AEEH ?">
                <span class="child-row-field-label">Bénéficiaire de l'AEEH</span>
            </x-toggle-switch>
        </div>
    </div>

    <label class="profile-field">
        <span class="child-row-field-label">Prénom{!! $requiredMark !!}</span>
        <input :id="{{ $idExpr }} + '_first_name'" :name="{{ $nameExpr }} + '[first_name]'" x-model="{{ $xModel }}.firstName" placeholder="Prénom" @required($nameRequired)>
    </label>

    <label class="profile-field child-lastname-field" x-bind:class="{ 'child-lastname-field--linked': sameLastNameForChildren }">
        <span class="child-row-field-label">Nom{!! $requiredMark !!}</span>
        <div class="child-lastname-input-wrap">
            <i class="ph-duotone ph-link-simple" aria-hidden="true"></i>
            <input :id="{{ $idExpr }} + '_last_name'" :name="{{ $nameExpr }} + '[last_name]'" x-model="{{ $xModel }}.lastName" class="profile-uppercase-input parent-child-last-name" x-bind:readonly="sameLastNameForChildren" x-on:input="typeof syncChildLastName === 'function' && syncChildLastName($event.target.value)" placeholder="Nom" @required($nameRequired)>
        </div>
    </label>

    <label class="profile-field child-dob-field">
        <span class="child-row-field-label">Date de naissance<span class="profile-required">*</span></span>
        <input :id="{{ $idExpr }} + '_birth_date'" :name="{{ $nameExpr }} + '[birth_date]'" x-model="{{ $xModel }}.birthDate" type="date" required>
    </label>
@else
    <div class="employer-child-actions-group" x-data="{ aeeh: @js((bool) old('has_aeeh', $hasAeeh)), child: { avatar: @js(old('avatar', $avatar ?? '')), gender: @js(old('gender', $gender ?? '')) } }">
        @include('employers.partials.child-avatar-picker', [
            'state' => 'child',
            'avatarNameAttr' => 'name="avatar"',
            'genderNameAttr' => 'name="gender"',
        ])
        <div class="child-aeeh-field">
            <x-toggle-switch class="child-aeeh-toggle" id="{{ $idPrefix }}has_aeeh" name="has_aeeh" value="1" x-model="aeeh" aria-label="Éligible AEEH ?">
                <span class="child-row-field-label">Bénéficiaire de l'AEEH</span>
            </x-toggle-switch>
        </div>
    </div>

    <label class="profile-field" for="{{ $idPrefix }}first_name">
        <span class="child-row-field-label">Prénom{!! $requiredMark !!}</span>
        <input id="{{ $idPrefix }}first_name" name="first_name" value="{{ old('first_name', $firstName) }}" placeholder="Prénom" @required($nameRequired)>
        @error('first_name')<small>{{ $message }}</small>@enderror
    </label>

    <label class="profile-field child-lastname-field" for="{{ $idPrefix }}last_name" x-bind:class="{ 'child-lastname-field--linked': sameLastNameForChildren }">
        <span class="child-row-field-label">Nom{!! $requiredMark !!}</span>
        <div class="child-lastname-input-wrap">
            <i class="ph-duotone ph-link-simple" aria-hidden="true"></i>
            <input id="{{ $idPrefix }}last_name" name="last_name" class="profile-uppercase-input parent-child-last-name" x-bind:readonly="sameLastNameForChildren" x-on:input="typeof syncChildLastName === 'function' && syncChildLastName($event.target.value)" value="{{ old('last_name', $lastName) }}" placeholder="Nom" @required($nameRequired)>
        </div>
        @error('last_name')<small>{{ $message }}</small>@enderror
    </label>

    <label class="profile-field child-dob-field" for="{{ $idPrefix }}birth_date">
        <span class="child-row-field-label">Date de naissance<span class="profile-required">*</span></span>
        <input id="{{ $idPrefix }}birth_date" name="birth_date" type="date" value="{{ old('birth_date', $birthDate) }}" required>
        @error('birth_date')<small>{{ $message }}</small>@enderror
    </label>
@endif