{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{% block title %}Illustrations{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="{% static 'app.css' %}">
  {% block extra_head %}{% endblock %}
  <style>
    :root{
      --nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
      --nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
    }
    .topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
    .topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
    .brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
    .nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    .nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
    .nav-btn:hover{background:var(--btn-hover)}
    .nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
    .nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
    .nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
    .nav-btn.danger:hover{filter:brightness(.95)}
    .user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}

    .page{max-width:1100px; margin:18px auto; padding:0 16px}
    .messages{margin:12px 0; display:grid; gap:8px}
    .msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
    .msg.info{border-color:#dbeafe; background:#eff6ff}
    .msg.success{border-color:#bbf7d0; background:#ecfdf5}
    .msg.warning{border-color:#fde68a; background:#fffbeb}
    .msg.error{border-color:#fecaca; background:#fef2f2}
    @media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }

    /* --- additions for mobile hamburger --- */
    .hamburger { display:none; }
    .mobile-menu[hidden]{ display:none; }

    @media (max-width:700px){
      .desktop-nav { display:none; }

      .hamburger{
        display:inline-flex;
        width:38px; height:34px;
        align-items:center; justify-content:center;
        border:1px solid var(--nav-border);
        border-radius:10px;
        background:var(--btn-bg);
        cursor:pointer;
        flex-direction: column;
        gap: 4px;
      }
      .hamburger span{
        display:block;
        width:20px; height:2px;
        margin:0;
        background:var(--nav-ink);
        border-radius:2px;
      }

      .mobile-menu{
        position:absolute; top:56px; right:16px; left:16px; z-index:50;
      }
      .mobile-menu-inner{
        background:#fff; border:1px solid var(--nav-border);
        border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08);
        padding:8px; display:grid; gap:2px;
      }
      .mobile-link{
        display:block; padding:12px 14px; border-radius:10px;
        text-decoration:none; color:var(--nav-ink);
      }
      .mobile-link:hover{ background:var(--btn-hover); }
      .mobile-link.primary{ background:var(--nav-brand); color:#fff; }
      .mobile-link.danger{ color:#b91c1c; }
      .mobile-user{ padding:10px 14px; color:var(--nav-ink-muted); font-size:14px; }
    }

    /* --- user menu (desktop dropdown) --- */
    .user-chip{ cursor:pointer; text-decoration:none; }
    .user-chip:hover{ background:var(--btn-hover); }

    .user-dropdown{ position:relative; }
    .user-menu{
      position:absolute; right:0; top:calc(100% + 8px);
      background:#fff; border:1px solid var(--nav-border);
      border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08);
      min-width: 160px; padding:6px; display:grid; gap:4px; z-index:60;
    }
    .user-menu[hidden]{ display:none !important; }

    .user-menu .menu-item{
      display:block; width:100%; text-align:left;
      padding:10px 12px; border-radius:10px;
      text-decoration:none; color:var(--nav-ink);
      background:transparent; border:none; cursor:pointer;
      font-size:16px;            /* ensure uniform size */
      font-family:inherit;
    }
    .user-menu .menu-item:hover{ background:var(--btn-hover); }
    .user-menu .danger-btn{ color:#b91c1c; }
  </style>
</head>

<body class="{% block body_class %}{% endblock %}">
  <div class="topbar-wrap">
    <div class="topbar">
      <div class="brand">
        <a class="brand-title" href="{% url 'search' %}">Illustrations Database</a>
        <a class="version-link" href="https://git.lan/joshlaymon/Illustrations/wiki" title="Release notes">{{ APP_VERSION }}</a>
      </div>

      <div class="nav-right desktop-nav">
        <a class="nav-btn" href="{% url 'search' %}">Search</a>
        <a class="btn btn-success" href="{% url 'entry_add' %}">+ New Entry</a>
        <a class="nav-btn" href="{% url 'stats' %}">Statistics</a>

        {% if user.is_authenticated %}
          <!-- USER MENU -->
          <div class="user-dropdown">
            <button id="userMenuBtn" class="user-chip" aria-haspopup="true" aria-expanded="false">
              {{ user.username }}
            </button>
            <div id="userMenu" class="user-menu" hidden>
              {% if user.is_staff %}
                <a class="menu-item" href="{% url 'export_csv' %}">Backup</a>
              {% endif %}
              <a class="menu-item" href="{% url 'settings_home' %}">Settings</a>
              <form method="post" action="{% url 'logout' %}">
                {% csrf_token %}
                <button class="menu-item danger-btn" type="submit">Logout</button>
              </form>
            </div>
          </div>
        {% else %}
          <a class="nav-btn primary" href="{% url 'login' %}">Login</a>
        {% endif %}
      </div>

      <button id="hamburger" class="hamburger" aria-label="Open menu" aria-controls="mobileMenu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>

    <div id="mobileMenu" class="mobile-menu" hidden>
      <nav class="mobile-menu-inner" role="menu">
        <a class="mobile-link" href="{% url 'search' %}" role="menuitem">Search</a>
        <a class="mobile-link" href="{% url 'entry_add' %}" role="menuitem">+ New Entry</a>
        <a class="mobile-link" href="{% url 'stats' %}" role="menuitem">Statistics</a>

        {% if user.is_authenticated and user.is_staff %}
          <a class="mobile-link" href="{% url 'export_csv' %}" role="menuitem">Backup</a>
        {% endif %}

        {% if user.is_authenticated %}
          <div class="mobile-user">Signed in: {{ user.username }}</div>
          <a class="mobile-link" href="{% url 'settings_home' %}" role="menuitem">Settings</a>
          <form method="post" action="{% url 'logout' %}" role="menuitem">{% csrf_token %}
            <button class="mobile-link danger" style="width:100%; text-align:left;">Logout</button>
          </form>
        {% else %}
          <a class="mobile-link primary" href="{% url 'login' %}" role="menuitem">Login</a>
        {% endif %}
      </nav>
    </div>
  </div>

  <div class="page">
    {% if messages %}
      <div class="messages">
        {% for message in messages %}
          <div class="msg {{ message.tags|default:'info' }}">{{ message }}</div>
        {% endfor %}
      </div>
    {% endif %}
  </div>

  <main class="page">
    {% block content %}{% endblock %}
  </main>

  {% block extra_body %}{% endblock %}

  <script>
    (function () {
      /* mobile hamburger */
      const btn = document.getElementById('hamburger');
      const menu = document.getElementById('mobileMenu');
      if (btn && menu) {
        const open = () => { menu.hidden = false; btn.setAttribute('aria-expanded','true'); };
        const close = () => { menu.hidden = true; btn.setAttribute('aria-expanded','false'); };

        btn.addEventListener('click', () => (menu.hidden ? open() : close()));
        document.addEventListener('click', (e) => {
          if (menu.hidden) return;
          if (!menu.contains(e.target) && !btn.contains(e.target)) close();
        });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
        window.matchMedia('(min-width: 701px)').addEventListener('change', () => close());
      }

      /* USER MENU: desktop dropdown */
      const userBtn = document.getElementById('userMenuBtn');
      const userMenu = document.getElementById('userMenu');
      if (userBtn && userMenu) {
        const open = () => { userMenu.hidden = false; userBtn.setAttribute('aria-expanded','true'); };
        const close = () => { userMenu.hidden = true; userBtn.setAttribute('aria-expanded','false'); };

        userBtn.addEventListener('click', (e) => { e.stopPropagation(); userMenu.hidden ? open() : close(); });

        document.addEventListener('click', (e) => {
          if (userMenu.hidden) return;
          if (!userMenu.contains(e.target) && !userBtn.contains(e.target)) close();
        });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });

        userMenu.addEventListener('click', (e) => {
          if (e.target.closest('a') || e.target.closest('button')) close();
        });

        window.addEventListener('blur', close);
      }
    })();
  </script>
</body>
</html>