<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Wilco Shop{% endblock %}</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f5f5;
        }
        header {
            background: #8e44ad;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header h1 {
            font-size: 1.5rem;
        }
        header a {
            color: white;
            text-decoration: none;
        }
        header nav a {
            opacity: 0.8;
        }
        header nav a:hover {
            opacity: 1;
        }
        main {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .back-link {
            display: inline-block;
            margin-bottom: 1rem;
            color: #8e44ad;
        }
    </style>
</head>
<body>
    <header>
        <h1><a href="/">Wilco Shop (Starlette)</a></h1>
        <nav><a href="/admin">Admin</a></nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <script src="/wilco-static/wilco/loader.js" defer></script>
</body>
</html>
