{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h2 class="ct-docs-page-h1-title" id="content">
      API Documentation
    </h2>
    <p class="text-muted">
      Interaktive Swagger-Oberfläche für die Dashboard-API.
    </p>
    {% if api_groups %}
    <div class="card my-3">
      <div class="card-body">
        <h5 class="card-title">Dashboard Endpoints</h5>
        <p class="card-text">Übersicht der wichtigsten Endpunkte aus pipelet_dashboard.py, gruppiert wie in API_OVERVIEW.md.</p>
        <div class="row">
          <div class="col-md-4">
            <ul class="nav flex-column small">
              {% for group in api_groups %}
              <li class="nav-item"><a class="nav-link px-0" href="#{{ group.anchor }}">{{ group.title }}</a></li>
              {% endfor %}
            </ul>
          </div>
          <div class="col-md-8">
            {% for group in api_groups %}
            <div class="mb-4" id="{{ group.anchor }}">
              <h6 class="mb-2">{{ group.title }}</h6>
              <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                  <thead class="table-light">
                    <tr>
                      <th style="width: 90px;">Method</th>
                      <th style="width: 200px;">Path</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for ep in group.endpoints %}
                    <tr>
                      <td class="text-nowrap">{{ ep.method }}</td>
                      <td class="text-nowrap">{{ ep.path }}</td>
                      <td>{{ ep.description }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
  <div id="swagger-ui"></div>
</main>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css">
<script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
<script>
  window.addEventListener('load', () => {
    SwaggerUIBundle({
      url: "{{ url_for('api_swagger_spec') }}",
      dom_id: '#swagger-ui',
      presets: [SwaggerUIBundle.presets.apis],
      layout: 'BaseLayout',
    });
  });
</script>
{% endblock %}