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

{% block site_css %}
{{ super() }}
<link rel="stylesheet" href="/static/api/css/documentation.min.css">
{% endblock %}

{% block site_js %}
{{ super() }}
<script src="/static/api/js/api_documentation.min.js" type="module"></script>
{% endblock %}

{% block doc_title %}API Reference{% endblock %}

{% block main_content %}
<div class="panel">
  <div class="body">
    <p>
      These API endpoints are publicly available. The parameters to some
      endpoints are non-trivial as some might require deeper understanding of
      the Soccoro backend.
    </p>
    <p>
      Some API endpoints require an <a href="{{ url('tokens:home') }}">API Token</a>
      and return different things depending on <a href="{{ url('profile:profile') }}">your access</a>.
      You currently have
      <a href="{{ url('tokens:home') }}">{{ count_tokens }} active API Token{{ count_tokens|pluralize }}</a>.
    </p>
    <p>
      Please set a User-Agent when using APIs. This helps us know who to talk
      with when planning API changes.
    </p>
  </div>
</div>

<div class="panel">
  <div class="title"><h2>Contents</h2></div>
  <div class="body">
    <ul>
      {% for endpoint in endpoints %}
        <li><a href="#{{ endpoint.name }}">{{ endpoint.name }}</a>{% if endpoint.deprecation_warning %} (DEPRECATED){% endif %}</li>
      {% endfor %}
    </ul>
  </div>
</div>

{% for endpoint in endpoints %}
<div class="panel" id="{{ endpoint.name }}">
  <div class="title">
    <h2><a href="#{{ endpoint.name }}">{{ endpoint.name }}</a></h2>
    {% if endpoint.required_permissions %}
      <p class="required-permission">
        Only available if used with an <b>API Token</b> associated with {% for permission in endpoint.required_permissions %}
        <b>{{ permission }}</b> {% if not loop.last %} and {% endif %} {% endfor %} permission.
      </p>
    {% endif %}
  </div>
  <div class="body">
    <form class="testdrive" data-methods="{{ endpoint.methods | to_json }}" {% if endpoint.methods == ['GET'] %}data-no-csrf{% endif %}>
      <p class="url">
        <b>{{ ' | '.join(endpoint.methods) }}</b>
        <code>{{ base_url }}{{ endpoint.url }}</code>
      </p>

      {% if endpoint.deprecation_warning %}
        <p class="deprecation-warning">Deprecation Warning</p>
        <pre class="deprecation-warning">{{ endpoint.deprecation_warning }}</pre>
      {% endif %}

      <pre class="helptext">{{ endpoint.help_text }}</pre>

      {% if endpoint.parameters %}
        <table class="data-table hardwrapped">
          <thead>
            <tr>
              <th class="w-3/12" scope="col">Parameter key</th>
              <th class="w-1/12" scope="col">Required?</th>
              <th class="w-2/12" scope="col">Type</th>
              <th class="w-2/12" scope="col">Default</th>
              <th>Test drive</th>
            </tr>
          </thead>
          <tbody>
            {% for parameter in endpoint.parameters %}
              <tr>
                <td>
                  <b>{{ parameter.name }}</b>
                </td>
                <td>
                  {% if parameter.required %}Required {% else %}Optional {% endif %}
                </td>
                <td>
                  {{ describe_friendly_type(parameter['type']) }}
                </td>
                <td>
                  {% set default_val = endpoint['defaults'].get(parameter['name'], '') %}
                  {% if default_val %}
                    <code>{{ default_val }}</code>
                  {% endif %}
                </td>
                <td>
                  {{ make_test_input(parameter, endpoint['defaults']) }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}

      <!-- for starting a test drive -->
      <div class="run-test">
        {% if endpoint.test_drive %}
          <button type="submit">Run Test Drive!</button>
          <img src="/static/img/ajax-loader16x16.gif" alt="Loading..." class="loading-ajax">
          <button type="button" class="close">&times; Close</button>
        {% else %}
          <em>Test drive not supported.</em>
        {%endif %}
      </div>

      <div class="test-drive">
        <p class="status-error">
          An error happened on the server when trying this URL.
        </p>
        <p class="used-url">
          <b>Using</b>
          <br>
          <a href=""><code></code></a>
        </p>
        <p class="used-data">
          <b>Data</b>
          <br>
          <code></code>
        </p>
        <p class="status">
          Status
          <code></code>
        </p>
        <p>
          <b>Output:</b>
        </p>
        <pre></pre>
        <span class="binary-response-warning">
          Looks like this is binary output!
          <a href="#" class="show">See it anyway?</a>
          <a href="#" class="open">Download the content?</a>
        </span>
        <p class="response-size">
          <b>Size:</b>
          <code></code>
        </p>
      </div>
    </form>
  </div>
</div>
{% endfor %}
{% endblock %}