<script>
  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';

  let isOpen = false;
  const toggle = () => (isOpen = !isOpen);
</script>

<span class="help-toggle fs-4" on:click={toggle}>
  <Icon name="question-circle" />
</span>

<Modal {isOpen} {toggle} centered scrollable>
  <ModalHeader {toggle}>
    <Icon name="question-circle" class="text-primary me-2" />
    <b>Aide</b>
  </ModalHeader>

  <ModalBody>
    <p>Calendrier commun de la vie étudiante de l'ENS</p>
    <b>Comment rajouter son calendrier :</b>
    <ul>
      <li>
        Utiliser un NextCloud, idéalement
        <a href="https://cloud.eleves.ens.fr">cloud.eleves.ens.fr</a>, ou
        <a href="https://framagenda.org">Framagenda</a>.
      </li>
      <li>Créer un calendrier dessus, créer un lien de partage public.</li>
      <li>
        Envoyer le lien de partage public au Club Réseau<br />
        (club-reseau [at] lists [.] ens [.] psl [.] eu) pour faire une requête d'ajout.
      </li>
    </ul>
  </ModalBody>

  <ModalFooter>
    <Icon name="balloon-heart" class="text-danger fs-5" />
    <span class="fs-7">Propulsé par le Club Réseau de l'ENS</span>
  </ModalFooter>
</Modal>

<style>
  .help-toggle {
    position: absolute;
    top: 0.75em;
    right: 1em;
    cursor: pointer;
  }
</style>
