{% 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 %}
