@php
    $mode ??= 'static';
    $idPrefix ??= '';
    $firstName ??= '';
    $lastName ??= '';
    $birthDate ??= '';
    $gender ??= null;
    $avatar ??= null;
    $foodAllergies ??= '';
    $doctorName ??= '';
    $doctorPhone ??= '';
    $medicalNotes ??= '';
    $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>

    <details class="child-health">
        <summary><i class="ph-duotone ph-first-aid-kit" aria-hidden="true"></i>Santé et allergies</summary>
        <div class="child-health-fields">
            <label class="profile-field child-health-wide">
                <span class="child-health-label">Allergies alimentaires</span>
                <textarea :name="{{ $nameExpr }} + '[food_allergies]'" x-model="{{ $xModel }}.foodAllergies" rows="2" maxlength="1000" placeholder="Ex. arachides, œuf, lait…"></textarea>
            </label>
            <label class="profile-field">
                <span class="child-health-label">Médecin traitant</span>
                <input :name="{{ $nameExpr }} + '[doctor_name]'" x-model="{{ $xModel }}.doctorName" maxlength="255" placeholder="Nom du médecin">
            </label>
            <label class="profile-field">
                <span class="child-health-label">Téléphone du médecin</span>
                <input :name="{{ $nameExpr }} + '[doctor_phone]'" x-model="{{ $xModel }}.doctorPhone" type="tel" maxlength="30" placeholder="Téléphone">
            </label>
            <label class="profile-field child-health-wide">
                <span class="child-health-label">Autres informations de santé</span>
                <textarea :name="{{ $nameExpr }} + '[medical_notes]'" x-model="{{ $xModel }}.medicalNotes" rows="3" maxlength="2000" placeholder="Traitement, précautions, régime particulier…"></textarea>
            </label>
        </div>
    </details>
@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>

    <details class="child-health" @if (filled(old('food_allergies', $foodAllergies).old('doctor_name', $doctorName).old('doctor_phone', $doctorPhone).old('medical_notes', $medicalNotes)) || $errors->hasAny(['food_allergies', 'doctor_name', 'doctor_phone', 'medical_notes'])) open @endif>
        <summary><i class="ph-duotone ph-first-aid-kit" aria-hidden="true"></i>Santé et allergies</summary>
        <div class="child-health-fields">
            <label class="profile-field child-health-wide" for="{{ $idPrefix }}food_allergies">
                <span class="child-health-label">Allergies alimentaires</span>
                <textarea id="{{ $idPrefix }}food_allergies" name="food_allergies" rows="2" maxlength="1000" placeholder="Ex. arachides, œuf, lait…">{{ old('food_allergies', $foodAllergies) }}</textarea>
                @error('food_allergies')<small>{{ $message }}</small>@enderror
            </label>
            <label class="profile-field" for="{{ $idPrefix }}doctor_name">
                <span class="child-health-label">Médecin traitant</span>
                <input id="{{ $idPrefix }}doctor_name" name="doctor_name" value="{{ old('doctor_name', $doctorName) }}" maxlength="255" placeholder="Nom du médecin">
                @error('doctor_name')<small>{{ $message }}</small>@enderror
            </label>
            <label class="profile-field" for="{{ $idPrefix }}doctor_phone">
                <span class="child-health-label">Téléphone du médecin</span>
                <input id="{{ $idPrefix }}doctor_phone" name="doctor_phone" type="tel" value="{{ old('doctor_phone', $doctorPhone) }}" maxlength="30" placeholder="Téléphone">
                @error('doctor_phone')<small>{{ $message }}</small>@enderror
            </label>
            <label class="profile-field child-health-wide" for="{{ $idPrefix }}medical_notes">
                <span class="child-health-label">Autres informations de santé</span>
                <textarea id="{{ $idPrefix }}medical_notes" name="medical_notes" rows="3" maxlength="2000" placeholder="Traitement, précautions, régime particulier…">{{ old('medical_notes', $medicalNotes) }}</textarea>
                @error('medical_notes')<small>{{ $message }}</small>@enderror
            </label>
        </div>
    </details>
@endif