<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>API Docs</title>
  <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"></script>

  <style>
    body {
      margin: 0;
      display: flex;
      height: 100vh;
      font-family: sans-serif;
    }

    #menu {
      width: 240px;
      background: #1e1e1e;
      color: white;
      padding: 10px;
    }

    #menu button {
      display: block;
      width: 100%;
      margin-bottom: 8px;
      padding: 8px;
      background: #2e2e2e;
      border: none;
      color: white;
      text-align: left;
      cursor: pointer;
    }

    #menu button:hover {
      background: #444;
    }

    #content {
      flex: 1;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="menu">
    {% for service in services %}
      <button id="{{service.id}}" data-spec="{{service.file}}">{{service.name}}</button>
    {% endfor %}
  </div>
  <div id="content"></div>

  <script>
    const content = document.getElementById("content")
    const buttons = document.querySelectorAll("#menu button")

    function loadService(name, pushState = true) {
      const btn = document.getElementById(name)
      if (!btn) {
        console.warn("Unknown service:", name)
        return
      }

      const spec = btn.dataset.spec
      content.innerHTML = ""

      Redoc.init(spec, {}, content)

      if (pushState) {
        const url = new URL(window.location)
        url.searchParams.set("service", name)
        history.pushState({}, "", url)
      }

      buttons.forEach(b =>
        b.classList.toggle("active", b.id === name)
      )
    }

    // click handling
    buttons.forEach(btn => {
      btn.addEventListener("click", () => {
        loadService(btn.id)
      })
    })

    // initial load
    const params = new URLSearchParams(window.location.search)
    const initial = params.get("service") || buttons[0].id
    loadService(initial, false)

    // back / forward navigation
    window.addEventListener("popstate", () => {
      const name =
        new URLSearchParams(location.search).get("service") || buttons[0].id
      loadService(name, false)
    })
  </script>


</body>
</html>
