{% load i18n %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet"
          href="{{ cdn_url }}/npm/swagger-ui-dist@5.13.0/swagger-ui.min.css">
    <title>{{ api.title }} Developer Console</title>
    {% include "common_libs.html" %}
    <style type="text/css">
    .information-container, #operations-tag-default {
        display: none;
    }
    .scheme-container {
      margin: 0 !important;
      background: none !important;
      box-shadow: none !important;
    }
    button svg {
      fill: var(--pico-primary);
    }
    #swagger-ui>div>div>.wrapper {
      background-color: white;
      padding: 0;
    }
    #swagger-ui>div>div>.wrapper button {
      background-color: unset;
    }
    #swagger-ui>div>div>.wrapper button.btn.execute {
      background-color: #4990e2;
    }
    </style>
  </head>
  <body>
    {% include "_header.html" %}
    <main class="container">
      <h3>Developer Console</h3>
      <p>
        <li class="empty">
          By using our APIs, you agree to our <a href="/pages/terms">Terms of Service</a>.
        </li>
        <li class="empty">
          In additional to APIs below, {{ site_name }} also supports a subset of <a href="https://docs.joinmastodon.org/client/intro/">Mastodon APIs</a>.
        </li>
      </p>
      <details {% if token %}open{% endif %}>
        <summary>
          <a>Test Access Token</a>
        </summary>
        <form method="post" role="group">
          {% csrf_token %}
          <input type="text"
                 readonly
                 value="{{ token | default:'Once generated, token will only be shown once here, previous tokens will be revoked.' }}">
          <input type="submit"
                 {% if request.user.is_authenticated %}value="Generate"{% else %}value="Login to generate" disabled{% endif %} />
        </form>
        <p>
          Click <code>Authorize</code> button below, input your token there to invoke APIs with your account, which is required for APIs like <code>/api/me</code>
          <br>
          Or use it in command line, like
          <code>curl -H "Authorization: Bearer YOUR_TOKEN" {{ site_url }}/api/me</code>
        </p>
      </details>
      <br>
      <details>
        <summary>
          <a>How to authorize</a>
        </summary>
        Please check <a href="https://neodb.net/api/">NeoDB documentation</a> for details.
      </details>
      <div id="swagger-ui" data-theme="light"></div>
      <script src="{{ cdn_url }}/npm/swagger-ui-dist@5.13.0/swagger-ui-bundle.min.js"></script>
      <script>
        const ui = SwaggerUIBundle({
        url: '{{ openapi_json_url }}',
        dom_id: '#swagger-ui',
        presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
        ],
        layout: "BaseLayout",
{% if api.csrf and csrf_token %}
        requestInterceptor: (req) => {req.headers['X-CSRFToken'] = "{{csrf_token}}"; return req;},
{% endif %}
        deepLinking: true
    })
      </script>
    </main>
    {% include "_footer.html" %}
  </body>
</html>
