<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weddings — Admin</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; background: #f4f4f2; color: #222; }
    .app-header {
      position: sticky; top: 0; z-index: 10;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px; background: #fff; border-bottom: 1px solid #ddd;
    }
    .app-header .brand { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; }
    .app-main { max-width: 900px; margin: 0 auto; padding: 24px; }
    .event-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  </style>
</head>
<body>
  <header class="app-header">
    <span class="brand">Weddings</span>
    <form method="POST" action="/admin/logout"><button type="submit">Log out</button></form>
  </header>

  <main class="app-main">
  <h1>Your Weddings</h1>
  <p><a href="/admin/events/new">+ Add Wedding</a> &middot; <a href="/admin/inquiries">Inquiries</a> &middot; <a href="/admin/clients">Clients</a></p>

  <section>
    <h2>Door Scanner</h2>
    <p>Works for any event — no login needed. Hand this link to door staff on the wedding day.</p>
    <a href="/scan">Open Door Scanner</a>
    <button type="button" class="copy-btn" data-copy="<%= baseUrl %>/scan">Copy Link</button>
  </section>

  <ul>
    <% events.forEach(function(event) { %>
      <li class="event-row">
        <a href="/admin/events/<%= event.id %>">
          <%= event.couple_names %> — <%= event.wedding_date %> (<%= event.status %>)
        </a>
        <a href="/admin/events/<%= event.id %>/edit">Edit</a>
      </li>
    <% }) %>
    <% if (events.length === 0) { %>
      <li>No weddings yet.</li>
    <% } %>
  </ul>

  <script>
    document.querySelectorAll('.copy-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        navigator.clipboard.writeText(btn.dataset.copy).then(function () {
          var original = btn.textContent;
          btn.textContent = 'Copied!';
          setTimeout(function () { btn.textContent = original; }, 1500);
        });
      });
    });
  </script>
  </main>
</body>
</html>
