@php
    $isTemplateMode = $isTemplateMode ?? false;
    $isParentView = $isParentView ?? false;
    $canEditContractFrame = $canEditContractFrame ?? ! $readonly;
    $canEditCareLocation = $canEditCareLocation ?? $canEditContractFrame;
    $canEditCompensation = $canEditCompensation ?? ! $readonly;
    $canEditRest = $canEditRest ?? ! $readonly;
    $canEditSchedule = $canEditSchedule ?? ! $readonly;
    $canEditScheduleNotice = $canEditScheduleNotice ?? ! $readonly;
    $canEditWeeks = $canEditWeeks ?? ! $readonly;
    $hideContractFrameForLinkedParentFlow = $hideContractFrameForLinkedParentFlow ?? true;
    $scheduleSectionTitle = $isTemplateMode ? 'Amplitude horaire acceptée' : 'Planning de garde';
@endphp

<div class="contract-layout">
    <div class="contract-main">

@if ($isTemplateMode)
    <section class="employer-step-card contract-child-card">
        <div class="employer-section-header">
            <span>
                <strong>Titre du modèle</strong>
            </span>
        </div>
        <div class="employer-accordion-body">
            <label class="profile-field profile-field-wide" for="template_title">
                <span>Nom du modèle<span class="profile-required">*</span></span>
                <input id="template_title" name="template_title" value="{{ old('template_title', $record?->title) }}" placeholder=" " required @disabled($readonly)>
            </label>
        </div>
    </section>
@else
    <section class="employer-step-card contract-child-card" x-data="contractChildAutocomplete({ children: @js($childOptions), selectedId: @js(old('child_record_id', $selectedChild?->id)) })">
        <div class="employer-section-header">
            <span>
                <strong>Enfant et parent employeur</strong>
            </span>
        </div>
        <div class="employer-accordion-body">
            <div class="contract-child-autocomplete" x-show="editing" x-cloak>
                <input type="hidden" id="child_record_id" name="child_record_id" x-bind:value="selected?.id || ''">
                <label class="profile-field profile-field-wide" for="child_record_search">
                    <span>Rechercher un enfant<span class="profile-required">*</span></span>
                    <input
                        id="child_record_search"
                        type="search"
                        x-ref="searchInput"
                        x-model="query"
                        x-on:focus="openList()"
                        x-on:input="openList()"
                        x-on:keydown.escape="open = false"
                        x-on:keydown.down.prevent="moveHighlight(1)"
                        x-on:keydown.up.prevent="moveHighlight(-1)"
                        x-on:keydown.enter.prevent="selectHighlighted()"
                        placeholder=" "
                        autocomplete="off"
                        required
                    >
                </label>
                <template x-teleport="body">
                    <div class="profile-address-suggestions contract-child-suggestions" x-show="open && filteredChildren().length > 0" x-on:click.outside="if (!$refs.searchInput.contains($event.target)) open = false" x-on:wheel.prevent.stop="scrollSuggestions($event)" x-on:touchstart.stop="rememberSuggestionTouch($event)" x-on:touchmove.prevent.stop="scrollSuggestionsTouch($event)" x-bind:style="dropdownStyle" x-cloak>
                        @if ($isParentView)
                            <template x-for="child in filteredChildren()" :key="child.id">
                                <button type="button" x-on:click="select(child)" x-on:mouseenter="highlightedIndex = childOptionIndex(child)" :class="{ 'is-highlighted': highlightedIndex === childOptionIndex(child) }">
                                    <strong x-text="child.childFirstName"></strong>
                                </button>
                            </template>
                        @else
                            <template x-for="group in groupedChildren()" :key="group.key">
                                <div class="contract-child-suggestion-group">
                                    <span class="contract-child-suggestion-heading" x-text="`Famille ${group.familyLabel} (${group.parentName})`"></span>
                                    <template x-for="child in group.children" :key="child.id">
                                        <button type="button" x-on:click="select(child)" x-on:mouseenter="highlightedIndex = childOptionIndex(child)" :class="{ 'is-highlighted': highlightedIndex === childOptionIndex(child) }">
                                            <strong x-text="child.childFirstName"></strong>
                                        </button>
                                    </template>
                                </div>
                            </template>
                        @endif
                    </div>
                </template>
            </div>

            <article class="contract-selected-child" x-show="selected && !editing" x-cloak>
                <div class="contract-selected-child-card">
                    <span class="contract-selected-child-title">
                        <span>Enfant</span>
                        @unless ($readonly || $lockChild)
                            <button type="button" class="contract-link-button contract-selected-child-action" x-on:click="startEditing()" x-show="selected && !editing" x-cloak>
                                <i class="ph-duotone ph-arrows-clockwise" aria-hidden="true"></i>Select. un autre enfant
                            </button>
                        @endunless
                    </span>
                    <strong x-text="selected?.childName"></strong>
                    <small x-text="selected?.birthDate ? `Né(e) le ${selected.birthDate}` : 'Date de naissance non renseignée'"></small>
                </div>
                @if ($isParentView ?? false)
                    <div class="contract-selected-child-card contract-selected-assistant-card">
                        <span class="contract-selected-assistant-avatar">
                            <img x-show="selected?.assistantAvatarUrl" x-bind:src="selected?.assistantAvatarUrl" x-bind:alt="'Photo de ' + selected?.assistantName" x-cloak>
                            <span x-show="! selected?.assistantAvatarUrl" x-text="selected?.assistantInitials"></span>
                        </span>
                        <span class="contract-selected-assistant-copy">
                            <span class="contract-selected-child-title">
                                <span>Assistante maternelle</span>
                            </span>
                            <strong x-text="selected?.assistantName"></strong>
                            <small x-text="selected?.assistantEmail || 'Adresse e-mail non renseignée'"></small>
                        </span>
                    </div>
                @else
                    <a x-bind:href="selected?.parentUrl" target="_blank" rel="noopener" class="contract-selected-child-card contract-selected-child-card--link">
                        <span class="contract-selected-child-title">
                            <span>Parent employeur</span>
                            <i class="ph-duotone ph-arrow-square-out" aria-hidden="true"></i>
                        </span>
                        <strong x-text="selected?.parentName"></strong>
                        <small x-text="selected?.pajemploiNumber ? `Pajemploi ${selected.pajemploiNumber}` : 'Numéro Pajemploi non renseigné'"></small>
                    </a>
                @endif
                <div class="contract-selected-child-card">
                    <span class="contract-selected-child-title">Coordonnées</span>
                    @if ($isParentView ?? false)
                        <strong x-text="selected?.assistantPhone || selected?.assistantEmail || 'Non renseigné'"></strong>
                        <small x-text="selected?.assistantAddress"></small>
                    @else
                        <strong x-text="selected?.parentPhone || selected?.parentEmail || 'Non renseigné'"></strong>
                        <small x-text="selected?.address"></small>
                    @endif
                </div>
            </article>
            @if ($selectedChild)
                <p class="sr-only">{{ $selectedChild->display_name }} · {{ ($isParentView ?? false) ? ($selectedChild->employer->user?->name ?? 'Assistante maternelle') : $selectedChild->employer->display_name }}</p>
            @endif
            @error('child_record_id')<small>{{ $message }}</small>@enderror
        </div>
    </section>
@endif

<section class="employer-step-card contract-left-card">
    @if ($isParentView)
        <p class="profile-notice-callout" x-show="contractType === 'cdd'" x-cloak><span>Je privilégie le CDI pour l’accueil habituel de mon enfant, même si son entrée à l’école est déjà prévue. Je ne recours au CDD que pour un motif autorisé, par exemple le remplacement d’une assistante maternelle absente. Je prévois en principe une indemnité de précarité à la fin du CDD, égale à 10 % de la rémunération brute totale, sauf exception légale. <a href="https://www.service-public.gouv.fr/particuliers/vosdroits/F16841" target="_blank" rel="noopener noreferrer">Je consulte les règles du contrat</a>.</span></p>
    @endif
    <div class="employer-section-header">
        <span class="contract-header-inline">
            <strong>Cadre du contrat</strong>
        </span>
    </div>
    <div class="employer-accordion-body">
        <div class="contract-field-grid-4">
            <label class="profile-field" for="contract_type">
                <span>Type de contrat<span class="profile-required">*</span></span>
                <select id="contract_type" name="contract_type" x-model="contractType" required @disabled(! $canEditContractFrame)>
                    <option value="cdi">CDI</option>
                    <option value="cdd">CDD</option>
                </select>
            </label>
            <label class="profile-field" for="care_type">
                <span>Type d’accueil<span class="profile-required">*</span></span>
                <select id="care_type" name="care_type" x-model="careType" required @disabled(! $canEditContractFrame)>
                    <template x-for="option in careTypeOptions()" :key="option.value">
                        <option x-bind:value="option.value" x-text="option.label"></option>
                    </template>
                </select>
            </label>
            <label class="profile-field" for="paid_leave_payment_method" x-show="requiresPaidLeavePaymentMethod()" x-cloak>
                <span>Versement des congés payés<span class="profile-required">*</span></span>
                <select id="paid_leave_payment_method" name="paid_leave_payment_method" x-bind:required="requiresPaidLeavePaymentMethod()" @disabled(! $canEditContractFrame)>
                    <option value="" disabled @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === null)>—</option>
                    <option value="june" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'june')>En une seule fois au mois de juin</option>
                    <option value="main_leave" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'main_leave')>En une seule fois lors de la prise principale des congés payés</option>
                    <option value="pro_rata" @selected(old('paid_leave_payment_method', $record?->paid_leave_payment_method) === 'pro_rata')>Au fur et à mesure de la prise des congés payés, au prorata du nombre de jours ouvrables de congés pris</option>
                </select>
            </label>
            <label class="profile-field profile-field-with-suffix" for="estimated_annual_days" x-show="careType === 'occasional'" x-cloak>
                <span>Jours de garde estimés par an<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="estimated_annual_days" name="estimated_annual_days" type="number" value="{{ old('estimated_annual_days', $record?->estimated_annual_days) }}" x-model.number="estimatedAnnualDays" x-bind:min="careType === 'occasional' ? 1 : null" x-bind:max="careType === 'occasional' ? 366 : null" x-bind:required="careType === 'occasional'" @disabled(! $canEditContractFrame)>
                    <span class="profile-unit-suffix" aria-hidden="true">j/an</span>
                </div>
                @error('estimated_annual_days')<small>{{ $message }}</small>@enderror
            </label>
            <label class="profile-field" for="care_location">
                <span>Lieu d’accueil<span class="profile-required">*</span></span>
                <select id="care_location" name="care_location" x-model="careLocation" required @disabled(! $canEditCareLocation)>
                    <option value="home">{{ $isParentView ? "Domicile de l’assistant(e) maternel(le)" : "Mon domicile" }}</option>
                    <option value="mam">Maison d’assistants maternels (MAM)</option>
                </select>
            </label>
            <input type="hidden" name="planned_weeks_per_year" x-bind:value="activeWeeks()">
        </div>
        <div class="contract-field-grid-4">
            <label class="profile-field profile-field-unit-group" for="trial_period_duration">
                <span>Période d’essai<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="trial_period_duration" name="trial_period_duration" type="number" min="0" max="31" value="{{ old('trial_period_duration', $record?->trial_period_duration ?? 1) }}" required @disabled(! $canEditContractFrame)>
                    <select id="trial_period_unit" name="trial_period_unit" x-model="trialPeriodUnit" required aria-label="Unité de la période d’essai" @disabled(! $canEditContractFrame)>
                        <option value="day">jours</option>
                        <option value="week">semaines</option>
                        <option value="month">mois</option>
                    </select>
                </div>
            </label>
            @unless ($isTemplateMode)
                <template x-if="{{ $hideContractFrameForLinkedParentFlow ? '!usesLinkedParentFlow()' : 'true' }}">
                    <div class="display-contents">
                        <label class="profile-field" for="started_on"><span>Début du contrat<span class="profile-required">*</span></span><input id="started_on" name="started_on" type="date" x-model="startedOn" required @disabled(! $canEditContractFrame)></label>

                        <label class="profile-field" for="ends_on" x-show="contractType === 'cdd' && !cddOpenEnded" x-cloak>
                            <span>Date de fin prévue<span class="profile-required">*</span></span>
                            <input id="ends_on" name="ends_on" type="date" value="{{ old('ends_on', $record?->ends_on?->format('Y-m-d')) }}" x-bind:required="contractType === 'cdd' && !cddOpenEnded" @disabled(! $canEditContractFrame)>
                        </label>
                        <label class="profile-field profile-field-unit-group" for="minimum_duration_value" x-show="contractType === 'cdd' && cddOpenEnded" x-cloak>
                            <span>Durée minimale du contrat<span class="profile-required">*</span></span>
                            <div class="profile-unit-group">
                                <input id="minimum_duration_value" type="number" min="1" max="60" x-model.number="minimumDurationValue" x-bind:required="cddOpenEnded" @disabled(! $canEditContractFrame)>
                                <select id="minimum_duration_unit" x-model="minimumDurationUnit" aria-label="Unité de la durée minimale" x-bind:required="cddOpenEnded" @disabled(! $canEditContractFrame)>
                                    <option value="day">jours</option>
                                    <option value="week">semaines</option>
                                    <option value="month">mois</option>
                                </select>
                            </div>
                            <input type="hidden" name="minimum_duration" x-bind:value="minimumDurationLabel()">
                        </label>
                        <label class="contract-day-toggle" for="cdd_open_ended" x-show="contractType === 'cdd' && cddReason === 'replacement'" x-cloak>
                            <input type="checkbox" id="cdd_open_ended" name="cdd_open_ended" value="1" x-model="cddOpenEnded" @disabled(! $canEditContractFrame)>
                            <span>Date de fin non connue</span>
                        </label>
                        <label class="profile-field" for="adaptation_period_started_on">
                            <span>Début adaptation</span>
                            <input id="adaptation_period_started_on" name="adaptation_period_started_on" type="date" value="{{ old('adaptation_period_started_on', $record?->adaptation_period_started_on?->format('Y-m-d')) }}" @disabled(! $canEditContractFrame)>
                        </label>
                        <label class="profile-field" for="adaptation_period_ended_on">
                            <span>Fin adaptation</span>
                            <input id="adaptation_period_ended_on" name="adaptation_period_ended_on" type="date" value="{{ old('adaptation_period_ended_on', $record?->adaptation_period_ended_on?->format('Y-m-d')) }}" @disabled(! $canEditContractFrame)>
                            @error('adaptation_period_ended_on')<small>{{ $message }}</small>@enderror
                        </label>
                    </div>
                </template>
            @endunless

            <label class="profile-field" for="cdd_reason" x-show="contractType === 'cdd'">
                <span>Motif du CDD<span class="profile-required">*</span></span>
                <select id="cdd_reason" name="cdd_reason" x-model="cddReason" @disabled(! $canEditContractFrame)>
                    <option value="replacement">Remplacement</option>
                    <option value="temporary_increase">Accroissement temporaire d’activité</option>
                    <option value="other">Autre motif</option>
                </select>
            </label>
            <label class="profile-field" for="cdd_reason_details" x-show="contractType === 'cdd'" x-cloak>
                <span>Détail du motif<span class="profile-required">*</span></span>
                <input id="cdd_reason_details" name="cdd_reason_details" value="{{ old('cdd_reason_details', $record?->cdd_reason_details) }}" placeholder=" " x-bind:required="contractType === 'cdd'" @disabled(! $canEditContractFrame)>
            </label>
        </div>
        <div class="contract-field-grid-4">
            <label class="profile-field" for="meal_provider">
                <span>Déjeuner fourni par<span class="profile-required">*</span></span>
                <select id="meal_provider" name="meal_provider" x-model="mealProvider" required @disabled(! $canEditContractFrame)>
                    <option value="assistant">Assitant(e) maternel(le)</option>
                    <option value="parents">Les parents</option>
                </select>
            </label>
            <label class="profile-field" for="snack_provider">
                <span>Goûter fourni par<span class="profile-required">*</span></span>
                <select id="snack_provider" name="snack_provider" x-model="snackProvider" required @disabled(! $canEditContractFrame)>
                    <option value="assistant">Assitant(e) maternel(le)</option>
                    <option value="parents">Les parents</option>
                </select>
            </label>
        </div>
    </div>
</section>

<section class="employer-step-card employer-step-card--overflow-visible contract-left-card">
    <div class="employer-section-header">
        <span>
            <strong>Rémunération et indemnisation</strong>
        </span>
    </div>
    <div class="employer-accordion-body">
        @if ($isParentView)
            <p class="profile-notice-callout"><span>Je retrouve ici les tarifs par défaut de mon assistante maternelle. Si nous avons convenu d’autres tarifs, je lui demande de les modifier pour que mon contrat reflète notre accord.</span></p>
        @endif
        <div class="contract-field-grid-4">
            <label class="profile-field profile-field-unit-group" for="hourly_rate_net">
                <span class="profile-label-with-info">
                    <span>Taux horaire net<span class="profile-required">*</span></span>
                    <x-legal-min-info id="hourly_rate_net" text="Minimum légal : {{ number_format((float) $legalMinimums['hourly_rate_net'], 2, ',', ' ') }} €/h" />
                </span>
                <div class="profile-unit-group">
                    <input id="hourly_rate_net" name="hourly_rate_net" type="number" step="0.01" min="{{ $legalMinimums['hourly_rate_net'] }}" x-model="hourlyRate" x-on:blur="formatMoney('hourlyRate')" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">€/h</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group disabled-field" for="hourly_rate_gross">
                <span>Taux horaire brut</span>
                <div class="profile-unit-group">
                    <input id="hourly_rate_gross" type="number" step="0.01" x-bind:value="grossHourlyRate()" disabled>
                    <span class="profile-unit-suffix" aria-hidden="true">€/h</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="complementary_hours_majoration_rate">
                <span class="profile-label-with-info">
                    <span>Majoration h. complémentaires<span class="profile-required">*</span></span>
                    <x-legal-min-info id="complementary_hours_majoration_rate" text="Les heures complémentaires sont les heures effectuées au-delà de l’horaire habituel prévu au contrat, dans la limite du plafond légal hebdomadaire. Minimum légal : {{ $legalMinimums['majoration_rate'] }} %" />
                </span>
                <div class="profile-unit-group">
                    <input id="complementary_hours_majoration_rate" name="complementary_hours_majoration_rate" type="number" min="{{ $legalMinimums['majoration_rate'] }}" max="100" value="{{ old('complementary_hours_majoration_rate', $record?->complementary_hours_majoration_rate ?? $contractDefaults['complementary_hours_majoration_rate']) }}" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">%</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="overtime_majoration_rate">
                <span class="profile-label-with-info">
                    <span>Majoration h. majorées<span class="profile-required">*</span></span>
                    <x-legal-min-info id="overtime_majoration_rate" text="Les heures majorées sont les heures effectuées au-delà du plafond légal hebdomadaire ({{ $legalMinimums['max_weekly_hours'] }} h/semaine). Minimum légal : {{ $legalMinimums['majoration_rate'] }} %" />
                </span>
                <div class="profile-unit-group">
                    <input id="overtime_majoration_rate" name="overtime_majoration_rate" type="number" min="{{ $legalMinimums['majoration_rate'] }}" max="100" x-model.number="overtimeMajorationRate" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">%</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="maintenance_indemnity">
                <span class="profile-label-with-info">
                    <span>Entretien / jour<span class="profile-required">*</span></span>
                    <x-legal-min-info id="maintenance_indemnity" text="Minimum légal : {{ number_format((float) $legalMinimums['maintenance_indemnity'], 2, ',', ' ') }} €" />
                </span>
                <div class="profile-unit-group">
                    <input id="maintenance_indemnity" name="maintenance_indemnity" type="number" step="0.01" min="{{ $legalMinimums['maintenance_indemnity'] }}" x-model="maintenance" x-on:blur="formatMoney('maintenance')" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="travel_expense_per_km">
                <span>Indemnité kilométrique</span>
                <div class="profile-unit-group">
                    <input id="travel_expense_per_km" name="travel_expense_per_km" type="number" step="0.01" min="0" value="{{ old('travel_expense_per_km', $record?->travel_expense_per_km ?? $contractDefaults['travel_expense_per_km']) }}" @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">€/km</span>
                </div>
            </label>

            <label class="profile-field profile-field-unit-group" for="meal_indemnity">
                <span>Montant déjeuner<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="meal_indemnity" name="meal_indemnity" type="number" step="0.01" min="0" x-model="meal" x-on:blur="formatMoney('meal')" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field profile-field-unit-group" for="snack_indemnity">
                <span>Montant goûter<span class="profile-required">*</span></span>
                <div class="profile-unit-group">
                    <input id="snack_indemnity" name="snack_indemnity" type="number" step="0.01" min="0" x-model="snack" x-on:blur="formatMoney('snack')" required @disabled(! $canEditCompensation)>
                    <span class="profile-unit-suffix" aria-hidden="true">€</span>
                </div>
            </label>
            <label class="profile-field" for="salary_payment_day">
                <span>Jour de versement du salaire</span>
                <select id="salary_payment_day" name="salary_payment_day" @disabled(! $canEditCompensation)>
                    <option value="">—</option>
                    @foreach ($salaryPaymentDayOptions as $key => $label)
                        <option value="{{ $key }}" @selected(old('salary_payment_day', $record?->salary_payment_day ?? $contractDefaults['salary_payment_day']) == $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </label>
        </div>
    </div>
</section>

<section class="employer-step-card contract-left-card">
    <div class="employer-section-header">
        <span>
            <strong>Périodes de repos</strong>
        </span>
    </div>
    <div class="employer-accordion-body">
        @if ($isParentView)
            <p class="profile-notice-callout"><span>Je retrouve ici les périodes de repos prévues par défaut par mon assistante maternelle. Si nous convenons d’autres modalités, je lui demande de les mettre à jour dans mon contrat.</span></p>
        @endif
        <div class="contract-rest-columns">
            <div class="contract-field-grid-4">
                <label class="profile-field" for="weekly_rest_day">
                    <span>Jour de repos hebdomadaire<span class="profile-required">*</span></span>
                    <select id="weekly_rest_day" name="weekly_rest_day" x-model="weeklyRestDay" required @disabled(! $canEditRest)>
                        @foreach ($dayLabels as $key => $label)
                            <option value="{{ $key }}" @selected(old('weekly_rest_day', $record?->weekly_rest_day ?? 'sunday') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="profile-field" for="weekly_rest_work_compensation">
                    <span>Majoration si travaillé<span class="profile-required">*</span></span>
                    <select id="weekly_rest_work_compensation" name="weekly_rest_work_compensation" x-model="weeklyRestCompensation" required @disabled(! $canEditRest)>
                        <option value="paid_25" @selected(old('weekly_rest_work_compensation', $record?->weekly_rest_work_compensation ?? 'paid_25') === 'paid_25')>Rémunéré au taux horaire dû, majoré à hauteur de 25%</option>
                        <option value="recovered_25" @selected(old('weekly_rest_work_compensation', $record?->weekly_rest_work_compensation) === 'recovered_25')>Récupéré par un repos équivalent à la durée de travail, majoré de 25%</option>
                    </select>
                </label>
                <label class="profile-field profile-field-unit-group" for="unpaid_leave_weeks">
                    <span>Nb semaines congés sans solde<span class="profile-required">*</span></span>
                    <div class="profile-unit-group">
                        <input id="unpaid_leave_weeks" name="unpaid_leave_weeks" type="number" min="0" max="47" value="{{ old('unpaid_leave_weeks', $record?->unpaid_leave_weeks ?? 0) }}" x-model.number="unpaidWeeks" required @disabled(! $canEditRest)>
                        <span class="profile-unit-suffix" aria-hidden="true">sem.</span>
                    </div>
                </label>
            </div>

            <fieldset class="contract-holidays-fieldset">
                <legend class="contract-fieldset-legend">
                    <span>Jours fériés travaillés</span>
                    <small class="contract-fieldset-counter" x-text="selectedHolidaysLabel()"></small>
                </legend>
                <div class="contract-holidays-grid">
                    @foreach ($publicHolidayLabels as $key => $holiday)
                        <label
                            class="contract-holiday-toggle"
                            @if (in_array($key, ['good_friday', 'december_26'], true)) x-show="isAlsaceMoselle()" x-cloak @endif
                            @if ($key === 'abolition') x-show="isDrom()" x-cloak @endif
                        >
                            <input type="checkbox" name="worked_public_holidays[]" value="{{ $key }}" @checked(in_array($key, old('worked_public_holidays', $record?->worked_public_holidays ?? []), true)) class="sr-only" @disabled(! $canEditContractFrame)>
                            <i class="ph-duotone ph-{{ $holiday['icon'] }}" aria-hidden="true"></i>
                            <span>{{ $holiday['label'] }}</span>
                        </label>
                    @endforeach
                </div>
            </fieldset>
        </div>
    </div>
</section>

<section class="employer-step-card contract-planning-card">
    @if ($isParentView)
        <p class="profile-notice-callout"><span>Je renseigne mes souhaits de garde en tant que parent employeur. Je pourrai les faire évoluer avec mon assistante maternelle si nos besoins changent, dans le respect de notre accord.</span></p>
    @endif
    <div class="profile-schedule-summary-row">
        <div class="profile-section-heading-title">
            @if ($isTemplateMode)
                <strong>{{ $scheduleSectionTitle }}</strong>
            @else
                <strong x-text="usesLinkedParentFlow() ? 'Amplitude horaire acceptée' : @js($scheduleSectionTitle)">{{ $scheduleSectionTitle }}</strong>
            @endif
        </div>
        <div class="profile-schedule-summary-actions">
            <span class="profile-schedule-summary-pill" x-text="weeklyDays() + ' jour' + (weeklyDays() > 1 ? 's' : '') + ' · ' + formattedWeeklyHours() + ' / sem.'"></span>
            <span class="profile-schedule-summary-pill profile-schedule-summary-pill--warning" x-show="hasOvertimeHours()" x-cloak x-text="formattedOvertimeWeeklyHours() + ' majorées'" x-bind:title="'Les heures effectuées au-delà de {{ $legalMinimums['max_weekly_hours'] }} h/semaine sont majorées de ' + overtimeMajorationRate + ' %.'"></span>
        </div>
    </div>

    <div class="profile-schedule-grid">
        @foreach ($scheduleDayLabels as $key => $label)
            <div class="contract-schedule-day" x-bind:class="{ 'contract-schedule-day--rest': isRestDay('{{ $key }}') && schedule.{{ $key }}.enabled, 'contract-schedule-day--locked': ! isScheduleDayAllowed('{{ $key }}') }">
                <div class="profile-schedule-day-head">
                    <label class="profile-schedule-day-toggle">
                        <input type="hidden" name="weekly_schedule[{{ $key }}][enabled]" value="0">
                        <input type="checkbox" name="weekly_schedule[{{ $key }}][enabled]" value="1" x-model="schedule.{{ $key }}.enabled" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')">
                        <span class="contract-schedule-day-check"><i class="ph ph-check" aria-hidden="true"></i></span>
                        <span class="profile-schedule-day-name">{{ substr($label, 0, 3) }}.</span>
                    </label>
                    @if ($canEditSchedule)
                        <button type="button" class="contract-schedule-day-copy" x-show="schedule.{{ $key }}.enabled" x-cloak x-on:click="applyDayToChecked('{{ $key }}')" x-bind:disabled="! schedule.{{ $key }}.start || ! schedule.{{ $key }}.end" title="Appliquer ces horaires aux jours cochés">
                            <i class="ph-duotone ph-copy" aria-hidden="true"></i>
                        </button>
                    @endif
                </div>
                <p class="contract-schedule-day-rest-badge" x-show="isRestDay('{{ $key }}') && schedule.{{ $key }}.enabled" x-cloak x-text="'Repos hebdo.'" title="Ce jour est le jour de repos hebdomadaire : les heures travaillées y sont majorées."></p>
                <template x-if="schedule.{{ $key }}.enabled">
                    <div class="display-contents">
                        <input type="time" name="weekly_schedule[{{ $key }}][start]" x-model="schedule.{{ $key }}.start" x-bind:min="templateDayStart('{{ $key }}')" x-bind:max="templateDayEnd('{{ $key }}')" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')" aria-label="Début {{ $label }}">
                        <input type="time" name="weekly_schedule[{{ $key }}][end]" x-model="schedule.{{ $key }}.end" x-bind:min="templateDayStart('{{ $key }}')" x-bind:max="templateDayEnd('{{ $key }}')" x-bind:disabled="{{ $canEditSchedule ? 'false' : 'true' }} || ! isScheduleDayAllowed('{{ $key }}')" aria-label="Fin {{ $label }}">
                        <span class="profile-schedule-day-duration" x-text="dailyDurationLabel('{{ $key }}')"></span>
                    </div>
                </template>
                <template x-if="!schedule.{{ $key }}.enabled">
                    <span class="profile-schedule-day-duration">Non travaillé</span>
                </template>
            </div>
        @endforeach
    </div>

    <label class="contract-schedule-notice-row" for="schedule_notice_weeks">
        <span>Délai de prévenance en cas de changement de planning</span>
        <span class="profile-unit-group">
            <input id="schedule_notice_weeks" name="schedule_notice_weeks" type="number" x-bind:min="careType === 'occasional' ? 8 : 0" max="52" x-bind:required="careType === 'occasional'" value="{{ old('schedule_notice_weeks', $record?->schedule_notice_weeks ?? $contractDefaults['schedule_notice_weeks']) }}" @disabled(! $canEditScheduleNotice)>
            <span class="profile-unit-suffix" aria-hidden="true">sem.</span>
        </span>
        <small class="contract-schedule-notice-helper" x-show="careType === 'occasional'" x-cloak>Pour une garde occasionnelle, le délai minimum est de 8 semaines calendaires.</small>
    </label>
</section>

<section class="employer-step-card contract-weeks-card" x-show="careType === 'incomplete_year'" x-cloak>
    <div class="employer-section-header">
        <span>
            <strong>Semaines travaillées</strong>
        </span>
        <span class="contract-header-pill" x-text="specificWeeks.length + ' / 52 semaines'"></span>
    </div>
    <div class="employer-accordion-body">
        @if ($canEditWeeks)
            <div class="contract-weeks-presets">
                <button type="button" class="employers-secondary-button" x-on:click="selectAllWeeks()">Tout sélectionner</button>
                <button type="button" class="employers-secondary-button" x-on:click="deselectAllWeeks()">Tout désélectionner</button>
                <button type="button" class="employers-secondary-button" x-on:click="selectWeeksParity('odd')">Semaines impaires</button>
                <button type="button" class="employers-secondary-button" x-on:click="selectWeeksParity('even')">Semaines paires</button>
            </div>
        @endif
        <div class="contract-weeks-months">
            @foreach ($weekMonthGroups as $monthLabel => $weeks)
                <div>
                    <button type="button" class="contract-weeks-month-label" x-on:click="toggleMonthWeeks(@js($weeks))" title="Sélectionner/désélectionner {{ $monthLabel }}" @disabled(! $canEditWeeks)>{{ $monthLabel }}</button>
                    <div class="contract-weeks-grid">
                        @foreach ($weeks as $week)
                            <label class="contract-week-toggle">
                                <input type="checkbox" name="specific_weeks[]" value="{{ $week }}" x-model.number="specificWeeks" class="sr-only" @disabled(! $canEditWeeks)>
                                <span>s{{ $week }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        @error('specific_weeks')<small>{{ $message }}</small>@enderror
    </div>
</section>

<section class="employer-step-card contract-left-card">
    <div class="employer-section-header">
        <span><strong>Conditions particulières</strong></span>
    </div>
    <div class="employer-accordion-body">
        @include('contracts._required-documents')
        <label class="profile-field" for="special_conditions">
            <span>Mes précisions complémentaires (facultatif)</span>
            <textarea id="special_conditions" name="special_conditions" rows="5" placeholder="Je précise ici les dispositions convenues pour mon contrat…" @disabled(! $canEditContractFrame)>{{ old('special_conditions', $record?->special_conditions) }}</textarea>
            @error('special_conditions')<small>{{ $message }}</small>@enderror
        </label>
    </div>
</section>

    </div>

    <aside class="contract-sidebar">
<section class="employer-step-card contract-simulation-card contract-simulation-card--sidebar">
    <div class="employer-section-header">
        <span>
            <strong>Simulation</strong>
            <small x-text="simulationSummaryLine()"></small>
        </span>
    </div>
    <div class="employer-accordion-body">
        <div class="contract-sim-section">
            <small class="contract-sim-section-title contract-sim-section-title--purple">Rémunération</small>
            <div class="contract-sim-line">
                <span>Heures normales</span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyNormalPay())) + ' ' + periodSuffix()"></strong>
                <small x-text="normalHourlyBreakdown()"></small>
            </div>
            <div class="contract-sim-line" x-show="hasOvertimeHours()" x-cloak>
                <span x-text="'Heures majorées +' + overtimeMajorationRate + '%'"></span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyOvertimePay())) + ' ' + periodSuffix()"></strong>
                <small x-text="overtimeHourlyBreakdown()"></small>
            </div>
            <div class="contract-sim-line" x-show="hasRestDayWorked() && weeklyRestCompensation === 'paid_25'" x-cloak>
                <span x-text="'Jour de repos majoré +' + restDayMajorationRate() + '%'"></span>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="'+ ' + money(displayAmount(monthlyRestDayBonus())) + ' ' + periodSuffix()"></strong>
                <small x-text="restDayBonusBreakdown()"></small>
            </div>
        </div>

        <div class="contract-sim-section" x-show="hasMeals() || Number(maintenance) > 0" x-cloak>
            <small class="contract-sim-section-title contract-sim-section-title--purple">Indemnités</small>
            <div class="contract-sim-line contract-sim-line--inline">
                <span>Entretien</span>
                <small x-text="indemnitiesBreakdown()"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyIndemnities())) + ' ' + periodSuffix()"></strong>
            </div>
            <div class="contract-sim-line contract-sim-line--inline" x-show="mealProvider === 'assistant'" x-cloak>
                <span>Déjeuner</span>
                <small x-text="formattedMonthlyDays() + ' j × ' + money(Number(meal || 0))"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlyMealOnly())) + ' ' + periodSuffix()"></strong>
            </div>
            <div class="contract-sim-line contract-sim-line--inline" x-show="snackProvider === 'assistant'" x-cloak>
                <span>Goûter</span>
                <small x-text="formattedMonthlyDays() + ' j × ' + money(Number(snack || 0))"></small>
                <span class="contract-sim-leader" aria-hidden="true"></span>
                <strong x-text="money(displayAmount(monthlySnackOnly())) + ' ' + periodSuffix()"></strong>
            </div>
        </div>

        <div class="contract-sim-total">
            <span>Salaire net estimé</span>
            <strong x-text="money(displayAmount(totalToPay())) + ' ' + periodSuffix()"></strong>
        </div>

        @if ($isParentView)
            @include('contracts._cmg-aids')
        @endif
    </div>
</section>

    </aside>
</div>