<template>
  <main>
    <section class="section">
      <h1 class="title is-2">Informations pratiques</h1>
      <div class="content is-size-5">
        <p>
          Le ciné-club de l’ÉNS est un club étudiant de PSL. Nous organisons
          <span class="has-text-weight-bold">chaque mercredi soir</span> à
          <span class="has-text-weight-bold">20h30</span> une séance,
          généralement en 35mm.
        </p>
        <p>
          Nous sommes ouverts à des séances en
          <span class="has-text-weight-bold">partenariat</span> : vous
          choisissez le film et apportez votre public, avec de l’animation ou
          non. N’hésitez pas à
          <a href="mailto:cineclub-contact@ens.fr">nous contacter</a> !
        </p>
        <p>
          Si vous voulez <span class="has-text-weight-bold">participer</span> en
          collant des affiches, en tenant la caisse, en apprenant le montage et
          le démontage de la sainte bobine, en proposant des films, n’hésitez
          pas à venir nous parler un soir en Dussane ou a nous écrire : vous
          êtes les bienvenu⋅e⋅s !
        </p>
      </div>
      <div class="is-flex card-container">
        <div class="card">
          <header class="card-content">
            <h3 class="title is-4 mb-0">Lieu</h3>
          </header>
          <div class="card-content columns">
            <div class="column is-two-fifths">
              Salle Dussane<br />45 rue d'Ulm<br />Paris 5e
            </div>
            <div class="column is-three-fifths">
              <ul>
                <li
                  v-for="(transport, index) in transports"
                  :key="index"
                  class="is-flex mb-2"
                >
                  <img :src="transport.iconPath" class="mr-2" width="24" />
                  <div v-html="transport.stations.join('<br>')" />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card" style="width: fit-content">
          <header class="card-content">
            <h3 class="title is-4 mb-0">Tarifs</h3>
          </header>
          <div class="card-content">
            <table class="table">
              <thead>
                <tr>
                  <th></th>
                  <th>COF</th>
                  <th>Non-COF</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>1 séance</th>
                  <td>4€</td>
                  <td>5€</td>
                </tr>
                <tr>
                  <th>Carte 10 séances</th>
                  <td>30€</td>
                  <td>35€</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import lineB from "~/assets/icons/ligne-b.svg"
import line7 from "~/assets/icons/ligne-7.svg"
import line10 from "~/assets/icons/ligne-10.svg"

const transports = [
  {
    iconPath: lineB,
    stations: ["Luxembourg"],
  },
  {
    iconPath: line7,
    stations: ["Place Monge", "Censier Daubenton"],
  },
  {
    iconPath: line10,
    stations: ["Cardinal Lemoine"],
  },
]
</script>

<style scoped lang="sass">
.card-container
  justify-content: space-evenly
  flex-wrap: wrap
  margin-top: -1.5rem

  .card
    flex-basis: 400px
    margin-top: 1.5rem
</style>
