{% load static %}

<header class="w-full text-white bg-secondary">
  {% if user.is_authenticated %}
    <div
      class="container mx-auto px-4 lg:px-8 py-4 flex gap-4 justify-between items-center flex-wrap lg:flex-nowrap"
      x-data="{ open: false }"
      >
      <div class="flex-shrink-0">
        <a href="{% url 'pages:index' %}">
          <img class="h-12" src="{% static 'icons/new_icon.png' %}">
        </a>
      </div>
      <div class="w-full lg:w-auto order-3 lg:order-none bg-white rounded overflow-hidden">
        <form class="flex items-center" action="{% url 'cards:card-search' %}">
          <input
            class="w-full h-full text-secondary border-none"
            type="text"
            name="q"
            placeholder="@username"
            />
          <button class="p-2 text-secondary bg-gray-100" type="submit">
            {% include "icons/search.svg" with class="h-6 w-6" only %}
          </button>
        </form>
      </div>
      <div class="lg:hidden cursor-pointer" @click="open = !open">
        {% include "icons/menu.svg" with class="h-6 w-6" only %}
      </div>
      <div
        class="w-full lg:flex gap-4 items-center justify-end"
        :class="{ hidden: !open }"
        x-cloak
        >
        <div class="lg:flex gap-4 lg:gap-8">
          <a class="block my-2 py-2" href="{% url 'pages:index' %}">
            {% include "icons/home.svg" with class="inline-block lg:block lg:mx-auto h-6 w-6" filled="True" only %}
            Home
          </a>
          <div class="block my-2 py-2 relative" x-data="{}">
            <button
              class="text-center"
              id="cards-menu"
              aria-haspopup="true"
              @click="$refs.dropdown.classList.toggle('hidden')"
              @click.away="$refs.dropdown.classList.add('hidden')"
              >
              {% include "icons/card.svg" with class="inline-block lg:block lg:mx-auto h-6 w-6" filled="True" only %}
              Cards
            </button>
            <ul
              class="hidden absolute origin-top-right top-full md:top-2/3 lg:-right-2 w-max md:mt-3 md:py-1 text-secondary bg-white rounded shadow-lg md:ring-1 ring-black ring-opacity-5 z-10"
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="cards-menu"
              x-ref="dropdown"
              >
              <li class="hidden md:block py-0">
                <a
                  class="block px-8 py-2 hover:text-black hover:bg-gray-100"
                  href="{% url 'cards:card-templates' %}#horizontal-cards"
                  >
                  Horizontal Cards
                </a>
              </li>
              <li class="hidden md:block py-0">
                <a
                  class="block px-8 py-2 hover:text-black hover:bg-gray-100"
                  href="{% url 'cards:card-templates' %}#vertical-cards"
                  >
                  Vertical Cards
                </a>
              </li>
              <li class="block py-0">
                <a
                  class="block px-8 py-2 hover:text-black hover:bg-gray-100"
                  href="{% url 'cards:my-card-list' %}"
                  >
                  My EcCards
                </a>
              </li>
            </ul>
          </div>
          <a class="block my-2 py-2" href="{% url 'cards:card-contact' %}">
            {% include "icons/users.svg" with class="inline-block lg:block lg:mx-auto h-6 w-6" filled="True" only %}
            Contacts
          </a>
          <div
            class="block my-2 py-2 relative"
            x-data="inboxNotifications"
            x-init="initComponent"
            >
            <a class="text-center" href="{% url 'chat:chat-list' %}">
              <div class="inline-block lg:block lg:mx-auto w-min relative">
                {% include "icons/envelope.svg" with class="h-6 w-6" only %}
                <template x-if="notifications.length > 0">
                  <svg class="absolute top-0 -right-1 w-3 h-3 text-primary" viewBox="0 0 2 2">
                    <circle r="1" cx="1" cy="1" fill="currentColor">
                  </svg>
                </template>
              </div>
            Messages
            </a>
          </div>
          <div
            class="block my-2 py-2 relative"
            x-data="notifications"
            x-init="initComponent"
            >
            <button
              class="text-center"
              id="cards-menu"
              aria-haspopup="true"
              @click="$refs.dropdown.classList.toggle('hidden')"
              @click.away="$refs.dropdown.classList.add('hidden')"
              >
              <div class="inline-block lg:block lg:mx-auto w-min relative">
                {% include "icons/bell.svg" with class="h-6 w-6" filled="True" only %}
                <template x-if="notifications.length > 0">
                  <svg class="absolute top-0 right-0 w-3 h-3 text-primary" viewBox="0 0 2 2">
                    <circle r="1" cx="1" cy="1" fill="currentColor">
                  </svg>
                </template>
              </div>
              Notifications
            </button>
            <ul
              class="hidden absolute origin-top-right top-full md:top-2/3 -right-2 w-48 md:mt-3 md:py-1 text-white rounded-md bg-secondary shadow-lg md:ring-1 ring-black ring-opacity-5"
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="cards-menu"
              x-ref="dropdown"
              >
              <template x-for="notification in notifications">
                <li class="block py-0">
                  <span class="inline-block p-4 text-white bg-secondary" x-text="notification.text"></span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="flex-shrink-0">
          {% include "_user_menu.html" with user=user only %}
        </div>
      </div>
    </div>
  {% else %}
    <div class="bg-secondary py-4 text-white">
      <div
        class="container mx-auto px-4 lg:px-8 flex items-center justify-between flex-wrap"
        >
        <div>
          <a href="{% url 'pages:index' %}">
            <img class="h-8" src="{% static 'icons/new_icon.png' %}">
          </a>
        </div>
        <div>
          <a class="text-xl" href="#" data-micromodal-trigger="modal-login">
            Sign In
          </a>
        </div>
      </div>
    </div>
  {% endif %}
</header>