@php
    /** @var string $state Alpine expression of an object exposing `avatar` and `gender` */
    /** @var string $avatarNameAttr HTML attributes naming the avatar hidden input */
    /** @var string $genderNameAttr HTML attributes naming the gender hidden input */
    $groups = \App\Support\ChildAvatars::groups();
    $avatarsBaseUrl = asset('images/children');
@endphp

<div class="child-gender-field" x-data="{ open: false }" x-on:keydown.escape.window="open = false">
    <input type="hidden" {!! $avatarNameAttr !!} x-model="{{ $state }}.avatar">
    <input type="hidden" {!! $genderNameAttr !!} x-model="{{ $state }}.gender">

    <button type="button" class="child-gender-toggle" x-bind:class="{ 'child-gender-toggle--male': {{ $state }}.gender === 'male', 'child-gender-toggle--female': {{ $state }}.gender === 'female' }" x-on:click="open = true" aria-haspopup="dialog" title="Illustration de l’enfant">
        <img class="child-avatar-thumb" x-show="{{ $state }}.avatar" x-bind:src="{{ $state }}.avatar ? '{{ $avatarsBaseUrl }}/' + {{ $state }}.avatar + '.png' : null" alt="" x-cloak>
        <i class="ph-duotone ph-baby" aria-hidden="true" x-show="! {{ $state }}.avatar"></i>
    </button>

    <template x-teleport="body">
        <div class="child-avatar-modal" x-show="open" x-cloak role="dialog" aria-modal="true" aria-label="Choisir l’illustration de l’enfant">
            <div class="child-avatar-modal-backdrop" x-on:click="open = false"></div>
            <div class="child-avatar-modal-panel">
                <p class="child-avatar-modal-hint">Je sélectionne l’image qui ressemble le plus à {{ auth()->user()?->isParent() ? 'mon enfant' : 'l’enfant' }}.</p>

                @foreach ($groups as $group)
                    <section class="child-avatar-group">
                        <div class="child-avatar-row child-avatar-row--{{ $group['avatars'][0]['gender'] }}">
                            @foreach ($group['avatars'] as $avatar)
                                <button type="button" class="child-avatar-option" x-bind:class="{ 'child-avatar-option--selected': {{ $state }}.avatar === '{{ $avatar['key'] }}' }" x-on:click="{{ $state }}.avatar = '{{ $avatar['key'] }}'; {{ $state }}.gender = '{{ $avatar['gender'] }}'; open = false" aria-label="{{ $avatar['label'] }}" title="{{ $avatar['label'] }}">
                                    <img src="{{ $avatar['url'] }}" alt="" loading="lazy">
                                </button>
                            @endforeach
                        </div>
                    </section>
                @endforeach

                <div class="child-avatar-modal-actions">
                    <button type="button" class="employers-secondary-button" x-on:click="{{ $state }}.avatar = ''; {{ $state }}.gender = ''; open = false">
                        <i class="ph-duotone ph-question" aria-hidden="true"></i>Non renseigné
                    </button>
                    <button type="button" class="employers-secondary-button" x-on:click="open = false">
                        <i class="ph-duotone ph-x" aria-hidden="true"></i>Fermer
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>