<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%- include('partials/favicon') %>
    <title><%= lecture.title %> - PPT 뷰어</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body>
    <% if (typeof slideImageUrls === 'undefined') { slideImageUrls = []; } %>
    <div class="app-shell">
      <%- include('partials/nav', { activeMenu: 'learning' }) %>
      <div class="content-area">
        <main class="viewer-wrap">
          <a href="/learning" class="back-link">← 학습센터로 돌아가기</a>
          <h1><%= lecture.title %></h1>
          <p class="description"><%= lecture.description || "설명이 없습니다." %></p>

          <div class="ppt-tools ppt-tools-row">
            <span>총 <b><%= slides.length %></b>장</span>
            <div class="slide-layout-toggle" role="group" aria-label="슬라이드 한 화면 열 개수">
              <span class="slide-layout-toggle-label">보기</span>
              <button type="button" class="slide-layout-btn" data-cols="1" aria-pressed="true">1단</button>
              <button type="button" class="slide-layout-btn" data-cols="2" aria-pressed="false">2단</button>
              <button type="button" class="slide-layout-btn" data-cols="3" aria-pressed="false">3단</button>
            </div>
          </div>

          <% if (typeof slidesError !== 'undefined' && slidesError && (!slideImageUrls || slideImageUrls.length === 0)) { %>
          <p class="admin-warn">슬라이드 이미지 생성에 실패했습니다. LibreOffice가 설치되어 있는지 확인하세요. (macOS: <code>brew install --cask libreoffice</code>)</p>
          <% } %>

          <% if (!slides.length) { %>
          <p class="empty">슬라이드 내용을 불러올 수 없습니다.</p>
          <% } %>

          <section class="slide-list slide-list--cols-1" id="slide-list">
            <% slides.forEach((slide, index) => { %>
            <article class="slide-card">
              <header>
                <h2>슬라이드 <%= index + 1 %></h2>
              </header>
              <% if (slideImageUrls[index]) { %>
              <div class="slide-image-wrap">
                <img src="<%= slideImageUrls[index] %>" alt="슬라이드 <%= index + 1 %>" class="slide-image" />
              </div>
              <% } %>
            </article>
            <% }) %>
          </section>
        </main>
      </div>
    </div>
    <script>
      (function () {
        var KEY = "learningCenterSlideColumns";
        var list = document.getElementById("slide-list");
        var buttons = document.querySelectorAll(".slide-layout-btn");
        if (!list || !buttons.length) return;

        function applyCols(n) {
          list.classList.remove("slide-list--cols-1", "slide-list--cols-2", "slide-list--cols-3");
          list.classList.add("slide-list--cols-" + n);
          buttons.forEach(function (btn) {
            var on = btn.getAttribute("data-cols") === String(n);
            btn.setAttribute("aria-pressed", on ? "true" : "false");
            btn.classList.toggle("is-active", on);
          });
          try {
            localStorage.setItem(KEY, String(n));
          } catch (e) {}
        }

        var saved = null;
        try {
          saved = localStorage.getItem(KEY);
        } catch (e) {}
        var initial = saved === "2" || saved === "3" ? saved : "1";
        applyCols(initial);

        buttons.forEach(function (btn) {
          btn.addEventListener("click", function () {
            var n = btn.getAttribute("data-cols");
            if (n === "1" || n === "2" || n === "3") applyCols(n);
          });
        });
      })();
    </script>
  </body>
</html>
