<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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">
            <span>총 <b><%= slides.length %></b>장</span>
          </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">
            <% slides.forEach((slide, index) => { %>
            <article class="slide-card">
              <header>
                <h2>슬라이드 <%= index + 1 %></h2>
                <% if (slide.title) { %><p><%= slide.title %></p><% } %>
              </header>
              <% if (slideImageUrls[index]) { %>
              <div class="slide-image-wrap">
                <img src="<%= slideImageUrls[index] %>" alt="슬라이드 <%= index + 1 %>" class="slide-image" />
              </div>
              <% } %>
              <% if (slide.lines && slide.lines.length > 0) { %>
              <ul>
                <% slide.lines.forEach((line) => { %>
                <li><%= line %></li>
                <% }) %>
              </ul>
              <% } %>
            </article>
            <% }) %>
          </section>
        </main>
      </div>
    </div>
  </body>
</html>
