<!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><%= typeof pageTitle !== 'undefined' ? pageTitle : '학습센터' %> - NCue</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body>
    <% if (typeof filters === 'undefined') { filters = { q: '', type: 'all', tag: '' }; } %>
    <% if (typeof availableTags === 'undefined') { availableTags = []; } %>
    <% if (typeof pagination === 'undefined') { pagination = { page: 1, totalPages: 1, totalCount: 0, hasPrev: false, hasNext: false, prevQuery: '', nextQuery: '', pages: [] }; } %>
    <% if (typeof lectures === 'undefined') { lectures = []; } %>
    <% var viewerBasePath = typeof viewerBasePath !== 'undefined' ? viewerBasePath : '/learning'; %>
    <% var learningApiPath = typeof learningApiPath !== 'undefined' ? learningApiPath : '/api/learning/lectures'; %>
    <% var adminRegisterHref = typeof adminRegisterHref !== 'undefined' ? adminRegisterHref : '/admin'; %>
    <% var navMenu = typeof navActiveMenu !== 'undefined' ? navActiveMenu : 'learning'; %>
    <% var pTitle = typeof pageTitle !== 'undefined' ? pageTitle : '학습센터'; %>
    <% var hTitle = typeof heroTitle !== 'undefined' ? heroTitle : '최신 컨텐츠로 학습하고, 바로 업무에 적용하세요.'; %>
    <% var hDesc = typeof heroDesc !== 'undefined' ? heroDesc : '유튜브·PPT·동영상 파일·웹 링크를 등록한 뒤, 목록에서 클릭하여 강의를 시청하거나 외부 자료를 열 수 있습니다.'; %>
    <% var listHeading = typeof sectionListHeading !== 'undefined' ? sectionListHeading : '등록된 강의'; %>
    <% var filterTitle = typeof filterPanelTitle !== 'undefined' ? filterPanelTitle : '강의 검색/필터'; %>
    <div class="app-shell">
      <%- include('partials/nav', { activeMenu: navMenu }) %>
      <div class="content-area">
        <header class="topbar">
          <h1><%= pTitle %></h1>
          <% if (typeof adminMode !== 'undefined' && adminMode) { %>
          <a href="<%= adminRegisterHref %>" class="top-action-link">학습 등록</a>
          <% } %>
        </header>
        <main class="container">
          <section class="hero panel">
            <h2><%= hTitle %></h2>
            <p><%= hDesc %></p>
          </section>
          <section class="panel filter-panel">
            <h2><%= filterTitle %></h2>
            <form action="<%= viewerBasePath %>" method="get" class="filter-grid">
              <label>
                검색어
                <input type="text" name="q" id="learning-filter-q" value="<%= filters.q %>" placeholder="제목·설명·미리보기·파일명 (클로드↔claude)" autocomplete="off" />
              </label>
              <label>
                타입
                <select name="type">
                  <option value="all" <%= filters.type === "all" ? "selected" : "" %>>전체</option>
                  <option value="youtube" <%= filters.type === "youtube" ? "selected" : "" %>>YouTube</option>
                  <option value="ppt" <%= filters.type === "ppt" ? "selected" : "" %>>PPT/PDF</option>
                  <option value="video" <%= filters.type === "video" ? "selected" : "" %>>동영상 파일</option>
                  <option value="link" <%= filters.type === "link" ? "selected" : "" %>>웹 링크</option>
                  <option value="news" <%= filters.type === "news" ? "selected" : "" %>>뉴스 URL</option>
                </select>
              </label>
              <label>
                태그
                <select name="tag">
                  <option value="">전체</option>
                  <% (availableTags || []).forEach((oneTag) => { %>
                  <option value="<%= oneTag %>" <%= filters.tag === oneTag ? "selected" : "" %>><%= oneTag %></option>
                  <% }) %>
                </select>
              </label>
              <div class="filter-row-bottom">
                <div class="category-radios" id="category-filter">
                  <label><input type="radio" name="category" value="" <%= !filters.category ? 'checked' : '' %> />전체</label>
                  <label><input type="radio" name="category" value="AX 사고 전환" <%= filters.category === 'AX 사고 전환' ? 'checked' : '' %> />AX 사고 전환</label>
                  <label><input type="radio" name="category" value="AI 툴 활용" <%= filters.category === 'AI 툴 활용' ? 'checked' : '' %> />AI 툴 활용</label>
                  <label><input type="radio" name="category" value="AI Agent" <%= filters.category === 'AI Agent' ? 'checked' : '' %> />AI Agent</label>
                  <label><input type="radio" name="category" value="바이브 코딩" <%= filters.category === '바이브 코딩' ? 'checked' : '' %> />바이브 코딩</label>
                </div>
                <div class="filter-actions">
                  <button type="submit">필터 적용</button>
                  <a class="link-muted" href="<%= viewerBasePath %>">초기화</a>
                </div>
              </div>
            </form>
          </section>
          <section class="panel">
            <div class="section-head">
              <h2><%= listHeading %></h2>
              <span class="count-chip">총 <span id="lecture-total-count"><%= pagination.totalCount %></span>건</span>
            </div>
            <div id="lecture-results-root">
            <% if (!lectures.length) { %>
            <p class="empty" id="lecture-empty-msg">등록된 항목이 없습니다.</p>
            <% } else { %>
            <div class="lecture-grid" id="lecture-grid">
              <%- include('partials/lecture-cards') %>
            </div>
            <% if (pagination.hasNext) { %>
            <div id="lecture-infinite-footer">
            <div id="infinite-scroll-sentinel" class="infinite-scroll-sentinel" data-next-page="<%= pagination.page + 1 %>" data-has-next="true"></div>
            <p class="infinite-scroll-loading" id="infinite-scroll-loading" style="display:none;text-align:center;padding:16px;color:#666;">불러오는 중...</p>
            <div class="lecture-load-more-wrap" id="lecture-load-more-wrap">
              <button type="button" class="lecture-load-more-btn" id="lecture-load-more-btn">더 불러오기</button>
            </div>
            </div>
            <% } %>
            <% } %>
            </div>
          </section>
        </main>
      </div>
    </div>
    <div id="lecture-page-config" data-learning-api="<%= learningApiPath %>" data-viewer-base="<%= viewerBasePath %>" hidden aria-hidden="true"></div>
    <script src="/public/js/learning-infinite.js" defer></script>
  </body>
</html>
