{% extends "base.html" %}
{% block content %}
<div>
  <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="/"  
                class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 bg-gray-900 hover:bg-gray-700 hover:text-white"
              >
                Home
              </a>
              <a 
                href="{% url 'tag_me:tagged-field-list' %}" 
                hx-get="{% url 'tag_me:tagged-field-list' %}"
                hx-target="#tag-htmx-container"
                hx-trigger="click"
                @click="currentPath = '{% url 'tag_me:tagged-field-list' %}'"
                :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:tagged-field-list' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:tagged-field-list' %}' }" 
                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"
              >
                Tagged Fields List
              </a>
              <a 
                href="{% url 'tag_me:list-tags' %}" 
                hx-get="{% url 'tag_me:list-tags' %}"
                hx-target="#tag-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"
              >
                Users Tags List
              </a>

              <a 
                href="{% url 'tag_me:sync-tagged-field-list' %}" 
                hx-get="{% url 'tag_me:sync-tagged-field-list' %}"
                hx-target="#tag-htmx-container"
                hx-trigger="click"
                @click="currentPath = '{% url 'tag_me:sync-tagged-field-list' %}'"
                :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:sync-tagged-field-list' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:sync-tagged-field-list' %}' }" 
                class="rounded-md px-3 py-2 text-sm font-medium"
                aria-current="page"
              >
                Synchronised Fields List 
              </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="/"  
          class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
        >
          Home
        </a>

        <a 
          href="{% url 'tag_me:tagged-field-list' %}" 
          hx-get="{% url 'tag_me:tagged-field-list' %}"
          hx-target="#tag-htmx-container"
          hx-trigger="click"
          @click="currentPath = '{% url 'tag_me:tagged-field-list' %}'"
          :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:tagged-field-list' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:tagged-field-list' %}' }" 
          class="rounded-md px-3 py-2 text-sm font-medium"
          aria-current="page"
        >
          Tagged Fields List
        </a> 
        <a 
          href="{% url 'tag_me:sync-tagged-field-list' %}" 
          hx-get="{% url 'tag_me:sync-tagged-field-list' %}"
          hx-target="#tag-htmx-container"
          hx-trigger="click"
          @click="currentPath = '{% url 'tag_me:sync-tagged-field-list' %}'"
          :class="{ 'bg-gray-800 text-white': currentPath == '{% url 'tag_me:sync-tagged-field-list' %}', 'bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white': currentPath != '{% url 'tag_me:sync-tagged-field-list' %}' }" 
          class="rounded-md px-3 py-2 text-sm font-medium"
          aria-current="page"
        >
          Synchronised Fields List 
        </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='tag-htmx-container'
    class="pt-6 flex justify-center items center min-w-screen min-h-screen flex dark:bg-gray-900"
  >
  </div>
</div>
{% endblock %}

