<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{title}}</title>
  <link rel="stylesheet" href="{{cssPath}}">
</head>
<body>
  <main class="upload-page">
    <section class="wedding-card" aria-labelledby="archive-title">
      <div class="poster">
        <img class="poster__image" src="/assets/wedding-poster.png" alt="">

        <div class="poster__plate">
          <h1 id="archive-title">{{title}}</h1>
          <p class="poster__date">2026.05.24 SUN</p>
          <p class="poster__subtitle">OUR WEDDING ARCHIVE</p>
        </div>
      </div>

      <form class="upload-panel" method="post" action="/r/{{slug}}" enctype="multipart/form-data">
        <p class="upload-panel__today">오늘의 순간</p>

        <label class="upload-button file-picker" aria-label="업로드">
          <span>사진 올리기</span>
          <input type="file" name="files" accept="{{accept}}" multiple required>
        </label>

        <button class="submit-fallback" type="submit" aria-label="업로드">사진 올리기</button>
      </form>
    </section>
  </main>
  <script>
    document.querySelectorAll(".upload-panel").forEach((form) => {
      const input = form.querySelector('input[type="file"][name="files"]');
      const submit = form.querySelector('button[type="submit"]');
      input?.addEventListener("change", () => {
        if (input.files && input.files.length > 0) submit?.click();
      });
    });
  </script>
</body>
</html>
