{% extends 'rest_framework/base.html' %}
{% load helpers %}
{% load plugins %}
{% load static %}
{% load i18n %}
{% load rest_framework %}
{% load ui_framework %}

{% block bootstrap_theme %}
    {% include 'inc/media.html' %}
{% endblock bootstrap_theme %}

{% block body %}
    {% include 'inc/skip_link.html' %}
    {% include 'inc/nav_menu.html' %}
    <header id="header">
        <div class="banner-alert-area">
            {% include 'inc/header_banners.html' %}
        </div>
        <div class="container-fluid mb-12 mt-16">
            <div class="row">
                <div class="col-4">
                    {% include 'inc/page_title.html' with title=name|add:' – REST API' %}
                </div>
                {% include 'inc/header.html' %}
                <div class="col-12">
                    {% block breadcrumbs %}
                        <nav aria-label="Breadcrumbs" class="mt-1">
                            <ol class="breadcrumb">
                                {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
                                    <li class="breadcrumb-item"><a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a></li>
                                {% endfor %}
                            </ol>
                        </nav>
                    {% endblock %}
                </div>
            </div>
        </div>
        {% block header %}{% endblock header %}
    </header>
    <main class="container-fluid wrapper" id="main-content" tabindex="-1">
        {% block content %}
            <div class="region" aria-label="{% trans "request form" %}">
                {% block request_forms %}

                    {% if 'GET' in allowed_methods %}
                        <form id="get-form" class="button-form">
                            <fieldset>
                                {% if api_settings.URL_FORMAT_OVERRIDE %}
                                    <div class="btn-group format-selection">
                                        <a class="btn btn-primary js-tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>

                                        <button class="btn btn-primary dropdown-toggle js-tooltip" data-bs-toggle="dropdown" title="Specify a format for the GET request">
                                            <span aria-hidden="true" class="mdi mdi-chevron-down"></span>
                                            <span class="visually-hidden">Specify a format for the GET request</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            {% for format in available_formats %}
                                                <li>
                                                    <a class="js-tooltip format-option dropdown-item" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}" rel="nofollow" title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">{{ format }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% else %}
                                    <a class="btn btn-primary js-tooltip" href="{{ request.get_full_path }}" rel="nofollow" title="Make a GET request on the {{ name }} resource">GET</a>
                                {% endif %}
                            </fieldset>
                        </form>
                    {% endif %}

                    {% if options_form %}
                        {# djlint:off H029 OPTIONS is an HTTP method #}
                        <form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
                            <button class="btn btn-primary js-tooltip" title="Make an OPTIONS request on the {{ name }} resource">OPTIONS</button>
                        </form>
                        {# djlint:on H029 #}
                    {% endif %}

                    {% if extra_actions %}
                        <div class="dropdown" style="float: right; margin-right: 10px">
                            <button class="btn btn-secondary" id="extra-actions-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                {% trans "Extra Actions" %}
                                <span class="mdi mdi-chevron-down"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="extra-actions-menu">
                                {% for action_name, url in extra_actions|items %}
                                    <li><a href="{{ url }}" class="dropdown-item">{{ action_name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                {% endblock request_forms %}
            </div>

            <div class="content-main" role="main"  aria-label="{% trans "main content" %}">
                <div class="float-start">
                    {% block description %}
                        {{ description }}
                    {% endblock %}
                </div>

                {% if paginator %}
                    <nav class="float-end">
                        {% get_pagination_html paginator %}
                    </nav>
                {% endif %}

                <div class="request-info pt-4" aria-label="{% trans "request info" %}">
                    <pre><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
                </div>

                <div class="response-info" aria-label="{% trans "response info" %}">
                    <pre><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% for key, val in response_headers|items %}
<b>{{ key }}:</b> <span class="lit">{{ val }}</span>{% endfor %}</pre>
                    <pre class="language-json">{{ content }}</pre>
                </div>
            </div>
        {% endblock %}
    </main>
    {% include 'inc/footer.html' %}
    <style>
        .request-info {
            clear: both;  /* Fix description floating issue */
        }
    </style>

    {% block script %}
        {% include 'inc/javascript.html' %}
        <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
        <script>
            function linkifyHighlightedUrls(el) {
                // Find all hljs-string spans
                const stringSpans = el.querySelectorAll('span.hljs-string');

                stringSpans.forEach(span => {
                    const text = span.textContent;

                    // Check if the string is a quoted HTTP or HTTPS URL
                    if (text.match(/^["']https?:\/\/.*["']$/)) {
                        const url = text.slice(1, -1); // Remove opening and closing quotes
                        try {
                            const parsedUrl = new URL(url, window.location.origin);
                            if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
                                // Create a clickable link while preserving the syntax highlighting
                                const link = document.createElement('a');
                                link.href = parsedUrl.href;
                                link.className = 'hljs-string'; // Maintain the syntax highlighting class
                                link.textContent = text; // Keep the original text with quotes

                                // Replace the span with the link
                                span.parentNode.replaceChild(link, span);
                            }
                        } catch (e) {
                            ;
                        }
                    }
                });
            }
            $(document).ready(function() {
                $('form').ajaxForm();
            });
            hljs.addPlugin({
                'after:highlightElement': ({ el, result, text }) => {
                    linkifyHighlightedUrls(el);
                }
            });
        </script>
    {% endblock script %}
{% endblock body %}