<template>
  <form class="table-search-form" role="search" @submit.prevent="search">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <svg
              class=""
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              data-fa-i2svg=""
            >
              <path
                fill="currentColor"
                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
              ></path>
            </svg>
          </span>
        </div>

        <input
          v-model="searchForm.query"
          type="search"
          required
          class="form-control"
          id="search-query"
          placeholder="جستجو..."
          name="search-query"
          aria-label="جستجو در اسناد، عناوین و واژگان"
          aria-describedby="basic-addon1"
          size="50"
          @keyup="search()"
          @keydown="onKeyDown()"
        />

        <div class="input-group-append">
          <button
            :class="{ 'show-reset-btn': searchForm.query.length > 0 }"
            type="button"
            class="input-group-text"
            id="basic-addon1"
          >
            <svg class="icon icon-Component-294--1">
              <use xlink:href="#icon-Component-294--1"></use>
            </svg>
          </button>

          <div class="dropdown">
            <button
              class="btn dropdown-toggle"
              type="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <svg class="icon icon-filter" style="width: 1.3em">
                <use xlink:href="#icon-filter"></use>
              </svg>
              عنوان
            </button>
            <div class="dropdown-menu">
              <button class="dropdown-item" type="button" value="current">
                عنوان
              </button>
              <button class="dropdown-item" type="button" value="all">
                شماره
              </button>
              <button class="dropdown-item" type="button" value="all">
                کد
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    fieldThree: {
      default() {
        return undefined;
      },
    },
    canDelete: {
      default: "",
      type: String,
    },
  },
};
</script>
