{% extends "base.html" %}
{% block title %}Fermetures — GMAO Collège{% endblock %}

{% block content %}
<div class="py-2 py-md-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0 h5"><i class="bi bi-building-exclamation"></i> Fermetures</h2>
    <div class="d-flex gap-1">
      <a href="{{ url_for('planning.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
      <a href="{{ url_for('planning.closure_add') }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline">Ajouter</span></a>
    </div>
  </div>

  <!-- À venir -->
  {% if upcoming %}
  <h6 class="text-muted mb-2"><i class="bi bi-calendar-event"></i> À venir</h6>
  {% for c in upcoming %}
  <div class="card border-0 shadow-sm mb-2">
    <div class="card-body py-2 px-3">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <strong>{{ c.label }}</strong>
          <div class="small text-muted">{{ c.start_date|date_fmt }} → {{ c.end_date|date_fmt }} <span class="badge bg-light text-dark">{{ c.duration_days }}j</span></div>
        </div>
        <div class="d-flex gap-1 align-items-center">
          <span class="badge {% if c.type == 'vacances_scolaires' %}bg-warning text-dark{% elif c.type == 'jour_ferie' %}bg-info{% else %}bg-secondary{% endif %}" style="font-size:0.7rem;">{{ c.type_label }}</span>
          {% if c.zone %}<span class="badge bg-primary" style="font-size:0.6rem;">Zone {{ c.zone }}</span>{% endif %}
        </div>
      </div>
      {% if c.is_exception %}<small class="text-warning">⚠ Exception (collège ouvert)</small>{% endif %}
      {% if c.notes %}<small class="text-muted d-block mt-1">{{ c.notes }}</small>{% endif %}
      <form method="POST" action="{{ url_for('planning.closure_delete', id=c.id) }}" class="mt-1" onsubmit="return confirm('Supprimer cette fermeture ?')">
        <button type="submit" class="btn btn-sm btn-outline-danger py-0" style="font-size:0.7rem;"><i class="bi bi-trash"></i></button>
      </form>
    </div>
  </div>
  {% endfor %}
  {% endif %}

  <!-- Passées -->
  {% if past %}
  <h6 class="text-muted mb-2 mt-3"><i class="bi bi-calendar-check"></i> Passées</h6>
  {% for c in past %}
  <div class="card border-0 shadow-sm mb-1 opacity-50">
    <div class="card-body py-1 px-3">
      <div class="d-flex justify-content-between">
        <small>{{ c.label }}</small>
        <small class="text-muted">{{ c.start_date|date_fmt }} → {{ c.end_date|date_fmt }}</small>
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}

  {% if not upcoming and not past %}
  <div class="text-center py-5 text-muted">
    <i class="bi bi-calendar-x" style="font-size:2rem;"></i>
    <p class="mt-2">Aucune fermeture enregistrée</p>
  </div>
  {% endif %}
</div>
{% endblock %}