{% load static tailwind_tags gravatar %}
{% url 'home' as home_url %}
{% url 'trade_offer_list' as trade_offer_list_url %}
{% url 'cards:card_list' as cards_list_url %}
{% url 'dashboard' as dashboard_url %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% include 'meta/meta.html' %}

  <!-- Inline script to set the theme before rendering -->
  <script>
    (function () {
      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
      document.documentElement.classList.toggle(
        "dark",
        localStorage.getItem("theme") === "dark" ||
          (!(localStorage.getItem("theme")) && window.matchMedia("(prefers-color-scheme: dark)").matches)
      );
      if (localStorage.getItem("theme")) {
        document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
      } else {
        document.documentElement.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
      }
    })();
  </script>
  
  <title>{% block title %}{% endblock title %} - PᴋMɴ Trade Club</title>

  <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
  <!-- Choices.js -->
  <link rel="stylesheet" href="{% static 'css/choices.min.css' %}" />
  <script async src="{% static 'js/choices.min.js' %}"></script>
  <!-- Tailwind CSS and Base stylesheet -->
  {% tailwind_css %}
  <link rel="stylesheet" href="{% static 'css/base.css' %}">

  <!-- Floating UI -->
  <script src="{% static 'js/floating-ui_core@1.6.9.9.min.js' %}"></script>
  <script src="{% static 'js/floating-ui_dom@1.6.13.13.min.js' %}"></script>

  <script defer src="{% static 'js/card-multiselect.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/card-multiselect.css' %}">

  <script src="{% static 'js/base.js' %}"></script> 

  {% block css %}{% endblock %}
  
  {% block javascript_head %}{% endblock %}
</head>
<body class="min-h-screen bg-base-200 dark:bg-base-300" id="body">
  <!-- Header and Navigation -->
  <div class="navbar bg-base-100 shadow-sm">
    <div class="navbar-start">
      <a id="navbar-logo" class="btn btn-ghost text-xl" href="{% url 'home' %}">
        <span class="inline leading-none" aria-hidden="true">
          <span class="inline-block relative align-text-top">P</span><span class="inline-block relative align-text-bottom">K</span><span class="inline-block relative align-text-top">M</span><span class="inline-block relative align-text-bottom">N</span>
          <span class="inline-block relative">Trade Club</span>
        </span>
        <span aria-hidden="false" class="sr-only">PKMN Trade Club</span>
      </a>
    </div>
    <div class="navbar-center hidden sm:flex">
      <ul class="menu menu-horizontal px-1">
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'cards:card_list' %}">Cards</a></li>
        <li><a href="{% url 'trade_offer_list' %}">Trades</a></li>
      </ul>
    </div>
    <div class="navbar-end">

        <button id="theme-toggle-btn" class="btn btn-ghost btn-circle me-2" title="Toggle Theme">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 dark:hidden">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 hidden dark:block">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
          </svg>          
        </button>
        {% if user.is_authenticated %}
          <div class="hidden sm:block">
            <div class="btn btn-ghost btn-circle avatar">
              <div class="max-w-10 rounded-full">
                <a tabindex="0" role="button" href="{% url 'dashboard' %}">{{ user.email|gravatar_no_hover:40 }}</a>
              </div>
            </div>
          </div>
      {% else %}
        <div class="gap-2 hidden sm:flex">
          <a tabindex="0" role="button" class="btn btn-primary" href="{% url 'account_login' %}">Login</a>
          <a tabindex="1" role="button" class="btn btn-secondary" href="{% url 'account_signup' %}">Sign Up</a>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Main Content -->
  <main class="container mx-auto p-4 w-full xl:max-w-256">
    {% include '_messages.html' %}
    {% block content %}{% endblock %}
  </main>

  <!-- Footer -->
  <footer class="bg-base-200 dark:bg-base-300 text-base-content p-4">
    <div class="container mx-auto text-center text-sm">
      <p>&copy; {% now "Y" %} PKMNTrade.Club. All rights reserved.</p>
    </div>
  </footer>

  <!-- Dock  -->
  <div x-data class="dock bg-neutral text-neutral-content sm:hidden">
      <button @click="window.location.href = '{{ home_url }}'" class="{% if request.path == home_url %}dock-active{% endif %}">
        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
        <span class="dock-label">Home</span>
      </button>
      <button @click="window.location.href = '{{ cards_list_url }}'" class="{% if request.path == cards_list_url %}dock-active{% endif %}">
        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6" /></svg>        
        <span class="dock-label">Cards</span>
      </button>
      <button @click="window.location.href = '{{ trade_offer_list_url }}'" class="{% if request.path == trade_offer_list_url %}dock-active{% endif %}">
        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" /></svg>        
        <span class="dock-label">Trades</span>
      </button>
      <button @click="window.location.href = '{{ dashboard_url }}'" class="{% if request.path == dashboard_url or request.path == settings_url %}dock-active{% endif %}">
        {% if user.is_authenticated %}<div tabindex="0" role="button" class="avatar"><div class="max-w-6 rounded-full">{{ user.email|gravatar_no_hover:40 }}</div></div>{% else %}<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>{% endif %}
        <span class="dock-label">Dashboard</span>
      </button>
  </div>
  
  <!-- Alpine Plugins -->
  <script defer src="{% static 'js/alpinejs.collapse@3.14.8.min.js' %}"></script>
  
  <!-- Alpine Core -->
  <script defer src="{% static 'js/alpinejs@3.14.8.min.js' %}"></script>

  <script defer src="{% static 'js/tooltip.js' %}"></script>
  
  {% block javascript %}{% endblock %}
</body>
</html>