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

{% block title %}{{ schedule.title }}{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
<div class="data-page planning-schedule-detail">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a href="{{ path('planning_dashboard') }}">Plannings</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span>{{ schedule.title }}</span>
            </nav>
            <h1>{{ schedule.title }}</h1>
            <p>{{ schedule.periodStart|date('d/m/Y') }} - {{ schedule.periodEnd|date('d/m/Y') }} · version {{ schedule.version }}</p>
        </div>
        <div class="data-page__actions">
            {% include '@Planning/planning/_status_badge.html.twig' with {status: schedule.status} %}
            <a class="data-button data-button--secondary" href="{{ path('planning_schedule_edit', {id: schedule.id}) }}">
                <i class="ti ti-pencil" aria-hidden="true"></i> Modifier
            </a>
            <a class="data-button data-button--primary" href="{{ path('planning_shift_new', {schedule: schedule.id}) }}">
                <i class="ti ti-plus" aria-hidden="true"></i> Shift libre
            </a>
        </div>
    </div>

    <section class="planning-card planning-schedule-toolbar">
        <div>
            <strong>{{ schedule.etablissement ?: 'Tous les établissements' }}</strong>
            <span>{{ grid.employees|length }} salariés · {{ shifts|length }} shifts · {{ conflicts|length }} conflits ouverts</span>
        </div>
        <div class="planning-schedule-toolbar__actions">
            <form method="post" action="{{ path('planning_schedule_publish', {id: schedule.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('planning_schedule_publish_' ~ schedule.id) }}">
                <button class="data-button data-button--primary">Publier</button>
            </form>
            <form method="post" action="{{ path('planning_schedule_detect_conflicts', {id: schedule.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('planning_schedule_detect_conflicts_' ~ schedule.id) }}">
                <button class="data-button data-button--secondary">Détecter les conflits</button>
            </form>
            <form method="post" action="{{ path('planning_schedule_lock', {id: schedule.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('planning_schedule_lock_' ~ schedule.id) }}">
                <button class="data-button data-button--secondary">Verrouiller</button>
            </form>
        </div>
    </section>

    <turbo-frame id="planning-grid-{{ schedule.id }}">
        {% include '@Planning/planning/_week_grid.html.twig' with {schedule: schedule, grid: grid} %}
    </turbo-frame>

    {% include '@Planning/planning/_unassigned_shifts.html.twig' with {schedule: schedule, grid: grid} %}

    <div class="planning-grid planning-grid--2 mt-3">
        <section class="planning-card">
            <div class="planning-card__header"><h2 class="planning-card__title">Conflits ouverts</h2></div>
            {% for conflict in conflicts %}
                <article class="planning-item"><div><strong>{{ conflict.type }}</strong><div class="planning-item__meta">{{ conflict.message }}</div></div>{% include '@Planning/planning/_status_badge.html.twig' with {status: conflict.status} %}</article>
            {% else %}
                <p class="text-muted m-0 p-3">Aucun conflit ouvert.</p>
            {% endfor %}
        </section>
        <section class="planning-card">
            <div class="planning-card__header"><h2 class="planning-card__title">Historique</h2></div>
            {% include '@Planning/planning/_history.html.twig' with {history: history} %}
        </section>
    </div>
</div>
{% endblock %}