<template>
  <section class="relative">
    <div
      class="absolute inset-0 z-0 opacity-70 bg-gradient-to-br from-purple-100 to-blue-200 pt-10 pb-12 dark:from-purple-900 dark:to-blue-900 -z-1"
    />
    <div class="container pt-10 pb-12 relative">
      <h1
        class="font-bold mb-8 text-3xl text-center text-gray-700 dark:text-white dark:text-opacity-50"
      >
        Chercher...
      </h1>

      <div class="flex justify-evenly">
        <TInputIcon
          v-model="querySite"
          type="search"
          :placeholder="$t('home.searchSitePlaceholder')"
          class="w-full"
          input-class="text-xl rounded-full"
          icon="search"
          icon-class="text-2xl text-blue-100 dark:text-gray-600"
          @keyup.enter="$router.push(`/recherche?q=${querySite}`)"
        />

        <TInputIcon
          v-model="queryRessources"
          type="search"
          :placeholder="$t('home.searchRessourcesPlaceholder')"
          class="w-full mx-8"
          input-class="text-xl rounded-full"
          icon="search"
          icon-class="text-2xl text-blue-100 dark:text-gray-600"
          @keyup.enter="$router.push(`/ressources?q=${queryRessources}`)"
        />

        <TInputIcon
          v-model="querySearch"
          type="search"
          :placeholder="$t('home.searchG1Placeholder')"
          class="w-full"
          input-class="text-xl rounded-full"
          icon="search"
          icon-class="text-2xl text-blue-100 dark:text-gray-600"
          @keyup.enter="searchOnSite"
        />
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      querySite: null,
      queryRessources: null,
      querySearch: null,
    }
  },
  methods: {
    searchOnSite() {
      this.$router.push(`/recherche?q=${this.querySite}`)
    },
  },
}
</script>

<style lang="scss" scoped></style>