{% extends "base.html" %} {% block title %}Calendrier des parties • Versailles Airsoft{% endblock %} {% block content %}
<div
  x-data="{ 
    modalOpen: false, 
    selectedDate: '' 
  }"
  @keydown.escape.window="modalOpen = false"
  class="space-y-5"
>
  <!-- Bannière Opérationnelle Épurée -->
  <div
    class="rounded-2xl bg-navy-surface border border-navy-border p-5 sm:p-6"
  >
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
      <div>
        <h1
          class="font-crest font-extrabold text-2xl sm:text-3xl text-slate-100 tracking-wide"
        >
          CALENDRIER DES PARTIES
        </h1>
        <p class="text-xs sm:text-sm text-slate-300 max-w-2xl mt-1 leading-relaxed font-sans">
          Déclarez vos disponibilités par créneau. Dès que
          <strong class="text-gold-400 font-semibold">8 opérateurs</strong>
          sont inscrits, la session est confirmée et transmise sur Discord.
        </p>
      </div>

      <a
        href="/parties"
        class="self-start sm:self-auto min-h-[44px] px-4 py-2.5 rounded-xl font-tactical font-semibold text-xs tracking-wider text-slate-300 hover:text-white bg-navy-card hover:bg-navy-hover border border-navy-border hover:border-gold-500/40 transition-colors flex items-center gap-2 shrink-0"
      >
        <i class="fa-solid fa-shield-halved text-gold-500 text-xs"></i>
        <span>Voir les parties prévues</span>
      </a>
    </div>
  </div>

  <!-- Barre d'outils du calendrier : Navigation Mois & Légende -->
  <div
    class="flex flex-col md:flex-row md:items-center justify-between gap-3 bg-navy-surface border border-navy-border rounded-2xl p-3 sm:p-4"
  >
    <!-- Navigation des mois -->
    <div class="flex items-center justify-between sm:justify-start gap-2 w-full md:w-auto">
      <div
        class="flex items-center bg-navy-card border border-navy-border rounded-xl p-1 flex-1 sm:flex-none justify-between sm:justify-start"
      >
        <a
          href="/?year={{ prev_year }}&month={{ prev_month }}"
          class="min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg hover:bg-navy-hover text-slate-400 hover:text-gold-400 transition-colors"
          title="Mois précédent"
          aria-label="Mois précédent"
        >
          <i class="fa-solid fa-chevron-left text-xs"></i>
        </a>
        <span
          class="px-3 font-crest font-bold text-sm sm:text-base text-gold-400 min-w-[140px] sm:min-w-[170px] text-center tracking-wider"
        >
          {{ current_month_name }} {{ current_year }}
        </span>
        <a
          href="/?year={{ next_year }}&month={{ next_month }}"
          class="min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg hover:bg-navy-hover text-slate-400 hover:text-gold-400 transition-colors"
          title="Mois suivant"
          aria-label="Mois suivant"
        >
          <i class="fa-solid fa-chevron-right text-xs"></i>
        </a>
      </div>

      <a
        href="/"
        class="min-h-[44px] px-3.5 py-2 rounded-xl text-xs font-tactical font-semibold bg-navy-card hover:bg-navy-hover border border-navy-border hover:border-gold-500/40 text-slate-300 transition-colors flex items-center gap-1.5 shrink-0"
      >
        <i class="fa-regular fa-calendar-check text-gold-400"></i>
        <span>Aujourd'hui</span>
      </a>
    </div>

    <!-- Légende Épurée -->
    <div
      class="flex flex-wrap items-center justify-center sm:justify-start gap-3 text-xs text-slate-300 font-tactical pt-1 md:pt-0 border-t md:border-t-0 border-navy-border/60"
    >
      <div class="flex items-center gap-1.5">
        <span
          class="w-3.5 h-3.5 rounded-full bg-gold-500/20 border border-gold-500 flex items-center justify-center text-gold-400 text-[9px]"
        >
          <i class="fa-solid fa-check"></i>
        </span>
        <span>Inscrit</span>
      </div>
      <div class="flex items-center gap-1.5">
        <span
          class="w-3.5 h-3.5 rounded-full bg-gold-500 text-navy-bg flex items-center justify-center text-[9px] font-bold"
        >
          <i class="fa-solid fa-shield-halved text-[8px]"></i>
        </span>
        <span class="text-gold-400 font-semibold">Validée (8+)</span>
      </div>
      <div class="flex items-center gap-1.5">
        <span
          class="w-3 h-3 rounded-sm bg-navy-card border border-navy-border"
        ></span>
        <span class="text-slate-400">En attente</span>
      </div>
    </div>
  </div>

  <!-- Grille du Calendrier -->
  <div
    id="calendar-grid-container"
    class="bg-navy-surface border border-navy-border rounded-2xl p-2 sm:p-4"
  >
    <!-- En-tête des jours de la semaine -->
    <div
      class="grid grid-cols-7 gap-1 sm:gap-2 mb-2 text-center text-[10px] sm:text-xs font-crest font-bold text-slate-400 tracking-wider"
    >
      <div class="py-1.5 bg-navy-card rounded-lg border border-navy-border">
        <span class="hidden sm:inline">LUN</span>
        <span class="sm:hidden">L</span>
      </div>
      <div class="py-1.5 bg-navy-card rounded-lg border border-navy-border">
        <span class="hidden sm:inline">MAR</span>
        <span class="sm:hidden">M</span>
      </div>
      <div class="py-1.5 bg-navy-card rounded-lg border border-navy-border">
        <span class="hidden sm:inline">MER</span>
        <span class="sm:hidden">M</span>
      </div>
      <div class="py-1.5 bg-navy-card rounded-lg border border-navy-border">
        <span class="hidden sm:inline">JEU</span>
        <span class="sm:hidden">J</span>
      </div>
      <div class="py-1.5 bg-navy-card rounded-lg border border-navy-border">
        <span class="hidden sm:inline">VEN</span>
        <span class="sm:hidden">V</span>
      </div>
      <div class="py-1.5 bg-navy-card text-gold-400 rounded-lg border border-gold-500/30">
        <span class="hidden sm:inline">SAM</span>
        <span class="sm:hidden">S</span>
      </div>
      <div class="py-1.5 bg-navy-card text-gold-400 rounded-lg border border-gold-500/30">
        <span class="hidden sm:inline">DIM</span>
        <span class="sm:hidden">D</span>
      </div>
    </div>

    <!-- Cases des jours -->
    <div class="grid grid-cols-7 gap-1 sm:gap-2">
      {% for day_info in calendar_days %} {% include "partials/day_cell.html" %}
      {% endfor %}
    </div>
  </div>

  <!-- Modale Alpine.js : Bottom Sheet sur mobile (< 640px) / Modale centrée sur desktop -->
  <div
    x-show="modalOpen"
    x-cloak
    class="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
    aria-labelledby="modal-title"
    role="dialog"
    aria-modal="true"
  >
    <!-- Arrière-plan sombre mat -->
    <div
      x-show="modalOpen"
      x-transition:enter="ease-out duration-200"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in duration-150"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      class="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity"
      @click="modalOpen = false;"
    ></div>

    <!-- Conteneur Bottom Sheet mobile & Centré Desktop -->
    <div
      x-show="modalOpen"
      x-transition:enter="ease-out duration-250"
      x-transition:enter-start="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave="ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave-end="opacity-0 translate-y-full sm:translate-y-0 sm:scale-95"
      class="relative w-full sm:max-w-xl bg-navy-surface border-t sm:border border-navy-border sm:border-gold-500/30 rounded-t-2xl sm:rounded-2xl max-h-[85vh] sm:max-h-[90vh] flex flex-col p-4 sm:p-6 shadow-2xl z-10 bottom-sheet-content"
      @click.stop
    >
      <!-- Barre de tirage tactile pour mobile (Drag handle) -->
      <div class="bottom-sheet-handle sm:hidden"></div>

      <!-- Bouton de fermeture tactile (min 44x44px) -->
      <button
        @click="modalOpen = false;"
        type="button"
        class="absolute top-3 right-3 sm:top-4 sm:right-4 min-h-[44px] min-w-[44px] text-slate-400 hover:text-white flex items-center justify-center rounded-xl bg-navy-card hover:bg-navy-hover border border-navy-border transition-colors z-20"
        aria-label="Fermer la fenêtre"
      >
        <i class="fa-solid fa-xmark text-base"></i>
      </button>

      <!-- Conteneur HTMX défilable pour les détails de la journée -->
      <div id="modal-content" class="overflow-y-auto flex-1 pr-0.5">
        <div
          class="py-12 flex flex-col items-center justify-center text-center space-y-3"
        >
          <i
            class="fa-solid fa-circle-notch fa-spin text-2xl text-gold-500"
          ></i>
          <p class="text-xs text-slate-400 font-tactical">
            Chargement des créneaux...
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}