<!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>{{ view_name }} | {{ settings.WORF_API_NAME }}: {{ request.get_full_path }}</title>

      {% block style %}
        <style type="text/tailwindcss">
          body { @apply bg-black text-white; }
          :focus { @apply outline-none; }
          :focus-visible { @apply ring-2 ring-white; }
          a { @apply text-blue hover:underline; }
          details { box-shadow: 0 0 50px #131417 }
          strong { @apply font-semibold; }
          .token a { @apply text-[#58a6ff]; }
          .token.boolean { @apply text-[#fbbf24]; }
          .token.keyword { @apply text-[#96cbfe]; }
          .token.number { @apply text-[#ff73fd]; }
          .token.operator { @apply text-[#ededed]; }
          .token.property { @apply text-white; }
          .token.string  { @apply break-all text-[#69f5ab] whitespace-normal; }
          .token.url { @apply text-[#96cbfe]; }
          .token.variable { @apply text-[#c6c5fe]; }
        </style>
      {% endblock %}

      {% block script %}
        <script src="https://cdn.tailwindcss.com" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.29.0" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.29.0/components/prism-json.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.29.0/plugins/keep-markup/prism-keep-markup.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://unpkg.com/prismjs@1.29.0/plugins/autolinker/prism-autolinker.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
          tailwind.config = (colors => ({ theme: { extend: { colors } } }))({
            black: { DEFAULT: "#131417" },
            blue: { DEFAULT: "#58a6ff" },
            gray: { DEFAULT: "#202126" },
          })
        </script>
      {% endblock %}
    {% endblock %}
  </head>
  <body>
    {% block body %}
      {% block nav %}
        <nav class="bg-gray">
          <div class="max-w-5xl mx-auto">
            {% block branding %}
              <a href="{{ settings.WORF_API_ROOT }}" class="inline-flex p-4 font-semibold text-lg ring-inset 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="bg-gray font-mono break-all my-4 px-4 py-2">
              <strong>{{ request.method }}</strong>
              <span id="path">{{ request.get_full_path }}</span>
            </nav>

            <div class="my-4">
              <pre class="bg-gray w-full p-4 text-gray-300 overflow-auto" tabindex="-1"><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 %}

          {% if settings.WORF_DEBUG %}
            {% block toolbar %}
              <div class="fixed max-w-sm max-h-screen bottom-0 right-0 pl-8 pt-8 overflow-auto">
                {% if view %}
                  <details class="bg-gray m-2">
                    <summary class="font-semibold px-4 py-2 cursor-pointer ring-inset">
                      <span class="px-1">{{ view_name }}</span>
                    </summary>
                    <div class="px-4 py-2">
                      {{ view }}
                    </div>
                  </details>
                {% endif %}

                {% if serializer %}
                  <details class="bg-gray m-2">
                    <summary class="font-semibold px-4 py-2 cursor-pointer ring-inset">
                      <span class="px-1">{{ serializer_name }}</span>
                    </summary>
                    <div class="px-4 py-2">
                      {{ serializer }}
                    </div>
                  </details>
                {% endif %}

                {% if payload %}
                  <details class="bg-gray m-2">
                    <summary class="font-semibold px-4 py-2 cursor-pointer ring-inset">
                      <span class="px-1">
                        Payload
                        <span class="bg-zinc-700 mx-1 px-1">{{ payload|length }}</span>
                      </span>
                    </summary>
                    <div class="px-4 py-2 break-all">
                      {{ payload }}
                    </div>
                  </details>
                {% endif %}

                {% if lookup_kwargs %}
                  <details class="bg-gray m-2">
                    <summary class="font-semibold px-4 py-2 cursor-pointer ring-inset">
                      <span class="px-1">
                        Lookups
                        <span class="bg-zinc-700 mx-1 px-1">{{ lookup_kwargs|length }}</span>
                      </span>
                    </summary>
                    <div class="px-4 py-2 break-all">
                      {{ lookup_kwargs }}
                    </div>
                  </details>
                {% endif %}

                {% for name, items, count in fields %}
                  {% if items %}
                    <details class="bg-gray m-2">
                      <summary class="font-semibold px-4 py-2 cursor-pointer ring-inset">
                        <span class="px-1">
                          {{ name }}
                          {% if count %}<span class="bg-zinc-700 mx-1 px-1">{{ count }}</span>{% endif %}
                        </span>
                      </summary>
                      <div class="px-4 py-2">
                        <table>
                          {% for field, active in items %}
                            <tr class="{% if count and not active %}opacity-50{% endif %}">
                              <th class="text-left pr-4">{{ field }}</th>
                            </tr>
                          {% endfor %}
                        </table>
                      </div>
                    </details>
                  {% endif %}
                {% endfor %}
              </div>
            {% endblock %}
          {% endif %}
        </main>
      </div>
      <script>
        const path = document.getElementById('path')
        const parts = path.innerText.split('/')
        const links = document.createElement('span')

        for (let i = 1; i < parts.length; i++) {
          const part = parts[i]

          links.appendChild(document.createTextNode('/'))

          if (!part.length) {
            continue;
          }

          const a = document.createElement('a');
          const text = document.createTextNode(part)
          const url = parts.slice(0, i + 1).join('/')
          a.setAttribute('class', 'text-white')
          a.setAttribute('href', parts[i + 1] !== undefined ? url + '/' : url);
          a.setAttribute('rel', 'nofollow');
          a.appendChild(text)

          links.appendChild(a)
        }

        path.parentNode.replaceChild(links, path);
      </script>
    {% endblock %}
  </body>
</html>
