@php
    $railDotClass = fn (string $anchor) => match ($completion['sections'][$anchor] ?? 'none-needed') {
        'complete' => 'profile-rail-dot--complete',
        'partial' => 'profile-rail-dot--partial',
        'empty' => 'profile-rail-dot--missing',
        default => 'profile-rail-dot--neutral',
    };
@endphp

<div class="profile-rail">
    @if (auth()->user()->isNounou())
        @if ($household->exists && ! $household->linkedParentUser)
            <div class="profile-documents-card" x-data="{ confirmSyncOpen: false }">
                <span class="profile-documents-title">Code parent</span>

                <form id="link_parent_form" method="post" action="{{ route('employers.link-parent', $household) }}" class="parent-notice-form">
                    @csrf
                    <label class="profile-field" for="parent_share_code">
                        <span>Code parent</span>
                        <input id="parent_share_code" name="parent_share_code" value="{{ old('parent_share_code') }}" maxlength="8" placeholder="Ex. GY98UN5A" class="profile-uppercase-input" required>
                        @error('parent_share_code')<small>{{ $message }}</small>@enderror
                    </label>

                    <button type="button" class="dashboard-primary-button" x-on:click="$el.closest('form').reportValidity() && (confirmSyncOpen = true)"><i class="ph-duotone ph-link" aria-hidden="true"></i>Synchroniser</button>
                </form>

                <template x-teleport="body">
                    <div class="parent-sync-modal-overlay" x-show="confirmSyncOpen" x-cloak x-on:click.self="confirmSyncOpen = false" x-on:keydown.escape.window="confirmSyncOpen = false">
                        <div class="parent-sync-modal" role="dialog" aria-modal="true" aria-labelledby="parent-sync-modal-title">
                            <h3 id="parent-sync-modal-title">Synchroniser ce parent ?</h3>
                            <p>Cette action est irréversible. Le foyer sera relié au compte parent : je ne pourrai plus modifier ses informations, et l'historique complet (enfants, contrats, planning) devient accessible depuis son espace.</p>
                            <div class="parent-sync-modal-actions">
                                <button type="button" class="employers-secondary-button" x-on:click="confirmSyncOpen = false">Annuler</button>
                                <button type="submit" form="link_parent_form" class="dashboard-primary-button">Confirmer la synchronisation</button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        @endif
    @endif

    <nav class="profile-rail-nav" aria-label="Sections du foyer">
        <a href="#sec-parent-employeur" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-parent-employeur') }}"></span>Parent employeur</a>
        <a href="#sec-coparent" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-coparent') }}"></span>Coparent</a>
        @unless ($household->linkedParentUser && auth()->user()->isNounou())
            <a href="#sec-pajemploi" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-pajemploi') }}"></span>Calcul Pajemploi</a>
        @endunless
        <a href="#sec-enfants" class="profile-rail-link"><span class="profile-rail-dot {{ $railDotClass('sec-enfants') }}"></span>Enfants</a>
        <a href="#sec-garde" class="profile-rail-link"><span class="profile-rail-dot profile-rail-dot--neutral"></span>Infos de garde</a>
        @unless (auth()->user()->isNounou())
            <a href="#sec-securite" class="profile-rail-link"><span class="profile-rail-dot profile-rail-dot--neutral"></span>Sécurité &amp; données</a>
        @endunless
    </nav>

    @unless (auth()->user()->isNounou())
        <div class="profile-documents-card">
            <span class="profile-documents-title"><i class="ph-duotone ph-eye" aria-hidden="true"></i> Qui voit quoi</span>
            <p class="parent-import-hint">Votre assistante maternelle ne voit que l'état civil, l'adresse, l'enfant et le besoin de garde. Vos revenus servent uniquement à estimer vos aides.</p>
        </div>
    @endunless
</div>