---
import '../styles/admin.css';
import { driverName } from '../lib/store.js';
export interface Props { title: string; active?: string; crumbs?: { label: string; href?: string }[]; }
const { title, active = '', crumbs = [] } = Astro.props;
const driver = driverName();
const nav = [
  { key:'dashboard', label:'Dashboard', href:'/admin', icon:'M3 13h8V3H3v10Zm0 8h8v-6H3v6Zm10 0h8V11h-8v10Zm0-18v6h8V3h-8Z' },
  { key:'bestellungen', label:'Bestellungen', href:'/admin/bestellungen', icon:'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4H6Zm.5 2h11l1.5 2H5l1.5-2ZM5 8h14v12H5V8Zm4 2a3 3 0 0 0 6 0' },
  { key:'produkte', label:'Produkte', href:'/admin/produkte', icon:'M20.5 7.3 12 2 3.5 7.3 12 12.6l8.5-5.3ZM3 9v8l8 5v-8L3 9Zm10 13 8-5V9l-8 5v8Z' },
  { key:'kunden', label:'Kunden', href:'/admin/kunden', icon:'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z' },
  { key:'analytics', label:'Analytics', href:'/admin/analytics', icon:'M4 20V10m6 10V4m6 16v-7m4 7H2' },
  { key:'einstellungen', label:'Einstellungen', href:'/admin/einstellungen', icon:'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm9 4-2 .5.4 2-1.7 1.3-1.7-1.2-1.8.8-.3 2H10l-.3-2-1.8-.8-1.7 1.2L4.5 14.5 5 12.5 3 12l.5-2 2-.5-.4-2L6.8 6.2l1.7 1.2 1.8-.8.3-2h2.8l.3 2 1.8.8 1.7-1.2 1.7 1.3-.4 2 2 .5-.5 2Z' },
];
---
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex" />
  <title>{title} · PMPNZNG Admin</title>
</head>
<body class="admin-body">
  <div class="admin-shell">
    <aside class="s-side">
      <div class="s-brand">
        <div class="s-brand-logo">P</div>
        <div><div class="s-brand-name">PMPNZNG</div><div class="s-brand-sub">Admin · {driver === 'directus' ? 'Directus' : 'SQLite'}</div></div>
      </div>
      <nav class="s-nav">
        {nav.map((n) => (
          <a href={n.href} class={active === n.key ? 'active' : ''}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={n.icon}/></svg>
            {n.label}
          </a>
        ))}
        <div class="s-nav-sec">Vertriebskanal</div>
        <a href="/" target="_blank">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
          Online-Shop ↗
        </a>
      </nav>
      <div class="s-side-foot">Demo-Backend · <a href="/">Shop ansehen</a></div>
    </aside>

    <div class="s-main">
      <header class="s-topbar">
        <div>
          <div class="s-crumbs">
            <a href="/admin">Admin</a>
            {crumbs.map((c) => (<><span>/</span>{c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}</>))}
          </div>
          <div class="s-title">{title}</div>
        </div>
        <div class="s-actions"><slot name="actions" /></div>
      </header>
      <div class="s-content"><slot /></div>
    </div>
  </div>
</body>
</html>
