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;
    },
    goTo(event, href) {
      if (event.target.tagName === 'A') return
      location.href = href
    }
  }"
>
  <div class="program-data"
    x-data="{
      tab: setInitialTab(),
      filter: null
    }"
  >
  
  <?php if ($page->categories()->isNotEmpty()): ?>  
    <section class="filters">
      <button 
        x-data="{title: 'Calendrier'}"
        x-text="title"
        :class="tab === title ? 'strong' : ''"
        @click="if (tab === title) { tab = 'Programme' } else {tab = title}"
      ></button>
      <?php foreach($page->categories()->split() as $filter): ?>
        <button
          x-data="{
            title: '<?= $filter ?>',
            get filterTitle() {
              return 'Calendrier — ' + this.title
            }
          }"
          x-text="title"
          :class="tab === filterTitle ? 'strong' : ''"
          @click="if (tab === filterTitle) { tab = 'Programme' } else { tab = filterTitle; filter = title }"
        ></button>
      <?php endforeach ?>
  <?php endif ?>
    </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.includes('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, 'padding' => false], 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);
                      }
                  ?>
                    <template x-if="tab === 'Calendrier' || ('<?= $session['category'] ?>'.length > 0 && tab.includes('<?= $session['category'] ?>'))">
                    <li class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>" @click="goTo(event, '<?= $session['event-url'] ?>')" title="En savoir plus">
                      <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">
                        <?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
                          <p>
                            <?php if (strlen($session['duration']) > 0): ?>
                              Durée : <?= $session['duration'] ?><br />
                            <?php endif ?>
                            <?php if (strlen($session['public']) > 0): ?>
                              <?= $session['public'] ?>
                            <?php endif ?>
                          </p>
                        <?php endif ?>
                      </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 elseif ($session['bookableStock'] == 0): ?>
                          <a class="ticket-link" title="Séance complète" 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 ?>
                      </div>
                    </li>
                    </template>
                    <?php endforeach ?>
                  </ul>
                <?php endslot() ?>
              <?php endsnippet() ?>
            <?php endif ?>
          <?php endforeach ?>
        </section>
      </div>
    </template>  
  </div>
</div>
<?php snippet('footer') ?>