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

{% block title %}Mes entretiens{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
    {% set next = next_interview %}
    <div class="interview-my" data-controller="interview-my">
        <header class="interview-my__heading">
            <div>
                <nav class="interview-my__breadcrumb" aria-label="Fil d’Ariane">
                    <span>Mon espace</span><i class="ti ti-chevron-right" aria-hidden="true"></i><strong>Mes entretiens</strong>
                </nav>
                <h1>Mes entretiens</h1>
                <p>Gérez vos échanges, préparez vos points carrière et suivez vos objectifs.</p>
            </div>
            <button class="interview-my__help-button" type="button" data-action="interview-my#showHelp">
                <i class="ti ti-help-circle-filled" aria-hidden="true"></i>Aide à la préparation
            </button>
        </header>

        <section class="interview-my__kpis" aria-label="Synthèse de mes entretiens">
            <article class="interview-my-kpi interview-my-kpi--next">
                <span>Prochain entretien</span>
                {% if next %}
                    <strong>{{ next.type.nom }}</strong>
                    <small><i class="ti ti-calendar-check" aria-hidden="true"></i>{{ next.scheduledAt|date('d/m/Y') }}</small>
                {% else %}
                    <strong>Aucun entretien planifié</strong><small>—</small>
                {% endif %}
            </article>
            <article class="interview-my-kpi">
                <span>Préparation à compléter</span>
                <div><strong class="interview-my-kpi__number interview-my-kpi__number--warning">{{ preparations|length }}</strong>
                    {% if urgent_preparation_count > 0 %}<em>Urgent</em>{% endif %}
                </div>
            </article>
            <article class="interview-my-kpi">
                <span>Comptes rendus à valider</span>
                <div><strong class="interview-my-kpi__number">{{ reports_to_validate|length }}</strong><i class="ti ti-file-pencil" aria-hidden="true"></i></div>
            </article>
            <article class="interview-my-kpi">
                <span>Objectifs actifs</span>
                <div><strong class="interview-my-kpi__number interview-my-kpi__number--success">{{ active_objectives|length }}</strong><i class="ti ti-target-arrow" aria-hidden="true"></i></div>
            </article>
        </section>

        <div class="interview-my__layout">
            <main class="interview-my__main">
                <div class="interview-my__tabs" role="tablist" aria-label="Catégories d’entretiens">
                    <button type="button" role="tab" data-interview-my-target="tab" data-action="interview-my#select" data-tab="prepare">À préparer ({{ preparations|length }})</button>
                    <button type="button" role="tab" data-interview-my-target="tab" data-action="interview-my#select" data-tab="upcoming">À venir ({{ upcoming|length }})</button>
                    <button type="button" role="tab" data-interview-my-target="tab" data-action="interview-my#select" data-tab="reports">Comptes rendus ({{ reports_to_validate|length }})</button>
                    <button type="button" role="tab" data-interview-my-target="tab" data-action="interview-my#select" data-tab="objectives">Objectifs ({{ active_objectives|length }})</button>
                    <button type="button" role="tab" data-interview-my-target="tab" data-action="interview-my#select" data-tab="history">Historique</button>
                </div>

                <section class="interview-my__panel" role="tabpanel" data-interview-my-target="panel" data-panel="prepare">
                    {% for interview in preparations %}
                        {% include '@Interview/interview/_my_interview_card.html.twig' with {interview: interview, context: 'prepare', progress: preparation_progress[interview.id]|default(0)} only %}
                    {% else %}
                        {% include '@Interview/interview/_my_empty.html.twig' with {icon: 'ti-circle-check', title: 'Toutes vos préparations sont à jour', text: 'Vous n’avez aucun entretien à préparer pour le moment.'} only %}
                    {% endfor %}
                </section>
                <section class="interview-my__panel" role="tabpanel" data-interview-my-target="panel" data-panel="upcoming" hidden>
                    {% for interview in upcoming %}
                        {% include '@Interview/interview/_my_interview_card.html.twig' with {interview: interview, context: 'upcoming'} only %}
                    {% else %}
                        {% include '@Interview/interview/_my_empty.html.twig' with {icon: 'ti-calendar-off', title: 'Aucun entretien à venir', text: 'Vos prochains rendez-vous apparaîtront ici.'} only %}
                    {% endfor %}
                </section>
                <section class="interview-my__panel" role="tabpanel" data-interview-my-target="panel" data-panel="reports" hidden>
                    {% for interview in reports_to_validate %}
                        {% include '@Interview/interview/_my_interview_card.html.twig' with {interview: interview, context: 'report'} only %}
                    {% else %}
                        {% include '@Interview/interview/_my_empty.html.twig' with {icon: 'ti-file-check', title: 'Aucun compte rendu à valider', text: 'Les comptes rendus nécessitant votre validation apparaîtront ici.'} only %}
                    {% endfor %}
                </section>
                <section class="interview-my__panel" role="tabpanel" data-interview-my-target="panel" data-panel="objectives" hidden>
                    {% for objective in active_objectives %}
                        <article class="interview-my-objective">
                            <div class="interview-my-objective__icon"><i class="ti ti-target-arrow" aria-hidden="true"></i></div>
                            <div class="interview-my-objective__body">
                                <div class="interview-my-objective__head"><div><h3>{{ objective.title }}</h3><p>{{ objective.targetDate ? 'Échéance le ' ~ objective.targetDate|date('d/m/Y') : 'Sans date d’échéance' }}</p></div><strong>{{ objective.progress }}%</strong></div>
                                <div class="interview-my-progress"><span style="width: {{ objective.progress }}%"></span></div>
                                <a href="{{ path('interview_objective_show', {id: objective.id}) }}">Voir l’objectif <i class="ti ti-arrow-right" aria-hidden="true"></i></a>
                            </div>
                        </article>
                    {% else %}
                        {% include '@Interview/interview/_my_empty.html.twig' with {icon: 'ti-target-off', title: 'Aucun objectif actif', text: 'Les objectifs définis lors de vos entretiens apparaîtront ici.'} only %}
                    {% endfor %}
                </section>
                <section class="interview-my__panel" role="tabpanel" data-interview-my-target="panel" data-panel="history" hidden>
                    {% for interview in history %}
                        {% include '@Interview/interview/_my_interview_card.html.twig' with {interview: interview, context: 'history'} only %}
                    {% else %}
                        {% include '@Interview/interview/_my_empty.html.twig' with {icon: 'ti-history', title: 'Votre historique est vide', text: 'Vos entretiens terminés apparaîtront ici.'} only %}
                    {% endfor %}
                </section>
            </main>

            <aside class="interview-my__aside">
                <section class="interview-my-knowledge">
                    <div class="interview-my-knowledge__icon"><i class="ti ti-bulb-filled" aria-hidden="true"></i></div>
                    <h2>À savoir</h2>
                    <p>{{ next and next.type.description ? next.type.description : 'L’entretien professionnel porte sur votre évolution, vos compétences et vos besoins de formation.' }}</p>
                    <blockquote>« Il est distinct de l’évaluation de performance annuelle. »</blockquote>
                    <button type="button" data-action="interview-my#showHelp">Consulter le guide salarié <i class="ti ti-arrow-right" aria-hidden="true"></i></button>
                </section>

                <section class="interview-my-deadlines">
                    <h2><i class="ti ti-timeline-event" aria-hidden="true"></i>Vos échéances</h2>
                    {% if next %}
                        <ol>
                            <li class="{{ next.managerPreparedAt ? 'is-done' : '' }}"><span>{% if next.managerPreparedAt %}<i class="ti ti-check"></i>{% else %}1{% endif %}</span><div><strong>Préparation manager</strong><small>{{ next.managerPreparedAt ? 'Terminée' : 'À venir' }}</small></div></li>
                            <li><span>2</span><div><strong>Date de l’entretien</strong><small>{{ next.scheduledAt|date('d/m/Y') }}</small></div></li>
                            <li><span>3</span><div><strong>Signature compte rendu</strong><small>Délai indicatif : +15 jours</small></div></li>
                        </ol>
                    {% else %}
                        <p class="interview-my-deadlines__empty">Aucune échéance planifiée.</p>
                    {% endif %}
                </section>

                <section class="interview-my-support" data-interview-my-target="help">
                    <h2>Besoin d’aide ?</h2>
                    <p>Contactez votre responsable RH pour toute question relative à vos entretiens.</p>
                    {% if support_email %}<a href="mailto:{{ support_email }}">Ouvrir le centre d’aide</a>{% else %}<span>Rapprochez-vous de votre responsable RH</span>{% endif %}
                </section>
            </aside>
        </div>
    </div>
{% endblock %}