{% extends "base.html" %}

{% block content %}
<nav class="bg-gray-900" x-data="{ mobileMenuOpen: false, profileMenuOpen: false, currentPath: '{{ request.path }}' }">
  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <button 
          type="button" 
          class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
          aria-controls="mobile-menu" 
          aria-expanded="false"
          @click="mobileMenuOpen = !mobileMenuOpen" 
        >
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>

          <svg :class="{ 'block': !mobileMenuOpen, 'hidden': mobileMenuOpen }" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <svg :class="{ 'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex flex-shrink-0 items-center">
          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
        </div>
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4">
            <a 
              href="{% url 'blog:author' %}" 
              hx-get="{% url 'blog:author' %}"
              hx-target="#htmx-container"
              hx-trigger="click"
              @click="currentPath = '{% url 'blog:author' %}'"
              :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'blog:author' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'blog:author' %}' }" 
              class="rounded-md px-3 py-2 text-sm font-medium"
              aria-current="page"
            >
              Author
            </a>
            <a 
              href="{% url 'blog:all-tags' %}" 
              hx-get="{% url 'blog:all-tags' %}"
              hx-target="#htmx-container"
              hx-trigger="click"
              @click="currentPath = '{% url 'blog:all-tags' %}'"
              :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'blog:all-tags' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'blog:all-tags' %}' }" 
              class="rounded-md px-3 py-2 text-sm font-medium"
              aria-current="page"
            >
              All Tags
            </a>
            <a 
              hx-get="{% url 'tag_me:list-tags' %}"
              hx-target="#htmx-container"
              hx-trigger="click"
              @click="currentPath = '{% url 'tag_me:list-tags' %}'"
              :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:list-tags' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:list-tags' %}' }" 
              class="rounded-md px-3 py-2 text-sm font-medium"
              class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white" aria-current="page"
            >
              User Tags
            </a>
            <a 
              href="{% url 'tag_me:tag-mgmt' %}" 
              @click="currentPath = '{% url 'tag_me:tag-mgmt' %}'"
              :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:tag-mgmt' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:tag-mgmt' %}' }" 
              class="rounded-md px-3 py-2 text-sm font-medium"
              class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white" aria-current="page"
            >
              Tag Management
            </a>
            <a 
              href="https://django-tag-me.readthedocs.io/en/latest/?badge=latest" 
              target="_blank"
              class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
              Tag Me Docs
            </a>
          </div>
        </div>
      </div>

      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <div class="relative ml-3" x-data="{ open: false }">
          <div>
            <button type="button" class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true"
              @click="profileMenuOpen = !profileMenuOpen"
              @click.away="profileMenuOpen = false"
            >
              <span class="absolute -inset-1.5"></span>
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="{{ user.image_url }}" alt="User Image">
            </button>
          </div>

          <div x-show="profileMenuOpen" class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="{% url 'account_logout' %}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div :class="{ 'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" class="sm:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <a 
        href="{% url 'blog:author' %}" 
        hx-get="{% url 'blog:author' %}"
        hx-target="#htmx-container"
        hx-trigger="click"
        @click="currentPath = '{% url 'blog:author' %}'"
        :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'blog:author' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'blog:author' %}' }" 
        class="rounded-md px-3 py-2 text-sm font-medium"
        aria-current="page"
      >
        Author
      </a>
      <a 
        href="{% url 'blog:all-tags' %}" 
        hx-get="{% url 'blog:all-tags' %}"
        hx-target="#htmx-container"
        hx-trigger="click"
        @click="currentPath = '{% url 'blog:all-tags' %}'"
        :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'blog:all-tags' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'blog:all-tags' %}' }" 
        class="rounded-md px-3 py-2 text-sm font-medium"

        aria-current="page"
      >
        All Tags
      </a>
      <a 
        href="{% url 'tag_me:list-tags' %}" 
        hx-get="{% url 'tag_me:list-tags' %}"
        hx-target="#htmx-container"
        hx-trigger="click"
        @click="currentPath = '{% url 'tag_me:list-tags' %}'"
        :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:list-tags' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:list-tags' %}' }" 
        class="rounded-md px-3 py-2 text-sm font-medium"

        aria-current="page"
      >
        User Tags
      </a>
      <a 
        href="https://django-tag-me.readthedocs.io/en/latest/?badge=latest" 
        target="_blank"
        class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
        Tag Me Docs
      </a>
    </div>
  </div>
</nav>

<div
  id='htmx-container'
  class="pt-6 flex justify-center items center min-w-screen min-h-screen flex dark:bg-gray-900"
>

</div>

{% endblock %}

