{{-- Shared "child" fields (prénom / nom / date de naissance / AEEH) used by both the
     employer creation wizard (Alpine repeater, $mode = 'dynamic') and the employer
     detail page (per-child inline edit and "add a child" rows, $mode = 'static'),
     so the fields only need to be defined once. --}}
@php
    $mode ??= 'static';
    $idPrefix ??= '';
    $firstName ??= '';
    $lastName ??= '';
    $birthDate ??= '';
    $gender ??= null;
    $hasAeeh ??= false;
    $showAeeh ??= true;
    $onlyAeeh ??= false;
    $nameRequired ??= true;
    $requiredMark = $nameRequired ? '<span class="profile-required">*</span>' : '';
@endphp

@if ($mode === 'dynamic')
    <div class="child-gender-field" x-data="{ open: false }" x-on:click.outside="open = false">
        <input type="hidden" :name="{{ $nameExpr }} + '[gender]'" x-model="{{ $xModel }}.gender">
        <button type="button" class="child-gender-toggle" x-bind:class="'child-gender-toggle--' + ({{ $xModel }}.gender || 'unknown')" x-on:click="open = ! open" :aria-expanded="open.toString()" aria-haspopup="menu" title="Sexe de l’enfant">
            <i class="ph-duotone ph-baby" aria-hidden="true"></i>
        </button>
        <div class="employer-action-dropdown" x-show="open" x-cloak role="menu">
            <button type="button" role="menuitem" x-on:click="{{ $xModel }}.gender = ''; open = false"><i class="ph-duotone ph-question" aria-hidden="true"></i>Non renseigné</button>
            <button type="button" role="menuitem" x-on:click="{{ $xModel }}.gender = 'male'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Garçon</button>
            <button type="button" role="menuitem" x-on:click="{{ $xModel }}.gender = 'female'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Fille</button>
        </div>
    </div>
    <label class="profile-field">
        <span>Prénom{!! $requiredMark !!}</span>
        <input :id="{{ $idExpr }} + '_first_name'" :name="{{ $nameExpr }} + '[first_name]'" x-model="{{ $xModel }}.firstName" @required($nameRequired)>
    </label>
    <label class="profile-field">
        <span>Nom{!! $requiredMark !!}</span>
        <input :id="{{ $idExpr }} + '_last_name'" :name="{{ $nameExpr }} + '[last_name]'" x-model="{{ $xModel }}.lastName" class="profile-uppercase-input parent-child-last-name" x-on:input="typeof syncChildLastName === 'function' && syncChildLastName($event.target.value)" @required($nameRequired)>
    </label>
    <label class="profile-field">
        <span>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>
    <label class="contract-day-toggle" :for="{{ $idExpr }} + '_has_aeeh'" title="Éligible à l'AEEH (Allocation d'Éducation de l'Enfant Handicapé)">
        <input type="checkbox" :id="{{ $idExpr }} + '_has_aeeh'" :name="{{ $nameExpr }} + '[has_aeeh]'" value="1" x-model="{{ $xModel }}.hasAeeh">
        <span>Éligible AEEH ?</span>
    </label>
@else
    @if ($showAeeh && ! $onlyAeeh)
        <div class="child-gender-field" x-data="{ open: false, gender: @js(old('gender', $gender ?? '')) }" x-on:click.outside="open = false">
            <input type="hidden" name="gender" x-model="gender">
            <button type="button" class="child-gender-toggle" x-bind:class="'child-gender-toggle--' + (gender || 'unknown')" x-on:click="open = ! open" :aria-expanded="open.toString()" aria-haspopup="menu" title="Sexe de l’enfant">
                <i class="ph-duotone ph-baby" aria-hidden="true"></i>
            </button>
            <div class="employer-action-dropdown" x-show="open" x-cloak role="menu">
                <button type="button" role="menuitem" x-on:click="gender = ''; open = false"><i class="ph-duotone ph-question" aria-hidden="true"></i>Non renseigné</button>
                <button type="button" role="menuitem" x-on:click="gender = 'male'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Garçon</button>
                <button type="button" role="menuitem" x-on:click="gender = 'female'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Fille</button>
            </div>
        </div>
    @endif
    @unless ($onlyAeeh)
        <label class="profile-field" for="{{ $idPrefix }}first_name">
            <span>Prénom{!! $requiredMark !!}</span>
            <input id="{{ $idPrefix }}first_name" name="first_name" value="{{ old('first_name', $firstName) }}" placeholder=" " @required($nameRequired)>
            @error('first_name')<small>{{ $message }}</small>@enderror
        </label>
        <label class="profile-field" for="{{ $idPrefix }}last_name">
            <span>Nom{!! $requiredMark !!}</span>
            <input id="{{ $idPrefix }}last_name" name="last_name" class="profile-uppercase-input parent-child-last-name" x-on:input="typeof syncChildLastName === 'function' && syncChildLastName($event.target.value)" value="{{ old('last_name', $lastName) }}" placeholder=" " @required($nameRequired)>
            @error('last_name')<small>{{ $message }}</small>@enderror
        </label>
        <label class="profile-field" for="{{ $idPrefix }}birth_date">
            <span>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>
    @endunless
    @if ($showAeeh && $onlyAeeh)
        <div class="child-gender-field" x-data="{ open: false, gender: @js(old('gender', $gender ?? '')) }" x-on:click.outside="open = false">
            <input type="hidden" name="gender" x-model="gender">
            <button type="button" class="child-gender-toggle" x-bind:class="'child-gender-toggle--' + (gender || 'unknown')" x-on:click="open = ! open" :aria-expanded="open.toString()" aria-haspopup="menu" title="Sexe de l’enfant">
                <i class="ph-duotone ph-baby" aria-hidden="true"></i>
            </button>
            <div class="employer-action-dropdown" x-show="open" x-cloak role="menu">
                <button type="button" role="menuitem" x-on:click="gender = ''; open = false"><i class="ph-duotone ph-question" aria-hidden="true"></i>Non renseigné</button>
                <button type="button" role="menuitem" x-on:click="gender = 'male'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Garçon</button>
                <button type="button" role="menuitem" x-on:click="gender = 'female'; open = false"><i class="ph-duotone ph-baby" aria-hidden="true"></i>Fille</button>
            </div>
        </div>
    @endif
    @if ($showAeeh)
        <label class="contract-day-toggle" for="{{ $idPrefix }}has_aeeh" title="Éligible à l'AEEH (Allocation d'Éducation de l'Enfant Handicapé)">
            <input type="checkbox" id="{{ $idPrefix }}has_aeeh" name="has_aeeh" value="1" @checked(old('has_aeeh', $hasAeeh))>
            <span>Éligible AEEH ?</span>
        </label>
    @endif
@endif