<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>{{ chapter.title }}</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<section class="cover" data-title="CH {{ chapter.number }} · {{ chapter.title }}">
  <div class="brand">WING-OPS USER MANUAL</div>
  <div class="ch-num">CHAPTER {{ chapter.number }}</div>
  <h1 class="title">{{ chapter.title }}</h1>
  <div class="subtitle">{{ chapter.subtitle }}</div>
  <div class="meta">
    <span class="screens-count">{{ chapter.screens | length }}</span> 개 화면 ·
    총 {{ chapter.screens | length }} 섹션
  </div>
</section>

{% for screen in chapter.screens %}
<section class="screen" data-chapter="CH {{ chapter.number }} · {{ chapter.title }}">
  <div class="screen-header">
    <div>
      <span class="screen-index">{{ screen.id }}</span>
      <span class="screen-name">{{ screen.name }}</span>
    </div>
    <div class="menu-path">📍 {{ screen.menuPath }}</div>
  </div>

  <div class="screenshot">
    <img src="manual/image{{ screen.imageIndex }}.png" alt="{{ screen.name }}">
  </div>

  <h3 class="section-label">개요</h3>
  <p class="overview">{{ screen.overview }}</p>

  {% if screen.description %}
  <h3 class="section-label">화면 설명</h3>
  <p class="description">{{ screen.description }}</p>
  {% endif %}

  {% if screen.procedure %}
  <h3 class="section-label">사용 절차</h3>
  <ol class="procedure">
    {% for step in screen.procedure %}
    <li>{{ step }}</li>
    {% endfor %}
  </ol>
  {% endif %}

  {% if screen.inputs %}
  <h3 class="section-label">입력 항목</h3>
  <table class="inputs">
    <thead>
      <tr>
        <th style="width: 22%;">항목</th>
        <th style="width: 18%;">유형</th>
        <th style="width: 10%;">필수</th>
        <th>설명</th>
      </tr>
    </thead>
    <tbody>
      {% for inp in screen.inputs %}
      <tr>
        <td><strong>{{ inp.label }}</strong></td>
        <td>{{ inp.type }}</td>
        <td class="{% if inp.required %}required-yes{% else %}required-no{% endif %}">
          {% if inp.required %}●{% else %}○{% endif %}
        </td>
        <td>{{ inp.desc }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  {% if screen.notes %}
  <div class="notes-box">
    <h3 class="section-label">주의사항</h3>
    <ul class="notes">
      {% for note in screen.notes %}
      <li>{{ note }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
</section>
{% endfor %}

</body>
</html>
