<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Startseite – Urlaubsbilder</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<nav class="container-fluid">
  <ul>
    <li><strong>Urlaubsbilder</strong></li>
  </ul>
  <ul>
    <% if (user) { %>
      <li><a href="/upload">Bild hochladen</a></li>
      <li><a href="/logout">Logout</a></li>
    <% } else { %>
      <li><a href="/auth/google">Login mit Google</a></li>
    <% } %>
  </ul>
</nav>

<main class="container">
  <h2>Geteilte Urlaubsbilder</h2>

  <div class="grid">
    <% if (images.length === 0) { %>
      <p>Noch keine Bilder hochgeladen.</p>
    <% } else { %>
      <% images.forEach(img => { %>
        <article>
          <h3><%= img.title %></h3>
          <p><%= img.description %></p>
          <figure>
            <img src="<%= img.path %>" alt="<%= img.title %>" style="max-width: 100%; border-radius: 8px;" />
            <figcaption>Hochgeladen von <strong><%= img.uploader %></strong></figcaption>
          </figure>
          <% if (user && (user.displayName === img.uploader || user.emails[0].value === 'DEINE_ADMIN_MAIL@deine-domain.de')) { %>
            <form action="/delete/<%= img.id %>" method="POST" style="margin-top: 0.5rem;">
              <button type="submit" onclick="return confirm('Bild wirklich löschen?')">🗑️ Löschen</button>
            </form>
          <% } %>
        </article>
      <% }) %>
    <% } %>
  </div>
</main>
</body>
</html>
