<template> 
  <svg
      @click="isOpen = false"
      xmlns="http://www.w3.org/2000/svg"
      class="w-8 h-8 text-red-900 cursor-pointer z-40"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
  >
      <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
      />
  </svg>
  <div id="promo-overlay" class="z-40" v-for="(qa, index) in questions">
    <div class=" p-3 m-3">
      <h2 class="text-xl">
        <a :href="index" v-on:click.prevent="open_answer(qa)">
          {{ qa.q }}
        </a>   
      </h2>
      <div ref="a-${index}" :class="{hidden:qa.show}" class="p-5 promo-overlay">
        <span v-html="qa.a"></span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment-timezone';

export default {
  data() {
    return {
      questions: [],
      new_msg: "",
      the_day: "",
      isHidden: true,
      questions: [ 
        { q: "What is DigiSnaxx?", a:"DigiSnaxx is an events calendar, and community board. We aggregate events and news from the Twin Cities Metro Area.", show:false  },
        { q: "Who built DigiSnaxx?", a:"'Twas I <a href='https://canin.dreamfreely.org' target='_blank'>Canin Carlos</a>.", show:false  }, 
        { q: "How can you support this project?", a:"Share the QR code & URL! <br/><br/>To learn about my other projects, support me as an innovator, or <b>join the DigiSnaxx Commerce Community, <a href='https://canin.dreamfreely.org/digisnaxx' target='_blank'>click here</a></b>", show:false  }, 
        { q: "Submit a calendar!", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shrfUvOiFdaHI8xoz?backgroundColor=teal" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show:false }, 
        { q: "What's the status of the calendar I submitted?", a:'<iframe class="airtable-embed" src="https://airtable.com/embed/shr6IRnNvHtDEcokM?backgroundColor=teal&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>', show: false},      
        // { q: "Next question?", a:"Next answer", show: true},
      ]
    }
  },


  methods: {
      open_answer(q) {
          q.show = !q.show
      },
  },
}
</script>
    
    <style scoped>
    .question {
      background-color: aquamarine;
      color: black;
    }

    .answer {
      background-color: coral ;
    }

    p {
      padding: 1rem 1rem 1rem 0rem;
      text-align: center;
    }

    h1 {
      font-weight: 500;
      font-size: 2.6rem;
      top: -10px;
    }
    
    h3 {
      font-size: 1.2rem;
    }
    
    @media (min-width: 1024px) {
      .gform-mini {
        display: none;
      }
    }

    @media (max-width: 1024px) {
      .gform-lg {
        display: none;
      }
    }
    </style>