{% 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/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 class="mdi mdi-chevron-down"></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 class="language-json"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
                </div>

                <div class="response-info" aria-label="{% trans "response info" %}">
                    <pre class="language-json"><span class="meta nocode"><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% for key, val in response_headers|items %}
                        <b>{{ key }}:</b> <span class="lit">{{ val|urlize }}</span>{% endfor %}
                        
                    </span>{{ content|urlize }}</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 src="{% static "rest_framework/js/default.js" %}"></script>
        <script>
            function linkifyHighlightedUrls() {
                // Find all hljs-string spans
                const stringSpans = document.querySelectorAll('span.hljs-string');

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

                    // Check if the string starts with "http
                    if (text.match(/^["']https?:\/\/.*["']$/)) {
                        // Extract the URL (remove quotes)
                        const url = text.slice(1, -1); // Remove opening and closing quotes

                        // Create a clickable link while preserving the syntax highlighting
                        const link = document.createElement('a');
                        link.href = url;
                        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);
                    }
                });
            }
            $(document).ready(function() {
                $('form').ajaxForm();
                linkifyHighlightedUrls();
            });
        </script>
    {% endblock script %}
{% endblock body %}