---
interface Props { section?: string; sectionHref?: string }
import { readOnlyMode } from "../lib/runtime";
const { section, sectionHref } = Astro.props;
const pathname = Astro.url.pathname.replace(/\/+$/, "") + "/";

let inferredLabel: string | undefined;
let inferredHref = "/app/";

if (pathname.startsWith("/app/inventory/")) {
  if (pathname === "/app/inventory/") {
    inferredLabel = "Inventory";
    inferredHref = "/app/";
  } else {
    inferredLabel = "Inventory";
    inferredHref = "/app/inventory/";
  }
} else if (pathname.startsWith("/app/ingredients/")) {
  inferredLabel = "Ingredients";
  inferredHref = "/app/?type=ingredient";
} else if (pathname.startsWith("/app/recipe-books/")) {
  inferredLabel = "Recipe Books";
  inferredHref = "/app/?type=book";
} else if (pathname.startsWith("/app/recipes/")) {
  inferredLabel = "Recipes";
  inferredHref = "/app/?type=recipe";
} else if (pathname.startsWith("/app/archive")) {
  inferredLabel = "Archive";
  inferredHref = "/app/";
} else if (pathname.startsWith("/tools/purchasing-review")) {
  inferredLabel = "Purchasing Review";
  inferredHref = "/app/";
}

const resolvedSection = section ?? inferredLabel;
const resolvedHref = sectionHref ?? inferredHref;
---
<nav class="detail-utility" aria-label="Entity navigation">
  <div class="detail-context">
    <a class="detail-back" href={resolvedHref} aria-label={`Back to ${resolvedSection??"home"}`} data-back-link>‹</a>
    <a class="detail-avatar" href="/app/" aria-label="Recipe Book home">RB</a>
    <ol class="detail-breadcrumbs">
      <li><a href="/app/">Home</a></li>
      {resolvedSection&&<li aria-current="page"><a href={resolvedHref}>{resolvedSection}</a></li>}
    </ol>
    <slot />
  </div>
  <div class="detail-tools">
    <form action="/app/" role="search" class="detail-search-form">
      <span class="search-input-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
      </span>
      <input name="q" type="text" placeholder="Search" aria-label="Search all items" class="search-field" autocomplete="off"/>
      <button type="button" class="search-clear-btn" aria-label="Clear search" title="Clear search">
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
      </button>
    </form>
    {!readOnlyMode&&<details class="detail-new-menu">
      <summary><span class="new-trigger-plus" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></span><span>New</span></summary>
      <div>
        <a href="/app/recipes/new/"><span class="new-menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M13.125 0C13.6428 0 14.0625 0.419733 14.0625 0.9375V14.0625C14.0625 14.5803 13.6428 15 13.125 15H0.9375C0.419733 15 0 14.5803 0 14.0625V0.9375C0 0.419733 0.419733 0 0.9375 0H13.125ZM12.1875 1.875H1.875V13.125H12.1875V1.875ZM11.25 9.375V11.25H5.625V9.375H11.25ZM4.6875 9.375V11.25H2.8125V9.375H4.6875ZM11.25 6.5625V8.4375H5.625V6.5625H11.25ZM4.6875 6.5625V8.4375H2.8125V6.5625H4.6875ZM11.25 3.75V5.625H5.625V3.75H11.25ZM4.6875 3.75V5.625H2.8125V3.75H4.6875Z" style="transform: scale(1.1, 1.1) translate(4px, 3.5px);"/></svg></span><strong>Recipe</strong></a>
        <a href="/app/recipe-books/new/"><span class="new-menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M14.0347 0V16H3.12658C1.50098 16 0.527344 15.0264 0.527344 13.4008V2.59923C0.527344 0.97364 1.50098 0 3.12658 0H14.0347ZM12.1594 12.6763L3.95747 12.6765C2.75227 12.6765C2.40226 12.9098 2.40226 13.4008C2.40226 13.9909 2.53647 14.1251 3.12658 14.1251H12.1598L12.1594 12.6763ZM12.1598 1.87492H3.12658C2.53647 1.87492 2.40226 2.00913 2.40226 2.59923L2.40185 10.9999C2.85223 10.8678 3.37428 10.8015 3.95747 10.8015L12.1594 10.8014L12.1598 1.87492ZM10.0768 3.80157V5.67649H4.45204V3.80157H10.0768Z" style="transform: scale(1.1, 1.1) translate(3.5px, 2.5px);"/></svg></span><strong>Recipe book</strong></a>
      </div>
    </details>}
  </div>
</nav>
<script>
  document.querySelectorAll('.detail-search-form').forEach((formEl) => {
    const form = formEl as HTMLFormElement;
    const input = form.querySelector('.search-field') as HTMLInputElement | null;
    const clearBtn = form.querySelector('.search-clear-btn') as HTMLButtonElement | null;
    if (!input || !clearBtn) return;
    const sync = () => {
      if (input.value.trim().length > 0) form.classList.add('has-value');
      else form.classList.remove('has-value');
    };
    input.addEventListener('input', sync);
    clearBtn.addEventListener('click', () => {
      input.value = '';
      sync();
      input.focus();
    });
    sync();
  });

  document.querySelectorAll('.detail-back[data-back-link]').forEach((link) => {
    link.addEventListener('click', (e) => {
      if (window.history.length > 1 && document.referrer && new URL(document.referrer, window.location.origin).origin === window.location.origin) {
        e.preventDefault();
        window.history.back();
      }
    });
  });
</script>