<script setup>
  const route = useRoute()

  let search = ref(route.query.search ? route.query.search : '')

  const query = ref(search)

  const submit = async() => {
    await navigateTo('/results?search=' + query.value)
  }
</script>

<template>
  <div class="search">
    <h1>Whois domain lookup</h1>
    <form @submit.prevent="submit">
      <div class="input">
        <input v-model="query" placeholder="Enter a domain name to view WHOIS data" />
        <span class="icon-search"></span>
      </div>
      <a @click="submit()" class="btn">Search <span class="icon-arrow-right"></span></a>
    </form>
  </div>
</template>