<script setup>
  import CloseIcon from '../assets/close.svg'
</script>

<template>
  <div id="workshopContainer" class="windowStyle">
    <div class="windowTitle">
      <p>
        Atelier Drags and Nerds 1/3
      </p>
      <button type="button" class="closeBtn" @click="$emit('close')">
        <CloseIcon name="close" class="icon"/>
      </button>
    </div>
    <div class="windowContent">
      <div id="workshopText">
          <p>
              A toutes les drags, tous les nerds et l'ensemble des personnes entre les deux !<br/>
              Vous êtes invité·es à participer aux ateliers meetup Drags&Nerds !
          </p>
          <p>
              Le premier atelier meetup c'est le <strong id="accentWS"><time datetime="2026-03-21">21 Mars 2026</time> <br>
                au <a href="https://labolyon.fr">Laboratoire Ouvert Lyonnais</a></strong><br>7 Place Louis Chazette 69001 Lyon
          </p>
          <p>
              Que vous aimiez dessiner, coudre et crafter des costumes à paillettes.
              Coder, souder, clouer, imprimer en 3D ou en 2D...
              Que votre truc ce soit d'écrire des histoires toutes plus queer les unes que les autres, des poèmes lyriques ou encore du code source.
              Drags&Nerds c'est tout ça et bien plus.
          </p>
          <p>
              Pendant les ateliers, on prépare nos performances pour le grand drag show du <time datetime="2026-05-22">22 Mai 2026</time> au Grrrnd Zero.<br/>
              On construit des scenes, des histoires, des makeups et des costumes.
              On met tout en place pour que le 22 mai prochain, on puisse briller sur la grande scène du Grrrnd Zero.
          </p>
          <p>
              Tu as envie de faire du lips sync ? De jouer de ton synthé ?
              Ou juste de donner un coup de pouce a des drags pour leurs show.
              Il y a une place pour toi.
          </p>
          <p>
              <strong id="accentWS">Venez, quelque soit votre intérêt spécifique.</strong>
          </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /*
  <div style="margin-left: -3rem; width: calc(100% + 3rem); text-align: center; margin-top: 3rem;">
      <p style="font-size: 1.2em; font-weight: bold; padding: 0;">
          <a style="display: block; text-align: center;" href="https://drags-nerds.net/">drags-nerds.net</a>
      </p>
      <script type="module" src="https://esm.sh/webcomponent-qr-code"></script>
      <qr-code data="https://drags-nerds.net/"></qr-code>
  </div>
  */
  #workshopContainer{
    width: 95%;
    height: 36%;
    position: fixed;
    top: 1.61%;
    left: 2.5%;
    z-index: 66;
    cursor: ns-resize;
  }
  a{
    color: var(--accent-color);
    cursor: pointer;
  }

  #workshopText{
    overflow-y: scroll;
    scroll-behavior: smooth;
    padding-left: 10px;
    padding-right: 15px;
    text-align: left;
    color: var(--dark-color);
    font-weight: bold;
    font-family: 'velvelyne';
    font-size: 16.1px;
  }

  #accentWS{
    font-family: 'lineal';
    font-size: 21px;
  }

  #workshopText > p:first-of-type {
      background: black;
      color: var(--dark-color);
      margin-top: 3.33px;
      padding-left: 3.33px;
      animation: blinkBack 10s infinite;
  }
  /*=======================Format PC*/
  @media(min-width: 1000px){
    #workshopContainer{
      width: 44.4%;
      height: 33.3%;
      top: 3.33%;
      left: 25%;
    }
  }
</style>

<script>
  export default {
    name : 'WorkshopPannel',
    emits:['close'],
    mounted(){
      console.log("Workshop pannel pannel is loaded!");
    }
  };
</script>
