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], slots: true) ?>
                <?php slot('content') ?>
                <?php endslot() ?>
              <?php endsnippet() ?>
            <?php endif ?>
          <?php endforeach ?>
        </section>
      </div>
    </template>
  
  </div>
</div>
<?php snippet('footer') ?>