<!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>
          <img src="<%= img.path %>" alt="Bild" style="max-width: 100%; border-radius: 8px;" />
        </article>
      <% }) %>
    <% } %>
  </div>
</main>
</body>
</html>
