<template>
  <div class="flex items-center">
    <div class="flex w-full rounded">
      <dropdown :auto-close="false" class="px-4 md:px-6 border border-indigo-300 rounded-l  bg-indigo-200 hover:bg-indigo-100 focus:z-10 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent" placement="bottom-start">
        <div class="flex text-gray items-baseline">
          <span class="text-base hidden md:inline">Фильтр</span>
          <svg class="w-2 h-2 fill-current md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
            <path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
          </svg>
        </div>
        <template v-slot:dropdown>
          <div class="mt-2 px-4 py-6 w-screen shadow-xl bg-indigo-300 rounded-md" :style="{ maxWidth: `${maxWidth}px` }">
            <slot />
          </div>
        </template>
      </dropdown>

        <div class="flex-1 relative">
            <div class="absolute inset-y-0 left-3 flex items-center z-[1]">
                <svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
                </svg>
            </div>
            <input
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
            autocomplete="off"
            name="search"
                class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-r placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
                type="search">
        </div>
    </div>
    <button class="ml-3 text-sm text-gray focus:text-orange" type="button" @click="$emit('reset')">Сбросить</button>
  </div>
</template>

<script>
import Dropdown from "@/Shared/Form/Dropdown.vue";

export default {
  components: {
    Dropdown,
  },
  emits: ["update:modelValue", "reset"],
  props: {
    modelValue: String,
    maxWidth: {
      type: Number,
      default: 300,
    },
  },
};
</script>
