<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= typeof title !== 'undefined' ? title : 'WA-Sender' %></title>
  <link rel="stylesheet" href="/static/css/app.css" />
</head>
<body class="bg-slate-100 text-slate-800 min-h-screen">
  <div class="flex min-h-screen">
    <!-- Sidebar -->
    <aside class="w-60 bg-slate-900 text-slate-200 flex flex-col">
      <div class="px-6 py-5 text-xl font-bold text-emerald-400 flex items-center gap-2">
        <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-400"></span> WA-Sender
      </div>
      <nav class="flex-1 px-3 space-y-1 text-sm">
        <% const nav = [
            ['/', 'Dashboard'],
            ['/devices', 'Devices'],
            ['/contacts', 'Contacts'],
            ['/templates', 'Templates'],
            ['/campaigns', 'Campaigns'],
            ['/api-keys', 'API Keys']
        ]; %>
        <% nav.forEach(([href, label]) => { %>
          <a href="<%= href %>"
             class="block px-3 py-2 rounded-lg hover:bg-slate-800 <%= (typeof active !== 'undefined' && active === href) ? 'bg-slate-800 text-emerald-400 font-medium' : '' %>">
            <%= label %>
          </a>
        <% }); %>
      </nav>
      <form action="/logout" method="post" class="p-3">
        <button class="w-full text-left px-3 py-2 rounded-lg text-sm text-rose-300 hover:bg-slate-800">Logout</button>
      </form>
    </aside>

    <!-- Main -->
    <main class="flex-1 p-8 overflow-y-auto">
      <header class="mb-6">
        <h1 class="text-2xl font-semibold"><%= typeof heading !== 'undefined' ? heading : title %></h1>
      </header>
