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

@if ($mode === 'dynamic')
    <div class="employer-child-actions-group">
        <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>
        <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)) }">
        <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>
        <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