<template>
  <header class="w-full sticky top-0 z-[100]">
    <div class="relative z-10 bg-orange shadow-xl">
      <div
        class="
          grid grid-cols-12
          items-center
          pt-2.5
          pb-2.5
          px-4
          sm:px-6
          md:space-x-5
          lg:space-x-10
        "
      >
        <inertia-link :href="route('dashboard')" class="col-span-1 block flex-shrink-0">
          <div class="block md:hidden font-bold text-indigo-300 text-2xl">
            T
          </div>
          <img class="hidden md:block" src="/image/logotype.svg" alt="" />
        </inertia-link >

        <audio-player />

        <div class="col-span-4 h-12 hidden md:flex">
          <form class="main-search w-full flex md:ml-0" action="#" method="GET">
            <label for="search_field" class="sr-only">Поиск контента</label>
            <div
              class="relative w-full text-gray-400 focus-within:text-gray-600"
            >
              <input
                name="search_field"
                id="search_field"
                class="
                  h-full
                  w-full
                  rounded-md
                  border-transparent
                  py-2
                  pr-11
                  pl-4
                  text-base
                  bg-orange-dark
                  text-white
                  placeholder-gray
                  focus:border-transparent
                  focus:outline-none
                  focus:ring-2 focus:ring-orange-dark
                "
                placeholder="Глобальный поиск..."
                type="search"
              />

              <div
                class="
                  pointer-events-none
                  absolute
                  inset-y-0
                  right-4
                  flex
                  items-center
                  text-gray
                "
              >
                <svg
                  class="flex-shrink-0 h-6 w-6"
                  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>
            </div>
          </form>
        </div>

        <div
          class="
            col-span-4
            md:col-span-2
            lg:col-span-4
            flex
            items-center
            justify-end
            space-x-2
            sm:ml-6
            sm:space-x-6
          "
        >
           <inertia-link :href="route('setting.money')" class="hidden lg:block default text-sm text-white">
            Баланс: {{$page.props.balance}}
          </inertia-link>

          <button
            type="button"
            class="
              flex
              md:hidden
              p-1
              rounded-full
              items-center
              justify-center
              text-white
              focus:outline-none
            "
          >
            <svg
              class="w-5 h-5 md:h-6 md:w-6"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </button>

          <div class="relative">
            <div
              class="
                absolute
                top-0
                right-1
                w-2
                h-2
                md:w-3
                md:h-3
                bg-pink
                rounded-full
              "
            ></div>
            <inertia-link
              :href="route('setting.notify')"
              class="
                flex
                p-1
                rounded-full
                items-center
                justify-center
                text-white
                focus:outline-none
              "
            >
              <svg
                class="w-5 h-5 md:h-6 md:w-6"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
              </svg>
            </inertia-link>
          </div>

         <dropdown class="flex md:hidden user-menu h-12 w-12 rounded-full items-center justify-center focus:outline-none" placement="bottom-start">
           <svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg>
           <template v-slot:dropdown>

                <div class="mobile-user-menu z-50 bg-orange-dark rounded-b-lg">
                    <div
                    class="absolute z-50 right-0 top-[-16px] mr-[20px] sm:mr-[20px]"
                    >
                    </div>
                    <ul class="p-6 text-white space-y-6">
                        <li>
                            <inertia-link :href="route('setting.money')">Баланс: {{$page.props.balance}}</inertia-link>
                        </li>
                        <li>
                            <inertia-link :href="route('profile.user', $page.props.auth.user.username)">Профиль</inertia-link>
                        </li>
                       <li>
                            <inertia-link :href="route('feeds.layoutsidebar')">Новости</inertia-link>
                        </li>
                        <li>
                            <a href="#"><span class="text-xs rounded-full mr-1">(5)</span> Сообщения</a>
                        </li>
                        <li>
                            <inertia-link :href="route('list.images')">Изображения</inertia-link>
                        </li>
                        <li>
                            <inertia-link :href="route('list.videos')">Видео</inertia-link>
                        </li>
                        <li>
                            <inertia-link :href="route('list.musics')">Музыка</inertia-link>
                        </li>
                        <li>
                            <inertia-link :href="route('users.index')">Пользователи</inertia-link>
                        </li>
                        <li>
                            <inertia-link :href="route('setting.index')">Настройки</inertia-link>
                        </li>
                        <li>
                            <inertia-link as="button" :href="route('logout')" method="delete">Выйти</inertia-link>
                        </li>
                    </ul>
                </div>

           </template>
         </dropdown>


          <div class="hidden md:block relative flex-shrink-0">
            <inertia-link
            :href="route('profile.user', $page.props.auth.user.username)"
              class="
                bg-white
                rounded-full
                flex
                text-sm
                focus:outline-none
                focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
              "
            >
              <user-avatar  :user='$page.props.auth.user' size='small' class="w-9 h-9 md:h-12 md:w-12 text-lg" />
            </inertia-link>
          </div>
        </div>
      </div>
    </div>
  </header>


  <div class=" hidden w-[48rem] z-50 main-search-list shadow-classic rounded-md bg-indigo-200 overflow-hidden " >
    <div class="">
      <div data-simplebar class="overflow-auto max-h-72">
        <div class="text-gray-light divide-y divide-indigo-300">
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              Lorem, ipsum dolor sit amet consectetur
              <mark class="text-orange bg-transparent">consectetur</mark> asdasd
              ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#musicmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              <mark class="text-orange bg-transparent">consectetur</mark> Lorem,
              ipsum dolor sit amet consectetur asdasd ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#filmmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              <mark class="text-orange bg-transparent">consectetur</mark> Lorem,
              ipsum dolor sit amet consectetur asdasd ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#filmmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              <mark class="text-orange bg-transparent">consectetur</mark> Lorem,
              ipsum dolor sit amet consectetur asdasd ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#filmmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              <mark class="text-orange bg-transparent">consectetur</mark> Lorem,
              ipsum dolor sit amet consectetur asdasd ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#filmmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
          <!-- s -->
          <div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
            <div class="flex-shrink-0 mr-5">
              <img
                class="object-cover w-10 h-10"
                src="/image/user_card2.png"
                alt=""
              />
            </div>
            <div class="flex-1">
              <mark class="text-orange bg-transparent">consectetur</mark> Lorem,
              ipsum dolor sit amet consectetur asdasd ....
            </div>
            <div class="ml-5 flex-shrink-0">
              <svg class="drop-shadow-custom w-5 h-5">
                <use xlink:href="#filmmark"></use>
              </svg>
            </div>
          </div>
          <!-- e -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropdown from '@/Shared/Form/Dropdown'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import AudioPlayer from '@/Shared/AudioPlayer'
export default {
   components: {
       AudioPlayer,
       UserAvatar,
       Dropdown,
   }
}
</script>
