---
// Minimal admin chrome for the dashboard pages. Public HTML (the real gate is
// on every API endpoint), but it redirects to /admin if there's no session, so
// the pages are never usefully reachable without logging in.
const { title = "Admin" } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} — Carlos Arias</title>
    <meta name="robots" content="noindex, nofollow" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <style is:global>
      :root {
        --paper:#f6f5f2; --ink:#14151a; --ink2:#3d3f47; --ink3:#6e7078; --ink4:#9a9ca3;
        --rule:#dfddd7; --seal:#d0342c; --card:#efeeea;
        --serif:"Fraunces",ui-serif,Georgia,serif; --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
        --mono:"JetBrains Mono",ui-monospace,monospace;
      }
      @media (prefers-color-scheme: dark) {
        :root { --paper:#121317; --ink:#edece8; --ink2:#c2c1bd; --ink3:#8b8d95; --ink4:#5e606a;
                --rule:#2a2c33; --seal:#e8564a; --card:#191a1f; }
      }
      * { box-sizing:border-box; }
      body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
             font-size:15px; line-height:1.5; }
      a { color:inherit; }
      .admin-top { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:.85rem;
        padding:.9rem 1.25rem; border-bottom:1px solid var(--rule);
        background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(8px); }
      .admin-seal { display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem;
        border-radius:2px; background:var(--seal); color:#fff; font-family:var(--serif); font-size:.8rem; }
      .admin-top .name { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); }
      .admin-top nav { margin-left:auto; display:flex; gap:1.25rem; align-items:center; }
      .admin-top nav a, .admin-top nav button { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
        text-transform:uppercase; color:var(--ink3); text-decoration:none; background:none; border:0; cursor:pointer; }
      .admin-top nav a:hover, .admin-top nav button:hover { color:var(--ink); }
      main { max-width:60rem; margin:0 auto; padding:2.5rem 1.25rem 5rem; }
      h1 { font-family:var(--serif); font-weight:400; font-size:2rem; letter-spacing:-.01em; margin:0 0 .4rem; }
      .lead { color:var(--ink3); margin:0 0 2rem; }
      .btn { border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:2px;
        padding:.7rem 1.3rem; font-size:.85rem; font-weight:500; cursor:pointer; font-family:var(--sans); }
      .btn:disabled { opacity:.55; cursor:default; }
      .btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule); }
      label { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink4);
        display:block; margin-bottom:.35rem; }
      input[type=text], input[type=url] { width:100%; border:0; border-bottom:1px solid var(--rule);
        background:transparent; padding:.5rem 0; font-size:.95rem; color:var(--ink); font-family:var(--sans); }
      input:focus { outline:none; border-bottom-color:var(--seal); }
      .msg { font-size:.85rem; min-height:1.2em; }
      .msg.error { color:var(--seal); } .msg.ok { color:var(--seal); }
    </style>
  </head>
  <body>
    <header class="admin-top">
      <span class="admin-seal" aria-hidden="true">印</span>
      <span class="name">Carlos Arias · Admin</span>
      <nav>
        <a href="/admin/designer">Web Designer</a>
        <a href="/admin/projects">Projects</a>
        <a href="/" target="_blank">View site ↗</a>
        <button type="button" data-logout>Sign out</button>
      </nav>
    </header>
    <main>
      <slot />
    </main>

    <script>
      // Guard: no admin session -> back to login.
      (async () => {
        try {
          const r = await fetch("/api/adminauth/me", { credentials: "same-origin" });
          const d = await r.json();
          if (!d?.data?.admin) location.replace("/admin");
        } catch { location.replace("/admin"); }
      })();
      document.querySelector("[data-logout]")?.addEventListener("click", async () => {
        try { await fetch("/api/adminauth/logout", { method: "POST", credentials: "same-origin" }); } catch {}
        location.replace("/admin");
      });
    </script>
  </body>
</html>
