{% extends "base.html" %} {% block title %}Calendrier des parties • Versailles
Airsoft{% endblock %} {% block content %}
<div
  x-data="{ 
    modalOpen: false, 
    selectedDate: '',
    rulesModalOpen: false 
}"
  @keydown.escape.window="modalOpen = false; rulesModalOpen = false"
  class="space-y-6"
>
  <!-- Bannière Opérationnelle Royale & Statistiques Clés -->
  <div
    class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-navy-surface via-navy-card to-navy-accent/50 border border-gold-500/30 p-6 sm:p-7 shadow-[0_10px_30px_rgba(0,0,0,0.5)]"
  >
    <!-- Motif Fleur-de-Lys en filigrane discret -->
    <div
      class="absolute -right-6 -bottom-8 opacity-5 text-gold-400 text-9xl pointer-events-none select-none font-serif"
    >
      ⚜
    </div>

    <div
      class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6"
    >
      <div>
        <h1
          class="font-crest font-extrabold text-2xl sm:text-3xl text-slate-100 tracking-wide"
        >
          CALENDRIER DES PARTIES
        </h1>
        <p class="text-sm text-slate-300 max-w-2xl mt-1.5 leading-relaxed">
          Posez vos disponibilités par créneau. Dès que
          <strong class="text-gold-400 font-semibold">8 opérateurs</strong>
          ont répondu présent, la partie est confirmée et diffusée sur le
          Discord !
        </p>
      </div>
    </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 sm:gap-4 bg-navy-surface/90 border border-navy-border rounded-2xl p-3 sm:p-4 shadow-lg"
  >
    <!-- Navigation des mois -->
    <div class="flex items-center justify-between sm:justify-start gap-2 sm:gap-3 w-full md:w-auto">
      <div
        class="flex items-center bg-navy-bg border border-navy-border rounded-xl p-1 shadow-inner flex-1 sm:flex-none justify-between sm:justify-start"
      >
        <a
          href="/?year={{ prev_year }}&month={{ prev_month }}"
          class="p-1.5 sm:p-2 rounded-lg hover:bg-navy-card hover:text-gold-400 text-slate-400 transition-colors"
          title="Mois précédent"
        >
          <i class="fa-solid fa-chevron-left text-xs sm:text-sm"></i>
        </a>
        <span
          class="px-2 sm:px-4 font-crest font-bold text-sm sm:text-lg text-gold-300 min-w-[130px] sm:min-w-[180px] text-center tracking-wide"
        >
          {{ current_month_name }} {{ current_year }}
        </span>
        <a
          href="/?year={{ next_year }}&month={{ next_month }}"
          class="p-1.5 sm:p-2 rounded-lg hover:bg-navy-card hover:text-gold-400 text-slate-400 transition-colors"
          title="Mois suivant"
        >
          <i class="fa-solid fa-chevron-right text-xs sm:text-sm"></i>
        </a>
      </div>

      <a
        href="/"
        class="px-3 py-2 rounded-xl text-xs font-tactical font-bold bg-navy-bg hover:bg-navy-card 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 class="hidden xs:inline">Aujourd'hui</span>
      </a>
    </div>

    <!-- Légende Tactique Royale -->
    <div
      class="flex flex-wrap items-center justify-center sm:justify-start gap-2.5 sm:gap-3.5 text-[11px] sm:text-xs text-slate-300 font-tactical pt-1 md:pt-0 border-t md:border-t-0 border-navy-border/50"
    >
      <div class="flex items-center gap-1.5">
        <span
          class="w-3 h-3 sm:w-3.5 sm:h-3.5 rounded-full bg-gold-500/20 border border-gold-400 flex items-center justify-center text-gold-400 text-[8px] sm: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 h-3 sm:w-3.5 sm:h-3.5 rounded-full bg-amber-500/20 border border-amber-400 flex items-center justify-center text-amber-300 text-[8px] sm:text-[9px] shadow-[0_0_8px_rgba(245,158,11,0.3)]"
        >
          <i class="fa-solid fa-shield-halved"></i>
        </span>
        <span class="text-gold-300 font-semibold">Validée (8+)</span>
      </div>
      <div class="flex items-center gap-1.5">
        <span
          class="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-sm bg-navy-bg 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/60 border border-navy-border/90 rounded-2xl p-1.5 sm:p-4 shadow-2xl backdrop-blur-md"
  >
    <!-- En-tête des jours de la semaine -->
    <div
      class="grid grid-cols-7 gap-1 sm:gap-2.5 mb-1.5 sm:mb-2.5 text-center text-[10px] sm:text-xs font-crest font-bold text-slate-400 tracking-wider"
    >
      <div
        class="py-1.5 sm:py-2.5 bg-navy-card/50 rounded-lg sm:rounded-xl border border-navy-border/40"
      >
        <span class="hidden sm:inline">LUN</span>
        <span class="sm:hidden">L</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-navy-card/50 rounded-lg sm:rounded-xl border border-navy-border/40"
      >
        <span class="hidden sm:inline">MAR</span>
        <span class="sm:hidden">M</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-navy-card/50 rounded-lg sm:rounded-xl border border-navy-border/40"
      >
        <span class="hidden sm:inline">MER</span>
        <span class="sm:hidden">M</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-navy-card/50 rounded-lg sm:rounded-xl border border-navy-border/40"
      >
        <span class="hidden sm:inline">JEU</span>
        <span class="sm:hidden">J</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-navy-card/50 rounded-lg sm:rounded-xl border border-navy-border/40"
      >
        <span class="hidden sm:inline">VEN</span>
        <span class="sm:hidden">V</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-gold-500/10 text-gold-300 rounded-lg sm:rounded-xl border border-gold-500/30"
      >
        <span class="hidden sm:inline">SAM</span>
        <span class="sm:hidden">S</span>
      </div>
      <div
        class="py-1.5 sm:py-2.5 bg-gold-500/10 text-gold-300 rounded-lg sm:rounded-xl 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.5">
      {% for day_info in calendar_days %} {% include "partials/day_cell.html" %}
      {% endfor %}
    </div>
  </div>

  <!-- Modale Alpine.js de sélection des disponibilités pour le jour cliqué -->
  <div
    x-show="modalOpen"
    x-cloak
    class="fixed inset-0 z-50 overflow-y-auto"
    aria-labelledby="modal-title"
    role="dialog"
    aria-modal="true"
  >
    <!-- Arrière-plan sombre avec flou -->
    <div
      x-show="modalOpen"
      x-transition:enter="ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      class="fixed inset-0 bg-black/85 backdrop-blur-md transition-opacity"
      @click="modalOpen = false; window.location.reload();"
    ></div>

    <div
      class="flex min-h-full items-center justify-center p-2.5 sm:p-4 text-center"
    >
      <div
        x-show="modalOpen"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 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-4 sm:translate-y-0 sm:scale-95"
        class="relative transform overflow-hidden rounded-2xl bg-navy-surface border-2 border-gold-500/40 text-left shadow-[0_0_40px_rgba(0,0,0,0.8)] transition-all my-4 sm:my-8 w-full max-w-xl p-4 sm:p-6"
        @click.stop
      >
        <!-- Bouton de fermeture -->
        <button
          @click="modalOpen = false; window.location.reload();"
          type="button"
          class="absolute top-4 right-4 text-slate-400 hover:text-gold-400 p-2 rounded-xl bg-navy-card hover:bg-navy-hover border border-navy-border transition-colors"
        >
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>

        <!-- Conteneur HTMX pour les détails de la journée -->
        <div id="modal-content">
          <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-3xl text-gold-400"
            ></i>
            <p class="text-sm text-slate-300 font-tactical">
              Connexion au réseau de Versailles...
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}