{% load static %}
<header id="site-nav"
        class="fixed inset-x-0 top-0 z-50 border-b border-transparent glass transition-all duration-300">
  <nav class="mx-auto flex h-[var(--nav-h)] max-w-7xl items-center justify-between px-5 sm:px-8">

    <a href="{% url 'core:home' %}" class="group flex items-center gap-2.5">
      <span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-gold-400 via-brand-500 to-brand-600 font-display text-sm font-extrabold text-black shadow-lg shadow-brand-500/25 transition-transform duration-500 group-hover:rotate-[18deg]">
        {{ profile.full_name|slice:":1"|upper|default:"M" }}
      </span>
      <span class="font-display text-base font-extrabold tracking-tight text-neutral-100">
        {{ profile.full_name|default:setting.site_name }}
      </span>
    </a>

    <div class="hidden items-center gap-8 md:flex">
      {% url 'core:home' as u_home %}
      {% url 'core:about' as u_about %}
      {% url 'careers:experience' as u_exp %}
      {% url 'careers:project_list' as u_proj %}
      {% url 'blog:list' as u_blog %}
      {% url 'core:contact' as u_contact %}

      <a href="{{ u_home }}" class="link-underline text-sm font-medium text-neutral-400 transition hover:text-neutral-100 {% if request.path == u_home %}is-active !text-neutral-100{% endif %}">Beranda</a>
      <a href="{{ u_about }}" class="link-underline text-sm font-medium text-neutral-400 transition hover:text-neutral-100 {% if request.path == u_about %}is-active !text-neutral-100{% endif %}">Tentang</a>
      <a href="{{ u_exp }}" class="link-underline text-sm font-medium text-neutral-400 transition hover:text-neutral-100 {% if request.path == u_exp %}is-active !text-neutral-100{% endif %}">Pengalaman</a>
      {% if setting.show_projects %}
        <a href="{{ u_proj }}" class="link-underline text-sm font-medium text-neutral-400 transition hover:text-neutral-100 {% if u_proj in request.path %}is-active !text-neutral-100{% endif %}">Proyek</a>
      {% endif %}
      {% if setting.show_blog %}
        <a href="{{ u_blog }}" class="link-underline text-sm font-medium text-neutral-400 transition hover:text-neutral-100 {% if '/blog/' in request.path %}is-active !text-neutral-100{% endif %}">Blog</a>
      {% endif %}
    </div>

    <div class="flex items-center gap-2.5">
      <a href="{% url 'core:search' %}" aria-label="Cari"
         class="hidden h-10 w-10 place-items-center rounded-full border border-white/10 text-neutral-400 transition hover:border-brand-500/50 hover:text-gold-400 sm:grid">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/>
        </svg>
      </a>

      {% if user.is_authenticated %}
        <a href="{% url 'dashboard:index' %}" class="btn btn-ghost hidden !py-2 !px-4 !text-xs sm:inline-flex">Panel</a>
      {% endif %}

      <a href="{% url 'core:contact' %}" class="btn btn-primary btn-shine hidden !py-2.5 !px-5 !text-xs sm:inline-flex">
        Hubungi Saya
      </a>

      <button id="burger" aria-label="Buka menu" aria-expanded="false"
              class="burger flex h-10 w-10 flex-col items-center justify-center gap-[4px] rounded-full border border-white/10 text-neutral-200 md:hidden">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>
</header>

<div id="mobile-backdrop" class="fixed inset-0 z-40 hidden bg-black/70 backdrop-blur-sm md:hidden"></div>

<aside id="mobile-panel"
       class="mobile-panel fixed right-0 top-0 z-50 flex h-[100dvh] w-[82%] max-w-sm flex-col gap-1 border-l border-white/10 bg-ink-900 px-6 pb-8 pt-[calc(var(--nav-h)+1.25rem)] md:hidden">

  <p class="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-neutral-600">Navigasi</p>

  <a href="{% url 'core:home' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Beranda</a>
  <a href="{% url 'core:about' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Tentang</a>
  <a href="{% url 'careers:experience' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Pengalaman</a>
  {% if setting.show_projects %}<a href="{% url 'careers:project_list' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Proyek</a>{% endif %}
  {% if setting.show_blog %}<a href="{% url 'blog:list' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Blog</a>{% endif %}
  <a href="{% url 'core:search' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-neutral-200 transition hover:bg-white/5 hover:text-gold-400">Cari</a>
  {% if user.is_authenticated %}
    <a href="{% url 'dashboard:index' %}" class="rounded-xl px-3 py-3.5 font-display text-lg font-semibold text-brand-400 transition hover:bg-white/5">Panel Admin</a>
  {% endif %}

  <a href="{% url 'core:contact' %}" class="btn btn-primary mt-5 w-full">Hubungi Saya</a>

  {% if social_links %}
    <div class="mt-auto flex flex-wrap gap-2 pt-6">
      {% for link in social_links %}
        <a href="{{ link.url }}" target="_blank" rel="noopener" class="chip">{{ link.display_label }}</a>
      {% endfor %}
    </div>
  {% endif %}
</aside>