{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ title }}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="{{ scalar_favicon_url }}" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
    <link rel="stylesheet" href="{% static 'css/scalar.css' %}" />
  </head>
  <body>
    <noscript>Scalar requires Javascript to function. Please enable it to browse the documentation.</noscript>
    <script id="api-reference"
            data-url="{{ openapi_url }}"
            data-proxy-url="{{ scalar_proxy_url }}"></script>
    {% if theme %}
      <script>
        var configuration = {
          theme: '{{ theme }}',
        };
        document.getElementById('api-reference').dataset.configuration = JSON.stringify(configuration);
      </script>
    {% endif %}
    <script src="{{ scalar_js_url }}"></script>
  </body>
</html>
