/* Shared layout — inject navbar, mark active tab by current pathname */
(function () {
  const NAV_LINKS = [
    { href: '/',                    icon: 'bi-upload',   label: 'Upload File' },
    { href: '/email-convert.html', icon: 'bi-envelope',  label: 'Email Convert' },
  ];

  const path = location.pathname.replace(/\/$/, '') || '/';

  const links = NAV_LINKS.map(L => {
    const active = (L.href === '/' ? path === '/' : path.startsWith(L.href.replace('.html', '')));
    return `<li class="nav-item">
      <a class="nav-link py-1 px-3 small${active ? ' active' : ''}" href="${L.href}">
        <i class="bi ${L.icon} me-1"></i>${L.label}
      </a>
    </li>`;
  }).join('');

  const html = `
  <nav class="navbar navbar-light bg-white border-bottom px-4 py-2 d-flex justify-content-between">
    <div class="d-flex align-items-center gap-3">
      <span class="navbar-brand fw-bold mb-0">
        MarkItDown <span class="text-muted fw-normal">vs</span> Docling
        <span class="text-muted fw-normal">vs</span> Unlimited-OCR
      </span>
      <ul class="nav nav-pills">${links}</ul>
    </div>
    <span class="badge bg-primary-subtle text-primary">Demo — LLM Input Processing</span>
  </nav>`;

  const el = document.getElementById('app-nav');
  if (el) el.outerHTML = html;
})();