{% extends "asyncdocs/base.html" %}
{% load static %}
{% load asyncdocs_extras %}
{% block title %}{{ spec.title|default:slug }} — Async API Docs{% endblock %}

{% block topbar_extra %}
{% if spec %}
<span class="adocs-chip">v{{ spec.version }}</span>
<span class="adocs-chip adocs-chip-accent">AsyncAPI {{ spec.asyncapi_version }}</span>
{% endif %}
{% endblock %}

{% block topbar_right %}
{% if spec %}
<a class="adocs-nav-link" href="{{ raw_url }}">Raw (YAML)</a>
<a class="adocs-nav-link" href="{{ raw_url }}?format=json">Raw (JSON)</a>
{% endif %}
{% endblock %}

{% block body %}
{% if spec_error %}
<main class="adocs-main">
  <div class="adocs-card" style="border-color: var(--adocs-danger);">
    <h2 style="margin-top:0; color: var(--adocs-danger);">This spec failed to parse</h2>
    <p><code>{{ slug }}</code>: {{ spec_error }}</p>
    <p class="adocs-hint">Run <code>python manage.py asyncdocs_check</code> to validate every registered spec.</p>
  </div>
</main>
{% else %}
<div class="adocs-shell">
  <nav class="adocs-sidebar">
    <h3>Channels ({{ spec.channels|length }})</h3>
    {% for channel in spec.channels %}
    <div class="adocs-channel-link {% if forloop.first %}active{% endif %}" data-channel-index="{{ forloop.counter0 }}">
      <span class="adocs-badge adocs-badge-{{ channel.action }}">{{ channel.action|slice:":3" }}</span>
      <span class="adocs-path">{{ channel.path }}</span>
    </div>
    {% endfor %}
  </nav>

  <main class="adocs-main">
    <p class="adocs-lede">{{ spec.description }}</p>

    <section class="adocs-section">
      <h2>Servers</h2>
      {% for name, server in spec.servers.items %}
      <div class="adocs-card" style="margin-bottom:8px;">
        <span class="adocs-chip adocs-chip-accent">{{ server.protocol }}</span>
        <span style="font-weight:600; margin-left:8px;">{{ server.url }}</span>
        <span class="adocs-hint" style="display:inline;margin-left:8px;">{{ server.description }}</span>
      </div>
      {% endfor %}
    </section>

    <section class="adocs-section">
      <h2>1 · Authorize</h2>
      <div class="adocs-card" data-adocs-login-url="{{ login_url }}">
        <div class="adocs-row">
          <span class="adocs-status" id="adocs-auth-state">No token yet.</span>
        </div>
        <div class="adocs-row" style="margin-top:12px">
          <input type="text" id="adocs-login-identifier" placeholder="username, email, or phone" autocomplete="username">
          <input type="password" id="adocs-login-password" placeholder="password" autocomplete="current-password">
          <button class="adocs-btn adocs-btn-primary" id="adocs-btn-login" type="button">Log in</button>
        </div>
        <div class="adocs-row">
          <input type="text" class="adocs-token-input" id="adocs-token-input" placeholder="…or paste a token directly" spellcheck="false" autocomplete="off">
          <button class="adocs-btn" id="adocs-btn-use-token" type="button">Use token</button>
          <button class="adocs-btn" id="adocs-btn-clear-token" type="button" disabled>Clear</button>
        </div>
        {% if login_url %}
        <p class="adocs-hint">Posts <code>{identifier, password}</code> to <code>{{ login_url }}</code> and expects
          <code>{"access": "..."}</code> back. The token is held in a JS variable for this tab only — never written
          to localStorage/sessionStorage/a URL — and is always shown masked below.</p>
        {% else %}
        <p class="adocs-hint">No <code>login_url</code> configured for this spec — paste a token directly.</p>
        {% endif %}
      </div>
    </section>

    {% for channel in spec.channels %}
    <div class="adocs-channel-panel" data-channel-index="{{ forloop.counter0 }}" {% if not forloop.first %}style="display:none;"{% endif %}>
      {% with idx=forloop.counter0|stringformat:"s" %}{% with elem_id="adocs-channel-data-"|add:idx %}{{ channel|json_script:elem_id }}{% endwith %}{% endwith %}

      <section class="adocs-section">
        <h2>2 · Connect</h2>
        <div class="adocs-card adocs-console-card">
          <div class="adocs-row">
            <span class="adocs-badge adocs-badge-{{ channel.action }}">{{ channel.action }}</span>
            <span style="font-family: var(--adocs-font-mono); font-weight: 700;">{{ channel.path }}</span>
            <span class="adocs-pill" id="adocs-pill-{{ forloop.counter0 }}">idle</span>
            <button class="adocs-btn adocs-btn-primary adocs-btn-connect" data-channel-index="{{ forloop.counter0 }}" type="button" disabled>Connect</button>
            <button class="adocs-btn adocs-btn-disconnect" data-channel-index="{{ forloop.counter0 }}" type="button" disabled>Disconnect</button>
          </div>
          <p class="adocs-hint">{{ channel.summary }}</p>

          {% if channel.query_params %}
          <div class="adocs-row" style="margin-top:10px;">
            {% for param in channel.query_params %}
            <input type="text" class="adocs-qp-input" data-channel-index="{{ forloop.parentloop.counter0 }}" data-param-name="{{ param.name }}"
                   placeholder="{{ param.name }}{% if param.required %} (required){% endif %}">
            {% endfor %}
          </div>
          <p class="adocs-hint">A field named exactly <code>token</code> auto-fills from step 1 once you authorize.</p>
          {% endif %}

          {% if channel.action == "publish" %}
          <p class="adocs-hint">This operation is described as an inbound message <em>to</em> the application (a
            "publish" channel) — Connect still opens the same socket so you can observe whatever the server sends,
            if anything; it does not send a frame on your behalf (see "3 · Make a frame arrive" below).</p>
          {% endif %}
        </div>

        <p class="adocs-step-title">Message log</p>
        <div class="adocs-card">
          <div class="adocs-log-toolbar">
            <span class="adocs-log-count" id="adocs-log-count-{{ forloop.counter0 }}">0 frames</span>
          </div>
          <div class="adocs-log" id="adocs-log-{{ forloop.counter0 }}">
            <p class="adocs-log-empty">Nothing yet — authorize, connect, then trigger a test action below.</p>
          </div>
        </div>
      </section>

      <section class="adocs-section">
        <h2>Query parameters</h2>
        {% if channel.query_params %}
        <div class="adocs-table-wrap">
          <table>
            <tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
            {% for param in channel.query_params %}
            <tr>
              <td><code>{{ param.name }}</code></td>
              <td>{{ param.type }}</td>
              <td>{% if param.required %}<span class="adocs-badge-req">REQUIRED</span>{% endif %}</td>
              <td>{{ param.description }}</td>
            </tr>
            {% endfor %}
          </table>
        </div>
        {% else %}
        <p class="adocs-hint">This channel declares no connection query parameters.</p>
        {% endif %}
      </section>

      {% if channel.close_codes %}
      <section class="adocs-section">
        <h2>Close codes</h2>
        <div class="adocs-close-codes">
          {% for cc in channel.close_codes %}
          <div class="adocs-card">
            <div class="adocs-cc-head">
              <code>{{ cc.code }}</code>
              <span>{{ cc.reason }}</span>
              {% if cc.visible_to_browsers %}
              <span class="adocs-cc-tag adocs-cc-tag-yes">visible to browsers</span>
              {% else %}
              <span class="adocs-cc-tag adocs-cc-tag-no">not visible to browsers</span>
              {% endif %}
            </div>
            <p class="adocs-cc-detail">{{ cc.detail }}</p>
          </div>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      <section class="adocs-section">
        <h2>Message — {{ channel.message.title }}</h2>
        <div class="adocs-card">
          <p style="margin-top:0">{{ channel.message.description }}</p>
          <p class="adocs-step-title">Payload</p>
          <div class="adocs-table-wrap">
            <table>
              <tr><th>Field</th><th>Type</th><th></th><th>Description</th></tr>
              {% for name, prop in channel.message.payload.properties.items %}
              <tr>
                <td><code>{{ name }}</code></td>
                <td>{{ prop.type }}{% if prop.format %} ({{ prop.format }}){% endif %}{% if prop.nullable %}, nullable{% endif %}</td>
                <td>
                  {% if prop.required %}<span class="adocs-badge-req">REQUIRED</span>{% endif %}
                  {% if prop.readOnly %}<span class="adocs-badge-readonly">read-only</span>{% endif %}
                </td>
                <td>
                  {% if prop.enum %}one of: {% for v in prop.enum %}<code>{{ v }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}<br>{% endif %}
                  {{ prop.description }}
                </td>
              </tr>
              {% endfor %}
            </table>
          </div>
        </div>
      </section>

      {% if channel.message.examples %}
      <section class="adocs-section">
        <h2>Examples</h2>
        <div class="adocs-examples">
          {% for example in channel.message.examples %}
          <details {% if forloop.first %}open{% endif %}>
            <summary>{{ example.name }}<span class="adocs-ex-desc">{{ example.summary }}</span></summary>
            <pre>{{ example.payload_json }}</pre>
          </details>
          {% endfor %}
        </div>
      </section>
      {% endif %}
    </div>
    {% endfor %}

    <section class="adocs-section">
      <h2>3 · Make a frame arrive</h2>
      <div class="adocs-card">
        {% if action_urls %}
        <div class="adocs-row" id="adocs-action-buttons">
          {% for name, url in action_urls.items %}
          <button class="adocs-btn" data-action-url="{{ url }}" data-action-name="{{ name }}" type="button" disabled>{{ name }}</button>
          {% endfor %}
        </div>
        <p class="adocs-hint">Each button POSTs to <code>&lt;slug&gt;/actions/&lt;name&gt;/</code> with a CSRF
          header. A 429 (rate-limited) or an error from the action itself is logged distinctly, in whichever
          channel's log is currently visible.</p>
        {% else %}
        <p class="adocs-hint">No test actions are registered for this spec
          (<code>ASYNC_DOCS["SPECS"]["{{ slug }}"]["actions"]</code> is empty).</p>
        {% endif %}
      </div>
    </section>

    {% csrf_token %}
    <footer class="adocs-footer">Generated from the spec registered as <code>{{ slug }}</code>.</footer>
  </main>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'asyncdocs/js/console.js' %}"></script>
{% endblock %}