<template>
  <div class="base-search">
    <label class="search-bar box-shadow-small header__search-field">
      <input
        type="text"
        name="search"
        class="header__search-field"
        placeholder="Pesquise aqui seu pedido..."
        v-model="inputValue"
        autocomplete="off"
        maxlength="70"
        v-on:keyup.enter="searchInput"
      >
      <button type="button" @click="clearInput" class="btn-clear" title="Limpar pesquisa">
        <i v-show="inputValue" class="fa-regular fa-circle-xmark"></i>
      </button>  
      <button v-if="loader" type="button" class="btn-search">
        <i class="fa-solid fa-circle-notch fa-spin fa-2xl"></i>
      </button>
      <button v-else type="button" @click="searchInput" class="btn-search">
        <i class="fas fa-search" aria-hidden="true"></i>
      </button>
    </label>

    <slot> </slot>
  </div>
</template>

<style src="./styles.css" scoped></style>
<script src="./scripts.js"></script>
