{{define "admin_shell_start"}}
{{template "head" .}}
<header class="sticky top-0 z-30 border-b border-neutral-200 bg-white/95 backdrop-blur">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-8">
    <a href="/admin/main" class="text-xl font-semibold">Archi Folio Admin</a>
    <div class="flex items-center gap-4 text-sm">
      <a href="/" class="text-neutral-500 hover:text-neutral-950">View site</a>
      <form method="post" action="/admin/logout"><button class="text-neutral-500 hover:text-neutral-950">Log out</button></form>
    </div>
  </div>
  <div id="admin-tabs" class="border-t border-neutral-200">
    {{template "admin_tabs_inner" .}}
  </div>
</header>
<main class="mx-auto grid max-w-7xl gap-6 px-5 py-8 md:px-8">
  <div id="admin-flash">
    {{template "admin_flash_inner" .}}
  </div>
  <section id="admin-panel">
{{end}}

{{define "admin_shell_end"}}
  </section>
</main>
<footer class="mx-auto max-w-7xl px-5 pb-8 text-xs text-neutral-500 md:px-8">
  <p>Version {{.Version}}</p>
</footer>
</body>
</html>
{{end}}

{{define "admin_tabs_inner"}}
<nav class="mx-auto flex max-w-7xl gap-2 overflow-x-auto px-5 py-3 text-sm md:px-8" aria-label="Admin sections">
  <a href="/admin/main" hx-get="/admin/main" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "main"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Main</a>
  <a href="/admin/projects" hx-get="/admin/projects" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "projects"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Projects</a>
  <a href="/admin/contact-details" hx-get="/admin/contact-details" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "contact-details"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Contact Details</a>
</nav>
{{end}}

{{define "admin_tabs_oob"}}
<div id="admin-tabs" class="border-t border-neutral-200" hx-swap-oob="true">
  {{template "admin_tabs_inner" .}}
</div>
{{end}}

{{define "admin_flash_inner"}}
{{if .Success}}<p class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{.Success}}</p>{{end}}
{{if .Error}}<p class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{{.Error}}</p>{{end}}
{{end}}

{{define "admin_flash_oob"}}
<div id="admin-flash" hx-swap-oob="true">
  {{template "admin_flash_inner" .}}
</div>
{{end}}