{% extends "base.html" %}
{% block title %}API - MikroMon{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h1 class="h3 mb-0">API</h1>
    <div class="text-muted">Endpoints overview (UI reference only)</div>
  </div>
  {% if current_user.is_authenticated %}
  <a class="btn btn-outline-secondary" href="{{ url_for('dashboards.index') }}"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  {% endif %}
</div>

<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table table-sm align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>Method</th>
          <th>Path</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        {% for r in routes %}
        <tr>
          <td><span class="badge text-bg-dark">{{ r.method }}</span></td>
          <td><code>{{ r.path }}</code></td>
          <td>{{ r.desc }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="alert alert-info mt-3 mb-0">
  Auth: most endpoints require a logged-in session (cookie). For external integrations use your own reverse-proxy / tokens (MVP has no dedicated API tokens).
</div>
{% endblock %}