---
// Admin layout for protected pages
---

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Admin - 恩群數位行銷</title>
  <meta name="description" content="Admin panel for Enchun Digital Marketing" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
  <header class="admin-header">
    <nav class="admin-nav">
      <div class="admin-nav-brand">
        <a href="/admin/dashboard">Admin Panel</a>
      </div>
      <ul class="admin-nav-links">
        <li><a href="/admin/dashboard">Dashboard</a></li>
        <li><a href="/admin/cms">CMS</a></li>
        <li><button id="logout-btn">Logout</button></li>
      </ul>
    </nav>
  </header>
  <main class="admin-main">
    <slot />
  </main>
</body>
</html>

<script>
  // Simple logout handler
  document.getElementById('logout-btn')?.addEventListener('click', async () => {
    // Call logout API or redirect
    window.location.href = 'https://cms.enchun.tw/admin/logout';
  });
</script>

<style>
  .admin-header {
    background: #333;
    color: white;
    padding: 10px 0;
  }
  .admin-nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .admin-nav-brand a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
  .admin-nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
  }
  .admin-nav-links a {
    color: white;
    text-decoration: none;
  }
  .admin-nav-links button {
    background: #555;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  .admin-main {
    padding: 20px;
    min-height: calc(100vh - 60px);
  }
</style>