{% extends "docs/base.html" %}

{% block docs_content %}
  <div class="mb-4">
    <h1 class="h3 mb-1">{{ page.heading }}</h1>
    <p class="text-muted mb-0">{{ page.summary }}</p>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Endpoints</h2>
      <div class="bg-light border rounded p-3">
        <pre class="mb-0"><code>{% for endpoint in page.endpoints %}{{ endpoint }}{% if not loop.last %}
{% endif %}{% endfor %}</code></pre>
      </div>
      <div class="mt-2 d-flex flex-wrap gap-2">
        {% for badge in page.badges %}
          <span class="badge text-bg-secondary">{{ badge }}</span>
        {% endfor %}
      </div>
    </div>
  </div>

  {% if page.request_items|length > 0 %}
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h6 text-uppercase text-muted">{{ page.request_heading }}</h2>
        <ul class="mb-0">
          {% for item in page.request_items %}
            <li>{{ item }}</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endif %}

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Example</h2>
      <div class="bg-light border rounded p-3">
        <pre class="mb-0"><code>{{ page.example }}</code></pre>
      </div>
    </div>
  </div>

  {% if page.response_text %}
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2 class="h6 text-uppercase text-muted">{{ page.response_heading }}</h2>
        <p class="mb-0">{{ page.response_text }}</p>
      </div>
    </div>
  {% endif %}

  <div class="card shadow-sm">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Errors</h2>
      <ul class="mb-0">
        {% for item in page.errors %}
          <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
{% endblock %}