@extends('layouts.app')

@section('title', 'Agenda - Boisbelle-Henrichemont')

@section('content')
  <section class="page-hero">
    <p class="eyebrow">Agenda</p>
    <h1>Les activités de l'association</h1>
    <p>Retrouver les activités passées, conférences, sorties et publications, ainsi que le programme de l'année.</p>
  </section>

  <template id="agenda-events-json">{!! $initialAgendaEvents->toJson(JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_TAG | JSON_HEX_QUOT) !!}</template>
  <template id="agenda-event-dates-json">{!! $eventDates->toJson(JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_TAG | JSON_HEX_QUOT) !!}</template>

  <section
    class="agenda-section"
    data-agenda
    data-agenda-feed="{{ route('events.feed') }}"
    data-agenda-has-more="{{ $initialAgendaHasMore ? '1' : '0' }}"
    data-initial-month="{{ $calendarDate->format('Y-m') }}"
  >
    <div class="activity-links" aria-label="Rubriques de la page activités originale">
      @foreach ($types as $type)
        <button class="activity-filter" type="button" data-agenda-type="{{ $type->slug }}">
          @if ($type->name === 'Conférence') Les conférences
          @elseif ($type->name === 'Sortie') Les sorties
          @elseif ($type->name === 'Gazette') Les gazettes
          @else {{ $type->name }}
          @endif
        </button>
      @endforeach
      <button class="activity-filter active" type="button" data-agenda-type="all">Cette année</button>
    </div>

    <div class="agenda-toolbar" aria-label="Filtres de l'agenda">
      <button class="filter-button active" type="button" data-agenda-status="all">Tous les événements</button>
      <button class="filter-button" type="button" data-agenda-status="upcoming">À venir</button>
      <button class="filter-button" type="button" data-agenda-status="past">Passés</button>
      <button class="filter-button" type="button" data-agenda-clear>Réinitialiser</button>
    </div>

    <div class="agenda-layout">
      <aside class="mini-calendar" aria-label="Calendrier mensuel">
        <div class="calendar-head">
          <button class="icon-button" type="button" data-agenda-prev aria-label="Mois précédent"><i class="fi fi-br-angle-left" aria-hidden="true"></i></button>
          <strong data-agenda-month>{{ $calendarDate->translatedFormat('F Y') }}</strong>
          <button class="icon-button" type="button" data-agenda-next aria-label="Mois suivant"><i class="fi fi-br-angle-right" aria-hidden="true"></i></button>
        </div>
        <div class="calendar-grid" data-agenda-calendar></div>
        <p class="calendar-help">Choisissez un jour marqué pour filtrer les événements.</p>
      </aside>
      <div class="agenda-results-panel">
        <div class="event-detail" data-agenda-detail hidden></div>
        <div class="events-list" data-agenda-list></div>
        <div class="agenda-load-state" data-agenda-load-state aria-live="polite"></div>
        <div class="agenda-scroll-sentinel" data-agenda-sentinel aria-hidden="true"></div>
      </div>
    </div>
  </section>
@endsection