<!doctype html>
<html lang="ko" data-theme="auto">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>{{ app_name }}</title>
  <link rel="icon" href="data:,">
  <link rel="manifest" href="/static/manifest.webmanifest">
  <meta name="theme-color" content="#0f172a">
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.min.css">
  <link rel="stylesheet" href="/static/styles.css">
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
  <script defer src="/static/app.js"></script>
</head>
<body>
  <header class="container">
    <nav>
      <ul>
        <li><strong>{{ app_name }}</strong></li>
      </ul>
      <ul>
        <li>
          <button class="contrast" id="themeToggle" aria-label="테마 전환">🌙</button>
        </li>
      </ul>
    </nav>
  </header>

  <main class="container">
    <div class="tabs seg" id="topSections" role="tablist">
      <button class="tab-button" aria-selected="true"
              hx-get="/sb?section=fault"
              hx-include="#sbManufacturer"
              hx-target="#tabPanel" hx-swap="innerHTML">고장코드</button>
      <button class="tab-button" aria-selected="false"
              hx-get="/sb?section=tcms"
              hx-include="#sbManufacturer"
              hx-target="#tabPanel" hx-swap="innerHTML">TCMS 코드</button>
      <button class="tab-button" aria-selected="false"
              hx-get="/sb?section=mmicode"
              hx-include="#sbManufacturer"
              hx-target="#tabPanel" hx-swap="innerHTML">MMI 코드</button>
      <button class="tab-button" aria-selected="false"
              hx-get="/sb?section=emergency"
              hx-include="#sbManufacturer"
              hx-target="#tabPanel" hx-swap="innerHTML">응급조치요령</button>
    </div>

    <section id="tabPanel" hx-get="/sb" hx-trigger="load" hx-swap="innerHTML">
      <!-- 제조사 탭 컨텐츠 로드 -->
    </section>
  </main>

  <dialog id="modal"></dialog>

</body>
</html>


