nouveau-theatre-de-besancon/site/templates/program.php

<?php snippet('header') ?>
<div 
  class="program-methods"
  x-data="{
    setInitialTab() {
      const queryString = window.location.search;
      if (queryString.length === 0) return 'Programme';
      const urlParams = new URLSearchParams(queryString);
      const tab = urlParams.get('tab');
      return tab;
    }
  }"
>
  <div class="program-data"
    x-data="{
      tab: setInitialTab()
    }"
  >
  
    <section class="filters">
      <button 
        x-data="{title: 'Calendrier'}"
        x-text="title"
        @click="tab = title"
      ></button>
      <button
        x-data="{title: 'Spectacles'}"
        x-text="title"
        @click="tab = title"
      ></button>
      <button
        x-data="{title: 'Autres événements'}"
        x-text="title"
        @click="tab = title"
      ></button>
      <button
        x-data="{title: 'Ici & Là'}"
        x-text="title"
        @click="tab = title"
      ></button>
      <button
        x-data="{title: 'Saisons précédentes'}"
        x-text="title"
        @click="tab = title"
      ></button>
    </section>
    <section class="page-title">
      <h1 x-text="tab"></h1>
    </section>
    
    <!-- Programme -->
    <template x-if="tab === 'Programme'">
      <div class="program-content__events">
        <section class="yellow">
          <h2>À venir — <?= $page->children()->first()->title() ?></h2>
        </section>
        <?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
        <section class="yellow">
          <h2>Événements passés</h2>
        </section>
        <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
      </div>
    </template>

    <!-- Calendrier -->
    <template x-if="tab === 'Calendrier'">
      <div class="program-content__events">
        <section class="collapsable-sections">
          <?php foreach($currentSeasonSessions as $month => $sessions): ?>
            
            <?php if (count($sessions) > 0): ?>
              <?php snippet('collapsable-section', ['title' => $month, 'sessions' => true], slots: true) ?>
                <?php slot('content') ?>
                <ul class="sessions sessions--detailed">
                  <?php
                    foreach($sessions as $session):
                      $date = new DateTime($session['date']);
                      $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::NONE, IntlDateFormatter::NONE);
                      $formattedDate = $formatter->formatObject($date, "d MMMM");

                      try {
                        $endTime = strlen($session['duration']) > 0 ? getEndTime($session) : false;
                      } catch (\Throwable $th) {
                        throw new Exception($session['title'], 1);
                      }
                    ?>
                    <li class="session" style="--color: <?= $session['color'] ?>">
                      <a class="session__event-link">
                        <div class="session__info">
                          <p><?= $formattedDate ?></p>
                          <p><?= $session['time'] ?><?php e($endTime, ' - ' . $endTime) ?></p>
                        </div>
                        <div class="session__info">
                          <p><strong><?= $session['title'] ?></strong></p>
                          <p><?= $session['authors'] ?></p>
                        </div>
                        <div class="session__info">
                          <p><?= $session['place'] ?></p>
                        </div>
                        <div class="session__info">
                          <?php if ($session['bookableStock'] === 'free'): ?>
                            <a class="ticket-link" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
                          <?php else: ?>
                            <?php if ($session['bookableStock'] == 0): ?>
                              <a class="ticket-link" title="Plateforme de réservation" disabled><?php snippet('ticket') ?> Complet</a>
                            <?php elseif ($session['bookableStock'] < option('stockThreshold')): ?>
                              <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
                            <?php else: ?>
                              <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
                            <?php endif ?>
                          <?php endif ?>
                        </div>
                      </a>
                    </li>
                    <?php endforeach ?>
                  </ul>
                <?php endslot() ?>
              <?php endsnippet() ?>
            <?php endif ?>
          
          <?php endforeach ?>
        </section>
      </div>
    </template>
  
  </div>
</div>
<?php snippet('footer') ?>