{% extends "base_plain.html" %}

{% block title %}Debug JSON{% endblock %}

{% block content %}
    <form action="." method="POST">
        {% csrf_token %}
        <fieldset>
            {% include "forms/_field.html" with field=form.uri %}
        </fieldset>
        <div class="buttons">
            <button>Debug</button>
        </div>
    </form>
    {% if result %}

        <div class="debug">
            <h2>Summary</h2>
            <div class="debug-section">
                <div class="field">
                    <span class="name">Status Code:</span>
                    <span class="value">{{ status_code }}</span>
                </div>

                <div class="field">
                    <span class="name">Content-Type:</span>
                    <span class="value">{{ content_type }}</span>
                </div>

                <div class="field">
                    <span class="name">Bytes Downloaded:</span>
                    <span class="value">{{ num_bytes_downloaded }}</span>
                </div>
            </div>

            <h2>Payload</h2>

            <div class="debug-section">
                <div class="field payload">
                    <span class="name">Raw Response:
                        <a title="Copy Content"
                           class="copy"
                           _="on click
                              writeText(#raw_response.innerText) into the navigator's clipboard
                              then add .copied
                              wait 2s
                              then remove .copied">
                            <i class="fa-solid fa-copy"></i>
                        </a>
                    </span>
                    <span class="value">
                        <a _="on click
                              toggle .hidden on #raw_response
                              then
                              if my.innerText is 'Hide' set my.innerText to 'Show'
                              else set my.innerText to 'Hide'
                             ">Show</a></span>
                </div>
                <pre id="raw_response" class="hidden">{{ raw_result }}</pre>

                <div class="field payload">
                    <span class="name">Canonical:
                        <a title="Copy Content"
                           class="copy"
                           _="on click
                              writeText(#canonical_response.innerText) into the navigator's clipboard
                              then add .copied
                              wait 2s
                              then remove .copied">
                            <i class="fa-solid fa-copy"></i>
                        </a>
                    </span>
                    <span class="value">
                        <a _="on click
                              toggle .hidden on #canonical_response
                              then
                              if my.innerText is 'Hide' set my.innerText to 'Show'
                              else set my.innerText to 'Hide'
                             ">Show</a></span>
                </div>
                <pre id="canonical_response" class="hidden">{{ result }}</pre>
            </div>
        </div>
    {% endif %}

{% endblock %}