<script setup>
    import Footer from '../components/Sections/Footer.vue';
    import Header from '../components/Sections/Header.vue';
    import SearchButton from '../components/blocks/SearchButton.vue';
    import PrimaryButtonSet from '../components/blocks/PrimaryButtonSet.vue';
    import SecondaryButtonSet from '../components/blocks/SecondaryButtonSet.vue';
    import EventList from '../components/Sections/EventList.vue';
    import Modal from '../components/blocks/Modal.vue';


    import { useMenuStore } from '../stores/MenuStore';
    import { useEventsStore } from '../stores/EventsStore';
    import { mainStore } from '../stores/MainStore.vue';

    const menuStore = useMenuStore();
    const EventsStore = useEventsStore();
    const MainStore = mainStore();

</script>
    
<template>
  <div class="text-center">
    <Header/>
    <SecondaryButtonSet />
    <div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false">
      <SearchButton />
      <PrimaryButtonSet />
      <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
        <b v-if="$route.name == 'mde'" >Dame tus eventos, por favor</b>
        <b v-if="$route.name != 'mde'" >Add your event!</b>
      </a>
      <Modal />
    </div>

    <EventList :cal="$route.name"/>

    <div class="p-10">
      <Footer lead="DreamFreely"></Footer>
    </div>
  </div>
</template>

<style scoped>
button {
  border-radius: 25px;
  padding: .25rem .75rem;
  margin: .25rem;
  background-color: orange;
  color: #000;
  font-weight: bold;
}

img {
  display: inline;

}

.lens {
  width: 100%;
}

.search {
  border-radius: 25px;
  padding: .5rem 1rem;
  margin: .5rem;
  margin-top: 10px;
  background-color: hsla(160, 100%, 37%, 1);
  color: #000;
  font-weight: bold;
}

.about {
color: #000 !important;
background-color: rgb(180, 180, 180);
padding: .25em 1em .25em 1em;
}

.about a {
color: #000 !important;
font-weight: bold;
padding: 1em;
}

.qr-code {
background-color: #760870;;
color: #fff !important;
padding: .25em 1em .25em 1em;
font-weight: bold;
}

.qr-code a {
color: #fff !important;
font-weight: bold;
padding: 1em;
}
</style>