<!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 %> - YouTube 강의</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body>
    <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="youtube-frame">
            <iframe
              src="<%= embedUrl %>"
              title="<%= lecture.title %>"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            ></iframe>
          </div>
        </main>
      </div>
    </div>
  </body>
</html>
