---
const { title, isRtl } = Astro.props
const cssPath = isRtl ? ".rtl" : "";

// Smart path resolution: calculate relative path based on directory depth
const pathname = Astro.url.pathname;
// Docs/FAQ pages load the docs-only stylesheet on top of adminlte.css.
const isDocsPage = pathname.includes("/docs/");
// Only count directories, not the filename itself
const pathSegments = pathname.split('/').filter(segment => segment !== '');
const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
---

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{title}</title>

<!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
<script is:inline>
  ;(() => {
    "use strict"
    const root = document.documentElement

    // Applications with their own theming opt out of AdminLTE's color mode
    // entirely, here as well as in the bundle.
    if (root.getAttribute("data-lte-color-mode") === "off") {
      return
    }

    const STORAGE_KEY = "lte-theme"
    let stored = null
    try {
      stored = localStorage.getItem(STORAGE_KEY)
    } catch {
      // localStorage may be unavailable (private mode, sandboxed iframe).
    }
    // Mirror the precedence in color-mode.ts: the visitor's stored choice
    // wins, then a theme this page declared itself, then the OS preference.
    const authored = root.getAttribute("data-bs-theme")
    let resolved = "light"
    if (stored === "dark" || stored === "light") {
      resolved = stored
    } else if (authored === "dark" || authored === "light") {
      resolved = authored
    } else if (globalThis.matchMedia("(prefers-color-scheme: dark)").matches) {
      resolved = "dark"
    }
    root.setAttribute("data-bs-theme", resolved)
    root.style.colorScheme = resolved
    // Flag values computed here, so the bundle does not mistake them for a
    // theme the page declared and stop following the OS preference.
    if (resolved !== authored) {
      root.setAttribute("data-lte-theme-resolved", "")
    }
  })()
</script>
<!--end::Theme Init-->

<!--begin::Accessibility Meta Tags-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
<!--end::Accessibility Meta Tags-->

<!--begin::Primary Meta Tags-->
<meta name="title" content={title} />
<meta name="author" content="ColorlibHQ" />
<meta
  name="description"
  content="AdminLTE is a free Bootstrap 5 admin dashboard template with almost 50 example pages, built with vanilla JS and designed with accessibility in mind."
/>
<meta
  name="keywords"
  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel"
/>
<!--end::Primary Meta Tags-->

<!--begin::Accessibility Features-->
<!-- Skip links will be dynamically added by accessibility.js -->
<meta name="supported-color-schemes" content="light dark" />
<link rel="preload" href={deploymentPath + "css/adminlte" + cssPath + ".css"} as="style" />
<!--end::Accessibility Features-->

<!--begin::Fonts-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
  crossorigin="anonymous"
  media="print"
  onload="this.media='all'"
/>
<!--end::Fonts-->

<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
  crossorigin="anonymous"
/>
<!--end::Third Party Plugin(OverlayScrollbars)-->

<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" 
  crossorigin="anonymous"
/>
<!--end::Third Party Plugin(Bootstrap Icons)-->

<!--begin::Required Plugin(AdminLTE)-->
<link rel="stylesheet" href={deploymentPath + "css/adminlte" + cssPath + ".css"} />
<!--end::Required Plugin(AdminLTE)-->
{isDocsPage && (
  <link rel="stylesheet" href={deploymentPath + "css/adminlte-docs" + cssPath + ".css"} />
)}

{/* Cloudflare's Email Obfuscation rewrites any `package@version` it finds in a
    text node into a "[email protected]" link, which silently breaks every
    copy-paste install snippet on the docs pages — 31 of them on Integrations
    alone. These markers switch it off for the page; the same fix docs.adminlte.io
    uses. Only docs pages carry version-pinned snippets, so only they need it. */}
{isDocsPage && <Fragment set:html={"<!--email_off-->"} />}
