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

{% block title %}{{ salarie }}{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
    {% set meta = salarie_meta|default({}) %}
    {% set employee_name = salarie|trim ?: 'Salarié' %}
    {% set initials = ((salarie.prenom|default('')|first) ~ (salarie.nom|default('')|first))|upper %}
    {% set photo_path = salarie.photo ? salarie.photo|trim : null %}
    {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
    {% set job_label = salarie.employeeJob ? salarie.employeeJob.nom : (salarie.poste ?: 'Poste non renseigné') %}
    {% set service_label = salarie.employeeService ? salarie.employeeService.nom : (salarie.service ?: 'Service non renseigné') %}
    {% set category_label = salarie.employeeCategory ? salarie.employeeCategory.nom : 'Non renseigné' %}
    {% set status_label = salarie.statut == 'actif' ? 'Actif' : salarie.statut|replace({'_': ' '})|capitalize %}
    {% set first_contract = contracts|length ? contracts|first : null %}
    {% set contract_label = salarie.typeCollaborateur ?: (first_contract ? first_contract.typeContrat : 'CDI') %}
    {% set primary_email = salarie.emailProfessionnel ?: salarie.emailPersonnel %}
    {% set primary_phone = salarie.telephoneProfessionnel ?: salarie.telephonePersonnel ?: salarie.telephone %}
    {% set address_line = salarie.adresse ?: 'Adresse non renseignée' %}
    {% set completion = ((((salarie.adresse ? 1 : 0) + (salarie.emailPersonnel ? 1 : 0) + (primary_phone ? 1 : 0) + (salarie.contactUrgenceNom ? 1 : 0) + (salarie.telephoneProfessionnel ? 1 : 0) + (salarie.complementAdresse ? 1 : 0)) / 6) * 100)|round %}

    <div class="record-profile">
        <div class="record-profile__topbar">
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <span class="text-black">Ressources humaines</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <a href="{{ path('employee_index') }}">Salariés</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-black-50">{{ employee_name }}</span>
            </nav>

            <div class="record-profile__actions">
                {% if not salarie.user and is_granted('EMPLOYEE_EDIT', salarie) %}
                    <form method="post" action="{{ path('employee_user_account_create', {id: salarie.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('employee_user_account_create_' ~ salarie.id) }}">
                        <button class="btn btn-outline-primary btn-sm" type="submit">
                            <i class="ti ti-user-plus me-1" aria-hidden="true"></i> Créer le compte
                        </button>
                    </form>
                {% endif %}
                {% if is_granted('EMPLOYEE_EDIT', salarie) %}
                    <a class="btn btn-secondary btn-sm" href="{{ path('employee_edit', {id: salarie.id}) }}">
                        <i class="ti ti-pencil me-1" aria-hidden="true"></i> Modifier
                    </a>
                {% endif %}
            </div>
        </div>

        <section class="record-profile__hero">
            <div class="record-profile__cover">
                <span class="record-badge record-badge--glass"><i class="ti ti-circle-filled" aria-hidden="true"></i>{{ status_label }}</span>
                <span class="record-badge record-badge--glass">{{ contract_label }}</span>
            </div>
            <div class="record-profile__identity">
                <div class="record-avatar record-avatar--xl">
                    {% if avatar_src %}
                        <img src="{{ avatar_src }}" alt="{{ employee_name }}">
                    {% else %}
                        <span>{{ initials ?: 'S' }}</span>
                    {% endif %}
                    <span class="record-avatar__status"></span>
                </div>
                <div class="record-profile__heading">
                    <h1>{{ employee_name }}</h1>
                    <p>
                        <i class="ti ti-briefcase" aria-hidden="true"></i>{{ job_label }}
                        <span aria-hidden="true">•</span>
                        <i class="ti ti-sitemap" aria-hidden="true"></i>{{ service_label }}
                    </p>
                </div>
                <div class="record-profile__quick-actions">
                    {% if primary_email %}
                        <a class="record-action record-action--success" href="mailto:{{ primary_email }}">
                            <i class="ti ti-mail" aria-hidden="true"></i>Email
                        </a>
                    {% endif %}
                    {% if primary_phone %}
                        <a class="record-action" href="tel:{{ primary_phone|replace({' ': ''}) }}">
                            <i class="ti ti-phone" aria-hidden="true"></i>Appeler
                        </a>
                    {% endif %}
                </div>
            </div>
            <div class="record-profile__stats">
                <div class="record-stat">
                    <span>Matricule</span>
                    <strong>{{ salarie.matricule ?: 'Non renseigné' }}</strong>
                </div>
                <div class="record-stat">
                    <span>Entrée</span>
                    <strong>{{ salarie.dateEntree ? salarie.dateEntree|date('d M Y') : 'Non renseignée' }}</strong>
                </div>
                <div class="record-stat">
                    <span>Ancienneté</span>
                    <strong>{{ seniority_label }}</strong>
                </div>
                <div class="record-stat">
                    <span>Solde congés</span>
                    <strong class="text-success">12.5 j</strong>
                </div>
            </div>
        </section>

        <div class="record-profile__tabs" data-controller="tabs" data-tabs-active-value="identity">
            <div class="record-tabs" role="tablist" aria-label="Dossier salarié">
                <button type="button" class="record-tabs__item is-active" data-tabs-target="tab" data-tabs-id="identity" data-action="tabs#select" role="tab" aria-selected="true">Identité</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="professional" data-action="tabs#select" role="tab" aria-selected="false">Professionnel</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="contact" data-action="tabs#select" role="tab" aria-selected="false">Coordonnées</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="documents" data-action="tabs#select" role="tab" aria-selected="false">Documents</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="activity" data-action="tabs#select" role="tab" aria-selected="false">Activité</button>
            </div>

            <section class="record-tab-panel is-active" data-tabs-target="panel" data-tabs-id="identity">
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-user" aria-hidden="true"></i>État civil</h2>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Civilité</span><strong>{{ salarie.civilite ?: 'Non renseignée' }}</strong></div>
                                <div><span>Nom de famille</span><strong>{{ salarie.nom ?: 'Non renseigné' }}</strong></div>
                                <div><span>Prénom</span><strong>{{ salarie.prenom ?: 'Non renseigné' }}</strong></div>
                                <div><span>Nom de naissance</span><strong>{{ salarie.nomNaissance ?: salarie.nom ?: 'Non renseigné' }}</strong></div>
                                <div><span>Nom d'usage</span><strong>{{ meta.nomUsage|default('—') }}</strong></div>
                                <div><span>Sexe</span><strong>{{ meta.sexe|default('Non renseigné') }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-cake" aria-hidden="true"></i>Naissance & nationalité</h2>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Date de naissance</span><strong>{{ salarie.dateNaissance ? salarie.dateNaissance|date('d/m/Y') : 'Non renseignée' }}</strong></div>
                                <div><span>Lieu de naissance</span><strong>{{ salarie.lieuNaissance ?: 'Non renseigné' }}</strong></div>
                                <div><span>Pays de naissance</span><strong>{{ salarie.paysNaissance ?: 'Non renseigné' }}</strong></div>
                                <div><span>Nationalité</span><strong>{{ salarie.nationalite ?: 'Non renseignée' }}</strong></div>
                                <div><span>Situation familiale</span><strong>{{ meta.situationFamiliale|default('Non renseignée') }}</strong></div>
                                <div><span>Enfants à charge</span><strong>{{ meta.nombreEnfants|default('0') }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-id" aria-hidden="true"></i>Numéros officiels</h2>
                            <div class="record-token-grid">
                                <div class="record-token">
                                    <span class="record-token__icon record-token__icon--success"><i class="ti ti-shield" aria-hidden="true"></i></span>
                                    <div><span>N° Sécurité Sociale</span><strong>{{ can_view_sensitive and salarie.numeroSecuriteSociale ? salarie.numeroSecuriteSociale : 'Accès restreint' }}</strong></div>
                                </div>
                                <div class="record-token">
                                    <span class="record-token__icon record-token__icon--info"><i class="ti ti-key" aria-hidden="true"></i></span>
                                    <div><span>Clé NIR</span><strong>{{ can_view_sensitive ? meta.cleNir|default('Non renseignée') : 'Accès restreint' }}</strong></div>
                                </div>
                            </div>
                            <div class="record-chip-row">
                                <span class="record-chip record-chip--success"><i class="ti ti-circle-check" aria-hidden="true"></i>{{ salarie.reconnaissanceHandicap ? 'Statut RQTH' : 'Aucun statut RQTH' }}</span>
                                <span class="record-chip"><i class="ti ti-home" aria-hidden="true"></i>{{ meta.residentEtranger|default(false) ? "Résident à l'étranger" : 'Résident en France' }}</span>
                            </div>
                        </article>
                    </div>

                    <aside class="record-stack">
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Informations rapides</h2>
                            <div class="record-list">
                                <div><span><i class="ti ti-cake" aria-hidden="true"></i>Âge</span><strong>{{ age_label }}</strong></div>
                                <div><span><i class="ti ti-calendar" aria-hidden="true"></i>Prochaine fête</span><strong class="text-warning">dans 28 j</strong></div>
                                <div><span><i class="ti ti-star" aria-hidden="true"></i>Anniv. entreprise</span><strong class="text-primary">{{ salarie.dateEntree ? salarie.dateEntree|date('d M') : '—' }}</strong></div>
                            </div>
                        </article>
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Documents d'identité</h2>
                            <div class="record-document-row">
                                <span class="record-token__icon record-token__icon--success"><i class="ti ti-id" aria-hidden="true"></i></span>
                                <div><strong>Carte d'identité</strong><span>Expire le 12/2028</span></div>
                                <span class="record-badge record-badge--success">Valide</span>
                            </div>
                            <button class="record-dashed-action" type="button"><i class="ti ti-plus" aria-hidden="true"></i>Ajouter un document</button>
                        </article>
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Dernières modifications</h2>
                            <div class="record-mini-timeline">
                                {% for item in history|slice(0, 3) %}
                                    <div>
                                        <i class="ti ti-pencil" aria-hidden="true"></i>
                                        <strong>{{ item.message ?: item.action }}</strong>
                                        <span>{{ item.createdAt|date('d/m/Y') }}</span>
                                    </div>
                                {% else %}
                                    <p class="record-empty">Aucune modification récente.</p>
                                {% endfor %}
                            </div>
                        </article>
                    </aside>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="professional" hidden>
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-briefcase" aria-hidden="true"></i>Poste & emploi</h2>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Intitulé du poste</span><strong>{{ job_label }}</strong></div>
                                <div><span>Code emploi (ROME)</span><strong>{{ salarie.classification ?: 'Non renseigné' }}</strong></div>
                                <div><span>Catégorie socio-pro.</span><strong><span class="record-badge record-badge--info">{{ category_label }}</span></strong></div>
                                <div><span>Département</span><strong>{{ service_label }}</strong></div>
                                <div><span>Service</span><strong>{{ service_label }}</strong></div>
                                <div><span>Établissement</span><strong>{{ salarie.etablissement ? salarie.etablissement.nom : 'Non renseigné' }}</strong></div>
                                <div><span>Manager direct</span><strong>{{ salarie.manager ?: 'Non renseigné' }}</strong></div>
                                <div><span>Lieu de travail</span><strong>{{ salarie.etablissement ? salarie.etablissement.nom : 'Hybride' }}</strong></div>
                                <div><span>Coefficient</span><strong>{{ salarie.coefficient ?: 'Non renseigné' }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__title"><i class="ti ti-file-description" aria-hidden="true"></i>Contrat de travail</h2>
                                {% if contract_bundle_active and first_contract %}
                                    <a href="{{ path('contract_show', {id: first_contract.id}) }}"><i class="ti ti-external-link" aria-hidden="true"></i>Voir contrat</a>
                                {% endif %}
                            </div>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Nature du contrat</span><strong><span class="record-badge record-badge--success">{{ contract_label }}</span></strong></div>
                                <div><span>Date d'embauche</span><strong>{{ salarie.dateEntree ? salarie.dateEntree|date('d/m/Y') : 'Non renseignée' }}</strong></div>
                                <div><span>Date fin de contrat</span><strong>{{ salarie.dateSortie ? salarie.dateSortie|date('d/m/Y') : '—' }}</strong></div>
                                <div><span>Fin de période d'essai</span><strong>—</strong></div>
                                <div><span>Motif de recrutement</span><strong>{{ salarie.motifSortie ?: 'Création de poste' }}</strong></div>
                                <div><span>Statut</span><strong><span class="record-badge record-badge--success">{{ status_label }}</span></strong></div>
                            </div>
                            <div class="record-soft-block">
                                <i class="ti ti-scale" aria-hidden="true"></i>
                                <div><span>Convention collective</span><strong>{{ salarie.conventionCollective ?: 'Non renseignée' }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-clock" aria-hidden="true"></i>Temps de travail</h2>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Quotité</span><strong><span class="record-badge record-badge--success">{{ salarie.typeTempsTravail ?: 'Temps plein' }}</span></strong></div>
                                <div><span>Durée hebdo.</span><strong>{{ salarie.tempsTravailHebdomadaire ? salarie.tempsTravailHebdomadaire|number_format(0, ',', ' ') ~ 'h / semaine' : 'Non renseignée' }}</strong></div>
                                <div><span>Modalité</span><strong>{{ salarie.typeCollaborateur ?: 'Forfait jours' }}</strong></div>
                                <div><span>Jours forfait / an</span><strong>218 jours</strong></div>
                                <div><span>Profil de planning</span><strong>Standard 5j/7</strong></div>
                                <div><span>Cycle de travail</span><strong>Semaine</strong></div>
                            </div>
                            <div class="record-progress">
                                <div><span>RTT consommés 2025</span><strong>8 / 12 jours</strong></div>
                                <span><i style="width: 66%"></i></span>
                            </div>
                        </article>

                        <article class="record-card">
                            <h2 class="record-card__title"><i class="ti ti-currency-euro" aria-hidden="true"></i>Rémunération</h2>
                            <div class="record-data-grid record-data-grid--3">
                                <div><span>Salaire brut mensuel</span><strong>Non renseigné</strong></div>
                                <div><span>Salaire annuel brut</span><strong>Non renseigné</strong></div>
                                <div><span>Mode de règlement</span><strong>{{ salarie.iban ? 'Virement bancaire' : 'Non renseigné' }}</strong></div>
                                <div><span>Périodicité</span><strong>Mensuel</strong></div>
                                <div><span>Dernier avenant</span><strong>{{ first_contract and first_contract.generatedAt ? first_contract.generatedAt|date('d/m/Y') : '—' }}</strong></div>
                                <div><span>Taux horaire</span><strong>Non renseigné</strong></div>
                            </div>
                            <div class="record-chip-row">
                                <span class="record-chip record-chip--success"><i class="ti ti-tools-kitchen-2" aria-hidden="true"></i>Tickets restaurant</span>
                                <span class="record-chip record-chip--info"><i class="ti ti-bus" aria-hidden="true"></i>Remboursement transport 50%</span>
                                <span class="record-chip record-chip--purple"><i class="ti ti-heart" aria-hidden="true"></i>Mutuelle entreprise</span>
                            </div>
                        </article>
                    </div>

                    <aside class="record-stack">
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Ancienneté & carrière</h2>
                            <div class="record-list">
                                <div><span><i class="ti ti-hourglass" aria-hidden="true"></i>Ancienneté</span><strong>{{ seniority_label }}</strong></div>
                                <div><span><i class="ti ti-award" aria-hidden="true"></i>Échelon</span><strong class="text-warning">{{ salarie.classification ?: 'Confirmé' }}</strong></div>
                                <div><span><i class="ti ti-trending-up" aria-hidden="true"></i>Dernier avancement</span><strong class="text-primary">Jan 2025</strong></div>
                                <div><span><i class="ti ti-star" aria-hidden="true"></i>Prochain entretien</span><strong>Mars 2026</strong></div>
                            </div>
                        </article>
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Équipe directe</h2>
                            <div class="record-team-list">
                                {% for report in direct_reports|slice(0, 4) %}
                                    <div>
                                        <span class="record-avatar record-avatar--sm">{{ (report.prenom|first ~ report.nom|first)|upper }}</span>
                                        <div><strong>{{ report }}</strong><span>{{ report.employeeJob ? report.employeeJob.nom : report.poste ?: 'Salarié' }}</span></div>
                                        <i class="ti ti-circle-filled text-success" aria-hidden="true"></i>
                                    </div>
                                {% else %}
                                    <p class="record-empty">Aucun collaborateur direct.</p>
                                {% endfor %}
                            </div>
                        </article>
                    </aside>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="contact" hidden>
                <div class="record-layout record-layout--sidebar">
                    <div class="record-stack">
                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__title"><i class="ti ti-map-pin" aria-hidden="true"></i>Adresse personnelle</h2>
                                {% if is_granted('EMPLOYEE_EDIT', salarie) %}<a href="{{ path('employee_edit', {id: salarie.id}) }}"><i class="ti ti-pencil" aria-hidden="true"></i>Modifier</a>{% endif %}
                            </div>
                            <div class="record-map">
                                <span><i class="ti ti-map-pin-filled" aria-hidden="true"></i></span>
                                <strong>{{ address_line }}{% if salarie.ville %}, {{ salarie.ville }}{% endif %}</strong>
                            </div>
                            <div class="record-data-grid record-data-grid--2">
                                <div><span>Adresse</span><strong>{{ address_line }}</strong></div>
                                <div><span>Code postal</span><strong>{{ salarie.codePostal ?: 'Non renseigné' }}</strong></div>
                                <div><span>Complément d'adresse</span><strong>{{ salarie.complementAdresse ?: '—' }}</strong></div>
                                <div><span>Département</span><strong>{{ meta.region|default('Non renseigné') }}</strong></div>
                                <div><span>Ville</span><strong>{{ salarie.ville ?: 'Non renseignée' }}</strong></div>
                                <div><span>Pays</span><strong>{{ salarie.pays ?: 'France' }}</strong></div>
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__title"><i class="ti ti-address-book" aria-hidden="true"></i>Contacts directs</h2>
                                {% if is_granted('EMPLOYEE_EDIT', salarie) %}<a href="{{ path('employee_edit', {id: salarie.id}) }}"><i class="ti ti-pencil" aria-hidden="true"></i>Modifier</a>{% endif %}
                            </div>
                            <div class="record-contact-grid">
                                <div class="record-contact">
                                    <i class="ti ti-phone" aria-hidden="true"></i>
                                    <div><span>Téléphone personnel</span><strong>{{ salarie.telephonePersonnel ?: salarie.telephone ?: 'Non renseigné' }}</strong></div>
                                </div>
                                <div class="record-contact">
                                    <i class="ti ti-phone-call" aria-hidden="true"></i>
                                    <div><span>Téléphone secondaire</span><strong>{{ salarie.telephoneProfessionnel ?: 'Non renseigné' }}</strong></div>
                                </div>
                                <div class="record-contact">
                                    <i class="ti ti-mail" aria-hidden="true"></i>
                                    <div><span>Email personnel</span><strong>{{ salarie.emailPersonnel ?: 'Non renseigné' }}</strong></div>
                                </div>
                                <div class="record-contact record-contact--success">
                                    <i class="ti ti-building" aria-hidden="true"></i>
                                    <div><span>Email professionnel</span><strong>{{ salarie.emailProfessionnel ?: 'Non renseigné' }}</strong></div>
                                </div>
                            </div>
                        </article>

                        <article class="record-card">
                            <div class="record-card__header">
                                <h2 class="record-card__title"><i class="ti ti-heart-handshake" aria-hidden="true"></i>Contact d'urgence</h2>
                                {% if is_granted('EMPLOYEE_EDIT', salarie) %}<a href="{{ path('employee_edit', {id: salarie.id}) }}"><i class="ti ti-pencil" aria-hidden="true"></i>Modifier</a>{% endif %}
                            </div>
                            {% if salarie.contactUrgenceNom or salarie.contactUrgenceTelephone %}
                                <div class="record-emergency">
                                    <span class="record-avatar record-avatar--md">{{ salarie.contactUrgenceNom ? salarie.contactUrgenceNom|first|upper : '!' }}</span>
                                    <div><strong>{{ salarie.contactUrgenceNom ?: 'Contact urgence' }}</strong><span>{{ salarie.contactUrgenceLien ?: 'Lien non renseigné' }}</span></div>
                                    <strong>{{ salarie.contactUrgenceTelephone ?: 'Téléphone non renseigné' }}</strong>
                                </div>
                            {% else %}
                                <button class="record-dashed-action" type="button"><i class="ti ti-plus" aria-hidden="true"></i>Ajouter un contact d'urgence</button>
                            {% endif %}
                        </article>
                    </div>

                    <aside class="record-stack">
                        <article class="record-card record-card--side">
                            <h2 class="record-card__subtitle">Complétude coordonnées</h2>
                            <div class="record-progress">
                                <div><span>Profil complété</span><strong class="text-success">{{ completion }}%</strong></div>
                                <span><i style="width: {{ completion }}%"></i></span>
                            </div>
                            <ul class="record-check-list">
                                <li class="{{ salarie.adresse ? 'is-done' : '' }}">Adresse personnelle</li>
                                <li class="{{ salarie.emailPersonnel ? 'is-done' : '' }}">Email personnel</li>
                                <li class="{{ primary_phone ? 'is-done' : '' }}">Téléphone principal</li>
                                <li class="{{ salarie.contactUrgenceNom ? 'is-done' : '' }}">Contact d'urgence</li>
                                <li class="{{ salarie.telephoneProfessionnel ? 'is-done' : '' }}">Téléphone secondaire</li>
                                <li class="{{ salarie.complementAdresse ? 'is-done' : '' }}">Adresse secondaire</li>
                            </ul>
                        </article>
                        <article class="record-card record-card--side">
                            <div class="record-card__header">
                                <h2 class="record-card__subtitle">Réseaux professionnels</h2>
                                <button type="button" class="record-icon-button"><i class="ti ti-plus" aria-hidden="true"></i></button>
                            </div>
                            <div class="record-social-link">
                                <i class="ti ti-brand-linkedin" aria-hidden="true"></i>
                                <div><span>LinkedIn</span><strong>linkedin.com/in/{{ salarie.prenom|lower }}{{ salarie.nom|lower }}</strong></div>
                            </div>
                        </article>
                    </aside>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="documents" hidden>
                <div class="record-stack record-stack--narrow">
                    <article class="record-dropzone">
                        <i class="ti ti-cloud-upload" aria-hidden="true"></i>
                        <strong>Déposer un document</strong>
                        <span>PDF, Word, Excel, Images — max 20 Mo</span>
                        <button type="button" class="btn btn-success btn-sm"><i class="ti ti-plus" aria-hidden="true"></i>Ajouter un document</button>
                    </article>

                    <article class="record-card">
                        <div class="record-card__header">
                            <h2 class="record-card__title"><i class="ti ti-file-text" aria-hidden="true"></i>Contrats & avenants</h2>
                            <span class="record-badge record-badge--success">{{ contracts|length }} fichier{{ contracts|length > 1 ? 's' : '' }}</span>
                        </div>
                        <div class="record-document-list">
                            {% for contract in contracts %}
                                <a class="record-document-row" href="{{ path('contract_show', {id: contract.id}) }}">
                                    <span class="record-token__icon record-token__icon--danger"><i class="ti ti-file-type-pdf" aria-hidden="true"></i></span>
                                    <div><strong>{{ contract.reference ?: contract.typeContrat ~ ' - ' ~ employee_name }}</strong><span>Ajouté le {{ contract.generatedAt ? contract.generatedAt|date('d/m/Y') : (contract.dateDebut ? contract.dateDebut|date('d/m/Y') : '—') }}</span></div>
                                    <span class="record-badge {{ contract.signedAt ? 'record-badge--success' : 'record-badge--warning' }}">{{ contract.signedAt ? 'Signé' : 'En attente' }}</span>
                                </a>
                            {% else %}
                                <p class="record-empty">Aucun contrat disponible.</p>
                            {% endfor %}
                        </div>
                    </article>

                    <article class="record-card">
                        <div class="record-card__header">
                            <h2 class="record-card__title"><i class="ti ti-receipt" aria-hidden="true"></i>Fiches de paie</h2>
                            <span class="record-badge record-badge--success">0 fichier</span>
                        </div>
                        <p class="record-empty">Les fiches de paie seront affichées ici lorsqu'elles seront disponibles.</p>
                    </article>

                    <article class="record-card">
                        <div class="record-card__header">
                            <h2 class="record-card__title"><i class="ti ti-folder" aria-hidden="true"></i>Autres documents</h2>
                            <span class="record-badge">0 fichier</span>
                        </div>
                        <p class="record-empty">Aucun autre document pour le moment.</p>
                    </article>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="activity" hidden>
                <div class="record-layout record-layout--activity">
                    <div class="record-metric-grid">
                        <div class="record-metric"><i class="ti ti-clock-hour-4" aria-hidden="true"></i><strong>168h</strong><span>Heures ce mois</span><em>+2%</em></div>
                        <div class="record-metric record-metric--warning"><i class="ti ti-hourglass" aria-hidden="true"></i><strong>3h</strong><span>Heures sup.</span><em>3h</em></div>
                        <div class="record-metric record-metric--info"><i class="ti ti-beach" aria-hidden="true"></i><strong>12.5j</strong><span>Congés restants</span><em>Solde</em></div>
                        <div class="record-metric record-metric--danger"><i class="ti ti-alert-triangle" aria-hidden="true"></i><strong>2</strong><span>Absences injustifiées</span><em>-1</em></div>
                    </div>
                    <article class="record-card record-card--side">
                        <h2 class="record-card__title"><i class="ti ti-beach" aria-hidden="true"></i>Compteurs congés</h2>
                        <div class="record-progress">
                            <div><span>Congés payés</span><strong>12.5 / 25j</strong></div>
                            <span><i style="width: 50%"></i></span>
                        </div>
                        <div class="record-progress">
                            <div><span>RTT</span><strong>4 / 10j</strong></div>
                            <span><i style="width: 40%"></i></span>
                        </div>
                    </article>
                </div>

                <div class="record-stack record-stack--narrow">
                    <article class="record-card record-card--large">
                        <div class="record-card__header">
                            <div>
                                <h2 class="record-card__title"><i class="ti ti-chart-bar" aria-hidden="true"></i>Heures travaillées</h2>
                                <span class="record-muted">6 derniers mois</span>
                            </div>
                            <div class="record-segmented">
                                <button type="button" class="is-active">Mois</button>
                                <button type="button">Semaine</button>
                            </div>
                        </div>
                    </article>

                    <article class="record-card">
                        <div class="record-card__header">
                            <h2 class="record-card__title"><i class="ti ti-timeline" aria-hidden="true"></i>Activité récente</h2>
                            <div class="record-segmented">
                                <button type="button" class="is-active">Tout</button>
                                <button type="button">Congés</button>
                                <button type="button">Pointage</button>
                                <button type="button">Admin.</button>
                            </div>
                        </div>
                        <div class="record-activity-list">
                            {% for item in history|slice(0, 6) %}
                                <div class="record-activity record-activity--success">
                                    <i class="ti ti-circle-check" aria-hidden="true"></i>
                                    <div><strong>{{ item.message ?: item.action }}</strong><span>{{ item.createdAt|date('d/m/Y H:i') }}</span></div>
                                    <time>{{ item.createdAt|date('d M') }}</time>
                                </div>
                            {% else %}
                                <div class="record-activity record-activity--success">
                                    <i class="ti ti-circle-check" aria-hidden="true"></i>
                                    <div><strong>Fiche créée</strong><span>Dossier salarié initialisé</span></div>
                                    <time>{{ salarie.dateEntree ? salarie.dateEntree|date('d M') : 'Aujourd’hui' }}</time>
                                </div>
                            {% endfor %}
                        </div>
                        <button class="record-dashed-action" type="button"><i class="ti ti-chevron-down" aria-hidden="true"></i>Voir plus d'activité</button>
                    </article>
                </div>
            </section>
        </div>
    </div>
{% endblock %}