<!doctype html>
<html lang="ko">
  <head>
    <?php include(__DIR__ . "/_include/_head.php") ?>
  </head>
  <body>
    <div class="wrap lessons">
      <?php include(__DIR__ . "/_include/_header.php") ?>

      <div class="container">
        <div class="lessons-wrap">
          <div class="page-title">
            <h3><em>홍길동 선임연구원님</em></h3>
            <p>
              <em>D-66<small>(3월 20일)</small> 까지 필수 콘텐츠</em> 시청을
              완료해주세요.
            </p>
          </div>

          <div class="lessons-area">
            <div class="lessons-gauge">
              <!-- Start-line: 학습 목록이 있으면 자동으로 on 이미지로 변경됨 -->
              <div class="start-line">
                <img
                  src="/img/learning/img_start_off.svg"
                  alt="start"
                />
              </div>
              <?php include("./learning_svg.php") ?>

              <!-- 마커 컨테이너 -->
              <div id="markers-container"></div>

              <!-- 챕터 카드 컨테이너 (JavaScript에서 동적 생성) -->
              <ul class="chapter-list"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- HTML에서 completed 값 설정 (config.js 로드 전에 설정) -->
    <script>


      // 예시: 챕터 1의 모든 레슨을 완료 상태로 설정
      window.learningConfigData = {
        1: {
          completed: true, // 챕터 1 자체 완료
          lessons: [
            { completed: true },
            { completed: true },
            { completed: true },
            { completed: true },
            { completed: true },
            { completed: true },
            { completed: true },
            { completed: true },
          ],
        },
        2: {
          completed: true, // 챕터 2 자체 완료
          lessons: [{ completed: true }, { completed: true }],
        },
        4: {
          completed: true, // 챕터 3 자체 완료
          lessons: [{ completed: true }, { completed: true }],
        },
        5: {
          completed: true, // 챕터 3 자체 완료
          lessons: [{ completed: true }, { completed: true },{ completed: true }, { completed: true },{ completed: true }, { completed: true }],
        },
      };
    </script>

    <!-- 학습 페이지 스크립트 (의존성 순서 유지하며 defer로 비동기 로드) -->
    <script src="/js/learning/config.js" defer></script>
    <script src="/js/learning/gauge.js" defer></script>
    <script src="/js/learning/markers.js" defer></script>
    <script src="/js/learning/chapter-cards.js" defer></script>
    <script src="/js/learning/progress-indicator.js" defer></script>
    <script src="/js/learning/modal.js" defer></script>
    <script src="/js/learning/main.js" defer></script>
  </body>
</html>