@php


    $isLockedForViewer = $household->linkedParentUser && auth()->user()->isNounou();
@endphp

<header class="profile-hero-card">
    <div class="profile-hero-identity">
        <div class="profile-hero-name-column">
            <div class="profile-hero-name-row">
                <span class="profile-hero-name profile-hero-name--editable">
                    Famille
                    <input type="text" id="family_name" name="family_name" class="employer-family-name-input" value="{{ old('family_name', $household->family_name) }}" placeholder="{{ $household->family_label }}" aria-label="Nom de la famille" form="{{ $formId }}" autocomplete="off" @disabled($isLockedForViewer)>
                </span>
            </div>
            @if (auth()->user()->isNounou())
                @if ($household->linkedParentUser)
                    <div class="profile-hero-meta-row">
                        <span class="profile-hero-share-code profile-hero-share-code--linked">
                            <i class="ph-duotone ph-link" aria-hidden="true"></i>
                            <span>Compte lié (<strong>{{ $household->share_code }}</strong>)</span>
                        </span>
                    </div>
                @endif
            @else
                <div class="profile-hero-meta-row">
                    <button type="button" class="profile-hero-share-code" x-on:click="copyShareCode('{{ $household->share_code }}')" title="Copier le code de partage">
                        <i class="ph-duotone" :class="shareCodeCopied ? 'ph-check' : 'ph-copy'" aria-hidden="true"></i>
                        <span>Code de partage : <strong>{{ $household->share_code }}</strong></span>
                    </button>
                </div>
            @endif
        </div>
    </div>

    @unless ($isLockedForViewer)
        <span class="profile-hero-divider"></span>

        <div class="profile-hero-completion">
            <div class="profile-hero-completion-head">
                <span>Profil complété</span>
                <span>{{ $completion['completed'] }} / {{ $completion['total'] }} infos</span>
            </div>
            <div class="profile-hero-completion-bar-row">
                <span class="profile-hero-completion-value">{{ $completion['percentage'] }} %</span>
                <span class="contract-completion-bar"><span class="profile-completion-bar-fill" style="width: {{ $completion['percentage'] }}%"></span></span>
            </div>
            @if ($completion['is_complete'])
                <p class="profile-hero-reassurance">Ce profil contient toutes les informations obligatoires.</p>
            @endif
        </div>
    @endunless
</header>