<?php

declare(strict_types=1);

/**
 * @param  list<array{href: string, label: string}>  $nav
 */
function keyportal_layout_start(string $title, array $nav = []): void
{
    ?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?> – key.luetcke.eu</title>
    <style>
        :root { --bg: #0f172a; --card: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --accent: #6366f1; --danger: #f87171; }
        * { box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
        header { background: var(--card); border-bottom: 1px solid #334155; padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
        header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
        header a { color: var(--muted); text-decoration: none; }
        header a:hover { color: var(--accent); }
        main { max-width: 56rem; margin: 0 auto; padding: 1.5rem; }
        .card { background: var(--card); border: 1px solid #334155; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; }
        h1 { font-size: 1.25rem; margin: 0 0 1rem; }
        label { display: block; font-size: 0.875rem; margin: 0.75rem 0 0.25rem; color: var(--muted); }
        input[type="text"], input[type="password"], textarea {
            width: 100%; max-width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid #475569;
            background: #0f172a; color: var(--text); font-size: 1rem;
        }
        textarea { min-height: 8rem; font-family: ui-monospace, monospace; }
        button, .btn {
            display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; background: var(--accent);
            color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 0.875rem;
        }
        button.danger, .btn.danger { background: #991b1b; }
        button.secondary { background: #475569; }
        .error { color: var(--danger); margin: 0.5rem 0; font-size: 0.875rem; }
        table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #334155; vertical-align: top; }
        th { color: var(--muted); font-weight: 600; }
        code { background: #0f172a; padding: 0.15rem 0.35rem; border-radius: 0.25rem; font-size: 0.8125rem; word-break: break-all; }
        .row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    </style>
</head>
<body>
<header>
    <strong>Key-Portal</strong>
    <nav>
        <?php foreach ($nav as $item): ?>
            <a href="<?= htmlspecialchars($item['href'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8') ?></a>
        <?php endforeach; ?>
    </nav>
</header>
<main>
<?php
}

function keyportal_layout_end(): void
{
    ?>
</main>
</body>
</html>
<?php
}
