<!DOCTYPE html>
<html>
  <head>
    {% block head %}
      {% block meta %}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="robots" content="none,noarchive"/>
      {% endblock %}

      <title>{{ settings.WORF_API_NAME }}: {{ request.get_full_path }}</title>

      {% block style %}
        <link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet">
        <link href="https://unpkg.com/prism-js-fold@1.0.1/prism-js-fold.css" crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet">
        <style>
          body { background: #131417; color: #fff; }
          a { color: #58A6FF; }
          a:hover { text-decoration: underline; }
          code, pre { font-family: inconsolata, monaco, consolas, courier, monospace; color: #c5c8c6; }
          nav, pre { background: #202126; }
          strong { font-weight: 500; }
          .token a { color: #58a6ff; }
          .token.boolean { color: #fbbf24; }
          .token.keyword { color: #96cbfe; }
          .token.number { color: #ff73fd; }
          .token.operator { color: #ededed; }
          .token.property { color: #fff; }
          .token.string  { color: #69f5ab; white-space: normal; word-break: break-all; }
          .token.url { color: #96cbfe; }
          .token.variable { color: #c6c5fe; }
        </style>
      {% endblock %}

      {% block script %}
        <script src="https://unpkg.com/prismjs@1.28.0" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.28.0/components/prism-json.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.28.0/plugins/keep-markup/prism-keep-markup.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.28.0/plugins/autolinker/prism-autolinker.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      {% endblock %}
    {% endblock %}
  </head>

  <body>
    {% block body %}
      {% block nav %}
        <nav class="p-4">
          <div class="max-w-5xl mx-auto">
            {% block branding %}
              <a href="{{ settings.WORF_API_ROOT }}" class="font-medium text-lg text-white" rel="nofollow">
                {{ settings.WORF_API_NAME }}
              </a>
            {% endblock %}
          </div>
        </nav>
      {% endblock %}

      <div class="max-w-5xl mx-auto">
        <main>
          {% block content %}
            <nav class="font-mono break-all my-4 px-4 py-2">
              <strong>{{ request.method }}</strong> {{ request.get_full_path }}
            </nav>

            <div class="my-4">
              <pre class="w-full p-4 overflow-auto"><strong>HTTP {{ response.status_code }} {{ response.status_text }}</strong>{% for key, value in response.headers.items %}
<strong>{{ key }}:</strong> {{ value }}{% endfor %}

<code class="language-json">{{ content }}</code></pre>
            </div>
          {% endblock content %}
        </main>
      </div>
    {% endblock %}
  </body>
</html>
