{% extends '@App/app.html.twig' %}

{% block title %}Nouveau contrat{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set selected_salarie_id = data.salarie|default(contract.salarie ? contract.salarie.id : '') %}
{% set selected_etablissement_id = data.etablissement|default(contract.etablissement ? contract.etablissement.id : '') %}
{% set selected_type = data.typeContrat|default(contract.typeContrat)|default('cdi') %}
{% set selected_statut = data.statut|default(contract.statut)|default('brouillon') %}
{% set selected_service = data.service|default(contract.service)|default('') %}
{% set selected_job = data.intitulePoste|default(contract.intitulePoste)|default('') %}
{% set selected_category = data.categorie|default(contract.categorie)|default('') %}
{% set selected_periodicite = data.remunerationPeriodicite|default(contract.remunerationPeriodicite)|default('mensuelle') %}
{% set selected_devise = data.devise|default(contract.devise)|default('EUR') %}
{% set selected_temps = data.typeTempsTravail|default(contract.typeTempsTravail)|default('temps_plein') %}
{% set brut = data.remunerationBrute|default(contract.remunerationBrute)|default(0) %}
{% set hebdo = data.tempsTravailHebdomadaire|default(contract.tempsTravailHebdomadaire)|default(35) %}
{% set net = brut ? (brut * 0.78)|round(0, 'floor') : 0 %}
{% set employer_cost = brut ? (brut * 1.45)|round(0, 'floor') : 0 %}
{% set document_mode = data.documentMode|default(isDocumentTemplateEnabled and documentTemplates is not empty ? 'template' : 'upload') %}

<div class="flow-wizard flow-wizard--contract" data-controller="flow-wizard">
    <div class="flow-wizard__intro">
        <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
            <a href="{{ path('contract_index') }}">Contrats</a>
            <i class="ti ti-chevron-right" aria-hidden="true"></i>
            <span class="text-black-75">Nouveau contrat</span>
        </nav>
        <h1>Création d'un nouveau contrat</h1>
        <p>Saisissez les informations contractuelles du salarié étape par étape.</p>
    </div>

    {% if errors|default([]) is not empty %}
        <div class="alert alert-danger">
            {% for error in errors %}
                <div>{{ error }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <form method="post" action="{{ path('contract_new') }}" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token('contract_create') }}">

        <ol class="flow-wizard__steps" aria-label="Progression">
            {% for step in [
                {label: 'Généralités'},
                {label: 'Rémunération'},
                {label: 'Documents'},
                {label: 'Validation'}
            ] %}
                <li class="flow-wizard__step" data-flow-wizard-target="progress">
                    <a href="#" class="flow-wizard__step-button" data-action="flow-wizard#goTo" data-flow-wizard-step-index="{{ loop.index0 }}">
                        <span class="flow-wizard__step-number">{{ loop.index }}</span>
                    </a>
                    <span class="flow-wizard__step-label">{{ step.label }}</span>
                </li>
            {% endfor %}
        </ol>

        <div class="flow-wizard__context">
            <span class="flow-wizard__context-avatar"><i class="ti ti-user" aria-hidden="true"></i></span>
            <strong data-flow-wizard-target="summary" data-source="salarie" data-empty="Salarié à sélectionner">Salarié à sélectionner</strong>
            <span><i class="ti ti-file-description" aria-hidden="true"></i> <span data-flow-wizard-target="summary" data-source="typeContrat">{{ selected_type|upper }}</span></span>
            <span><i class="ti ti-building" aria-hidden="true"></i> <span data-flow-wizard-target="summary" data-source="etablissement" data-empty="Établissement">{{ contract.etablissement ? contract.etablissement.nom : 'Établissement' }}</span></span>
            <span><i class="ti ti-briefcase" aria-hidden="true"></i> <span data-flow-wizard-target="summary" data-source="intitulePoste" data-empty="Poste">{{ data.intitulePoste|default(contract.intitulePoste)|default('Poste') }}</span></span>
            <span class="flow-wizard__status"><i class="ti ti-clock" aria-hidden="true"></i> <span data-flow-wizard-target="summary" data-source="statut">{{ selected_statut|capitalize }}</span></span>
        </div>

        <section class="flow-wizard__panel" data-flow-wizard-target="step">
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><i class="ti ti-file-pencil" aria-hidden="true"></i></span>
                    <div>
                        <h2>Informations générales du contrat</h2>
                        <p>Sujet du contrat, rattachement et fonction occupée</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 1 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__section-title"><i class="ti ti-id-badge-2" aria-hidden="true"></i> Sujet et paramètres</div>
                <div class="flow-wizard__grid">
                    <div class="flow-wizard__field--lg">
                        <label class="flow-wizard__label" for="contract_salarie">Salarié <span class="flow-wizard__required">*</span></label>
                        <select class="form-select" id="contract_salarie" name="salarie" required>
                            <option value="">Sélectionner un salarié...</option>
                            {% for salarie in salaries %}
                                <option value="{{ salarie.id }}" {{ selected_salarie_id == salarie.id ? 'selected' : '' }}>{{ salarie }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="contract_type">Type de contrat <span class="flow-wizard__required">*</span></label>
                        <select class="form-select" id="contract_type" name="typeContrat" required>
                            {% for type in types %}
                                <option value="{{ type }}" {{ selected_type == type ? 'selected' : '' }}>{{ type|upper }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="contract_statut">Statut du dossier</label>
                        <select class="form-select" id="contract_statut" name="statut">
                            {% for status in statuses %}
                                <option value="{{ status }}" {{ selected_statut == status ? 'selected' : '' }}>{{ status|replace({'_': ' '})|capitalize }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><i class="ti ti-hierarchy-2" aria-hidden="true"></i> Affectation et fonction</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field--lg">
                            <label class="flow-wizard__label" for="contract_etablissement">Établissement</label>
                            <select class="form-select" id="contract_etablissement" name="etablissement">
                                <option value="">Sélectionner un établissement...</option>
                                {% for etablissement in etablissements %}
                                    <option value="{{ etablissement.id }}" {{ selected_etablissement_id == etablissement.id ? 'selected' : '' }}>{{ etablissement.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field--lg">
                            <label class="flow-wizard__label" for="contract_service">Service / Département</label>
                            <select class="form-select" id="contract_service" name="service">
                                <option value="">Sélectionner un service...</option>
                                {% for service in services %}
                                    <option value="{{ service.nom }}" {{ selected_service == service.nom ? 'selected' : '' }}>{{ service.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field--lg">
                            <label class="flow-wizard__label" for="contract_poste">Intitulé du poste</label>
                            <select class="form-select" id="contract_poste" name="intitulePoste">
                                <option value="">Sélectionner un poste...</option>
                                {% for job in jobs %}
                                    <option value="{{ job.nom }}" {{ selected_job == job.nom ? 'selected' : '' }}>{{ job.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field--lg">
                            <label class="flow-wizard__label" for="contract_categorie">Catégorie professionnelle</label>
                            <select class="form-select" id="contract_categorie" name="categorie">
                                <option value="">Sélectionner une catégorie...</option>
                                {% for category in categories %}
                                    <option value="{{ category.nom }}" {{ selected_category == category.nom ? 'selected' : '' }}>{{ category.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field--lg">
                            <label class="flow-wizard__label" for="contract_lieu">Lieu de travail</label>
                            <input class="form-control" id="contract_lieu" name="lieuTravail" value="{{ data.lieuTravail|default(contract.lieuTravail)|default('') }}" placeholder="Ex: Siège social - Paris">
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="contract_reference">Référence</label>
                            <input class="form-control" id="contract_reference" name="reference" value="{{ data.reference|default(contract.reference)|default('') }}" placeholder="Auto si vide">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><i class="ti ti-coins" aria-hidden="true"></i></span>
                    <div>
                        <h2>Rémunération & temps de travail</h2>
                        <p>Salaire, durée contractuelle et éléments variables</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 2 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__section-title"><i class="ti ti-currency-euro" aria-hidden="true"></i> Salaire de base</div>
                <div class="flow-wizard__grid">
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label">Base de calcul</label>
                        <div class="flow-wizard__segmented">
                            <input type="radio" id="contract_base_month" name="remunerationPeriodicite" value="mensuelle" {{ selected_periodicite == 'mensuelle' ? 'checked' : '' }}>
                            <label for="contract_base_month">Mensuel</label>
                            <input type="radio" id="contract_base_hour" name="remunerationPeriodicite" value="horaire" {{ selected_periodicite == 'horaire' ? 'checked' : '' }}>
                            <label for="contract_base_hour">Horaire</label>
                        </div>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="contract_brut">Salaire brut mensuel <span class="flow-wizard__required">*</span></label>
                        <div class="input-group">
                            <input class="form-control" type="number" min="0" step="0.01" id="contract_brut" name="remunerationBrute" value="{{ brut }}" data-flow-contract-gross required>
                            <span class="input-group-text">€ / mois</span>
                        </div>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label">Salaire net estimé</label>
                        <input class="form-control" value="{{ net ? '~ ' ~ net|number_format(0, ',', ' ') ~ ' €' : '' }}" data-flow-contract-net disabled>
                        <div class="form-text">Estimation basée sur les charges (~22%)</div>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="contract_devise">Devise</label>
                        <select class="form-select" id="contract_devise" name="devise">
                            <option value="EUR" {{ selected_devise == 'EUR' ? 'selected' : '' }}>EUR — Euro €</option>
                            <option value="USD" {{ selected_devise == 'USD' ? 'selected' : '' }}>USD — Dollar $</option>
                            <option value="GBP" {{ selected_devise == 'GBP' ? 'selected' : '' }}>GBP — Livre £</option>
                        </select>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><i class="ti ti-clock" aria-hidden="true"></i> Durée & temps de travail</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="contract_debut">Date d'entrée <span class="flow-wizard__required">*</span></label>
                            <input class="form-control" type="date" id="contract_debut" name="dateDebut" value="{{ data.dateDebut|default(contract.dateDebut ? contract.dateDebut|date('Y-m-d') : '') }}" required>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="contract_fin">Date de fin</label>
                            <input class="form-control" type="date" id="contract_fin" name="dateFin" value="{{ data.dateFin|default(contract.dateFin ? contract.dateFin|date('Y-m-d') : '') }}" data-flow-contract-end-date>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="contract_hebdo">Durée hebdomadaire</label>
                            <div class="input-group">
                                <input class="form-control" type="number" min="0" step="0.01" id="contract_hebdo" name="tempsTravailHebdomadaire" value="{{ hebdo }}">
                                <span class="input-group-text">h/sem</span>
                            </div>
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label">Temps de travail</label>
                            <div class="flow-wizard__segmented">
                                <input type="radio" id="contract_time_full" name="typeTempsTravail" value="temps_plein" {{ selected_temps == 'temps_plein' ? 'checked' : '' }}>
                                <label for="contract_time_full">Plein</label>
                                <input type="radio" id="contract_time_part" name="typeTempsTravail" value="temps_partiel" {{ selected_temps == 'temps_partiel' ? 'checked' : '' }}>
                                <label for="contract_time_part">Partiel</label>
                            </div>
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="contract_trial">Période d'essai</label>
                            <div class="input-group">
                                <input class="form-control" type="number" min="0" step="1" id="contract_trial" name="periodeEssai" value="{{ data.periodeEssai|default(2) }}">
                                <span class="input-group-text">mois</span>
                            </div>
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="contract_trial_end">Fin période d'essai</label>
                            <input class="form-control" type="date" id="contract_trial_end" name="dateFinPeriodeEssai" value="{{ data.dateFinPeriodeEssai|default(contract.dateFinPeriodeEssai ? contract.dateFinPeriodeEssai|date('Y-m-d') : '') }}">
                        </div>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><i class="ti ti-gift" aria-hidden="true"></i> Avantages & éléments variables</div>
                    <div class="flow-wizard__grid">
                        {% for key, label in {'mutuelle': 'Mutuelle d’entreprise', 'tickets': 'Tickets restaurant', 'vehicule': 'Voiture de fonction', 'transport': 'Remboursement transport', 'prime': 'Prime d’objectifs', 'teletravail': 'Télétravail'} %}
                            <label class="flow-wizard__option-card flow-wizard__field--md">
                                <input class="form-check-input" type="checkbox" name="avantages[]" value="{{ key }}" {{ key in data.avantages|default(['mutuelle', 'tickets']) ? 'checked' : '' }}>
                                <span><strong>{{ label }}</strong><br><span class="text-muted small">{{ key in ['mutuelle', 'tickets'] ? 'Participation employeur' : 'Option contractuelle' }}</span></span>
                            </label>
                        {% endfor %}
                    </div>
                </div>

                <div class="flow-wizard__cost-panel">
                    <div class="flow-wizard__section-title"><i class="ti ti-report-money" aria-hidden="true"></i> Synthèse du coût employeur estimé</div>
                    <div class="flow-wizard__cost-grid">
                        <div><span>Salaire brut</span><strong data-flow-contract-gross-output>{{ brut ? brut|number_format(0, ',', ' ') ~ ' €' : '-' }}</strong><small>par mois</small></div>
                        <div><span>Charges patronales</span><strong class="text-warning" data-flow-contract-charges-output>+ {{ brut ? (brut * 0.45)|round(0, 'floor')|number_format(0, ',', ' ') ~ ' €' : '-' }}</strong><small>~ 45%</small></div>
                        <div><span>Coût total employeur</span><strong class="text-success" data-flow-contract-total-output>{{ employer_cost ? employer_cost|number_format(0, ',', ' ') ~ ' €' : '-' }}</strong><small>par mois</small></div>
                        <div><span>Coût annuel</span><strong data-flow-contract-annual-output>{{ employer_cost ? (employer_cost * 12)|number_format(0, ',', ' ') ~ ' €' : '-' }}</strong><small>estimé</small></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><i class="ti ti-paperclip" aria-hidden="true"></i></span>
                    <div>
                        <h2>Documents contractuels</h2>
                        <p>Ajoutez un contrat PDF ou générez-le depuis un modèle documentaire</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 3 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__section-title"><i class="ti ti-file-upload" aria-hidden="true"></i> Contrat principal</div>
                <div class="flow-wizard__document-modes">
                    <label class="flow-wizard__document-mode">
                        <input type="radio" name="documentMode" value="upload" {{ document_mode == 'upload' ? 'checked' : '' }}>
                        <span><i class="ti ti-file-type-pdf" aria-hidden="true"></i></span>
                        <strong>Uploader un PDF</strong>
                        <small>Contrat déjà préparé et prêt à être joint</small>
                    </label>
                    <label class="flow-wizard__document-mode {{ not isDocumentTemplateEnabled or documentTemplates is empty ? 'is-disabled' : '' }}">
                        <input type="radio" name="documentMode" value="template" {{ document_mode == 'template' ? 'checked' : '' }} {{ not isDocumentTemplateEnabled or documentTemplates is empty ? 'disabled' : '' }}>
                        <span><i class="ti ti-template" aria-hidden="true"></i></span>
                        <strong>Générer depuis un modèle</strong>
                        <small>Remplissage automatique avec les données du contrat</small>
                    </label>
                </div>

                <div class="flow-wizard__grid mt-4">
                    <div class="flow-wizard__field--lg" data-flow-document-upload-block>
                        <label class="flow-wizard__label" for="contract_pdf">Version PDF du contrat</label>
                        <label class="flow-wizard__upload-zone" for="contract_pdf">
                            <i class="ti ti-cloud-upload" aria-hidden="true"></i>
                            <strong>Glissez-déposez votre contrat ici</strong>
                            <span>ou sélectionnez un fichier PDF — max 10 Mo</span>
                        </label>
                        <input class="form-control mt-2" type="file" id="contract_pdf" name="contractPdf" accept="application/pdf,.pdf">
                    </div>
                    <div class="flow-wizard__field--lg" data-flow-document-template-block>
                        <label class="flow-wizard__label" for="contract_template">Modèle documentaire</label>
                        <select class="form-select" id="contract_template" name="documentTemplate" data-flow-template-select data-flow-template-available="{{ isDocumentTemplateEnabled and documentTemplates is not empty ? '1' : '0' }}" {{ not isDocumentTemplateEnabled or documentTemplates is empty ? 'disabled' : '' }}>
                            <option value="">Sélectionner un modèle...</option>
                            {% for template in documentTemplates %}
                                <option value="{{ template.id }}" {{ data.documentTemplate|default('') == template.id ? 'selected' : '' }}>{{ template.nom }} · {{ template.type|upper }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">
                            {% if isDocumentTemplateEnabled and documentTemplates is not empty %}
                                Les variables du modèle seront remplacées automatiquement.
                            {% else %}
                                Aucun modèle actif disponible pour cette société.
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><i class="ti ti-list-check" aria-hidden="true"></i> Documents requis</div>
                    <div class="flow-wizard__required-docs">
                        <div class="is-ok"><i class="ti ti-circle-check" aria-hidden="true"></i><strong>Contrat de travail signé</strong><span>Document principal obligatoire</span></div>
                        <div class="is-pending"><i class="ti ti-clock" aria-hidden="true"></i><strong>Pièce d'identité</strong><span>À valider dans le dossier salarié</span></div>
                        <div><i class="ti ti-plus" aria-hidden="true"></i><strong>RIB bancaire</strong><span>Optionnel</span></div>
                        <div><i class="ti ti-plus" aria-hidden="true"></i><strong>Attestation de diplôme</strong><span>Optionnel</span></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><i class="ti ti-checkup-list" aria-hidden="true"></i></span>
                    <div>
                        <h2>Validation du contrat</h2>
                        <p>Vérifiez et validez les informations avant de finaliser le contrat</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 4 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__success-banner">
                    <i class="ti ti-circle-check-filled" aria-hidden="true"></i>
                    <div>
                        <strong>Toutes les étapes sont complètes</strong>
                        <span>Le contrat est prêt à être créé. Vérifiez le récapitulatif ci-dessous avant de confirmer.</span>
                    </div>
                    <em>3 / 3 sections OK</em>
                </div>

                <div class="flow-wizard__review-layout">
                    <div class="flow-wizard__review-main">
                        <article class="flow-wizard__review-card">
                            <h3><i class="ti ti-file-description" aria-hidden="true"></i> Informations générales <span>Complet</span></h3>
                            <dl>
                                <div><dt>Salarié</dt><dd data-flow-wizard-target="summary" data-source="salarie" data-empty="-">-</dd></div>
                                <div><dt>Type de contrat</dt><dd data-flow-wizard-target="summary" data-source="typeContrat">{{ selected_type|upper }}</dd></div>
                                <div><dt>Poste</dt><dd data-flow-wizard-target="summary" data-source="intitulePoste" data-empty="-">{{ data.intitulePoste|default(contract.intitulePoste)|default('-') }}</dd></div>
                                <div><dt>Date de début</dt><dd data-flow-wizard-target="summary" data-source="dateDebut" data-empty="-">{{ data.dateDebut|default(contract.dateDebut ? contract.dateDebut|date('Y-m-d') : '-') }}</dd></div>
                                <div><dt>Département</dt><dd data-flow-wizard-target="summary" data-source="service" data-empty="-">{{ data.service|default(contract.service)|default('-') }}</dd></div>
                            </dl>
                        </article>
                        <article class="flow-wizard__review-card">
                            <h3><i class="ti ti-currency-euro" aria-hidden="true"></i> Rémunération <span>Complet</span></h3>
                            <dl>
                                <div><dt>Salaire brut mensuel</dt><dd><span data-flow-wizard-target="summary" data-source="remunerationBrute">{{ brut }}</span> €</dd></div>
                                <div><dt>Salaire net estimé</dt><dd>{{ net ? '~ ' ~ net|number_format(0, ',', ' ') ~ ' €' : '-' }}</dd></div>
                                <div><dt>Mode de paiement</dt><dd>Virement bancaire</dd></div>
                                <div><dt>Fréquence</dt><dd data-flow-wizard-target="summary" data-source="remunerationPeriodicite">{{ selected_periodicite|capitalize }}</dd></div>
                            </dl>
                        </article>
                        <article class="flow-wizard__review-card">
                            <h3><i class="ti ti-paperclip" aria-hidden="true"></i> Documents <span>À confirmer</span></h3>
                            <dl>
                                <div><dt>Mode</dt><dd data-flow-wizard-target="summary" data-source="documentMode">{{ document_mode == 'template' ? 'Génération depuis modèle' : 'Upload PDF' }}</dd></div>
                                <div><dt>Modèle</dt><dd data-flow-wizard-target="summary" data-source="documentTemplate" data-empty="-">-</dd></div>
                                <div><dt>Signature</dt><dd>{{ isSignatureEnabled ? 'Disponible' : 'Non activée' }}</dd></div>
                            </dl>
                        </article>
                    </div>
                    <aside class="flow-wizard__review-side">
                        <article class="flow-wizard__review-card">
                            <h3><i class="ti ti-list-check" aria-hidden="true"></i> Checklist de validation</h3>
                            <div class="flow-wizard__checklist">
                                <span class="is-ok"><i class="ti ti-circle-check-filled"></i> Informations générales</span>
                                <span class="is-ok"><i class="ti ti-circle-check-filled"></i> Rémunération définie</span>
                                <span class="is-ok"><i class="ti ti-circle-check-filled"></i> Document principal</span>
                                <span class="is-pending"><i class="ti ti-clock-filled"></i> Pièce d'identité validée</span>
                            </div>
                            <div class="flow-wizard__progress-line"><span style="width: 80%"></span></div>
                        </article>
                        <article class="flow-wizard__review-card">
                            <h3><i class="ti ti-bell" aria-hidden="true"></i> Notifications</h3>
                            <label><input class="form-check-input" type="checkbox" name="notifyEmployee" value="1" checked> Notifier le salarié par e-mail</label>
                            <label><input class="form-check-input" type="checkbox" name="notifyHr" value="1" checked> Notifier le RH responsable</label>
                            <label><input class="form-check-input" type="checkbox" name="notifyDirection" value="1"> Envoyer une copie à la direction</label>
                        </article>
                    </aside>
                </div>
            </div>
        </section>

        <div class="flow-wizard__footer">
            <a class="btn btn-outline-secondary" href="{{ path('contract_index') }}">
                <i class="ti ti-x" aria-hidden="true"></i> Annuler
            </a>
            <div class="flow-wizard__footer-actions">
                <button class="btn btn-outline-secondary" type="button" data-flow-wizard-target="back" data-action="flow-wizard#back" hidden>
                    <i class="ti ti-arrow-left" aria-hidden="true"></i> Précédent
                </button>
                <button class="btn btn-outline-secondary" type="submit" name="submit_action" value="draft" formnovalidate>
                    Enregistrer
                </button>
                <button class="btn btn-primary" type="button" data-flow-wizard-target="next" data-action="flow-wizard#next">
                    Suivant <i class="ti ti-arrow-right" aria-hidden="true"></i>
                </button>
                <button class="btn btn-primary" type="submit" data-flow-wizard-target="submit" hidden>
                    <i class="ti ti-user-plus" aria-hidden="true"></i> Créer le contrat
                </button>
            </div>
        </div>
    </form>

    <p class="flow-wizard__privacy">
        <i class="ti ti-info-circle" aria-hidden="true"></i>
        Les informations saisies seront utilisées pour générer automatiquement le document final du contrat.
    </p>
</div>
{% endblock %}