<script setup>
    import { useMenuStore } from '../../stores/MenuStore';
    import { useEventsStore } from '../../stores/EventsStore';
    import { mainStore } from '../../stores/MainStore.vue';
    import Modal from './Modal.vue';

    const menuStore = useMenuStore();
    const EventsStore = useEventsStore();
    const MainStore = mainStore();
</script>
        
<template>
    <div class="text-center p-0">
        <input v-model="EventsStore.search_term" type="text" id="search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 blockz p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 align-middle"/>
        <button class="btn search mt-8 align-middle" v-on:click.prevent="EventsStore.searchEvents(EventsStore.search_term)"><img class="lens align-middle" src="/search.png"/></button>
    </div>
</template>

<style scoped>
input {
border-radius: 25px;
padding: .5rem;
color: #000;
}

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

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

</style>