<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui@5.10.0/dist/swagger-ui.css"
          integrity="sha256-IgNmYaATqY6z6AuD6hvz9XN0OyeAc94gsTa+lK8ka1Y=" crossorigin="anonymous">
    <link rel="shortcut icon" href="https://djapy.io/images/icons/faviconGreen.svg">
    <title>{{ api.title }} | {{ api.site_name }}</title>
    {# if request has ?darkmode, add dark mode #}

    <style>
        /* Fast dark mode https://github.com/swagger-api/swagger-ui/issues/5327 */

        body.dark {
            background: #04090e;
        }

        body.dark .swagger-ui {
            filter: invert(90%) hue-rotate(180deg);
        }

        body.dark .swagger-ui .microlight {
            filter: invert(100%) hue-rotate(180deg);
        }

        .swagger-ui .info .title {
            display: flex;
            align-items: start;
        }


        #dark-mode-toggle {
            border-radius: 45%;
            height: 35px;
            width: 35px;
            margin-left: auto;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background: #e7faf4;
            border: 2px solid #95afab;
            color: #181816;
            cursor: pointer;
            transition: transform 0.2s;
        }

        #dark-mode-toggle:active {
            transform: scale(0.9);
        }
    </style>
</head>
<body class="{% if dark_mode %}dark{% endif %}">


<script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"></script>

<div id="swagger-ui">
</div>

<script type="application/json" id="swagger-settings">
    {{ swagger_settings | safe }}
</script>

<script>

    const button = document.createElement('button');
    button.id = 'dark-mode-toggle';
    button.innerHTML = `{{ active_icon | safe }}`;
    button.onclick = () => {
        const darkMode = document.body.classList.contains('dark');
        if (darkMode) {
            document.body.classList.remove('dark');
            document.cookie = 'dark_mode=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
            button.innerHTML = `{{ icons.dark_mode | safe }}`;
        } else {
            document.body.classList.add('dark');
            document.cookie = 'dark_mode=true; path=/';
            button.innerHTML = `{{ icons.light_mode | safe }}`;
        }
    };

    const configJson = document.getElementById("swagger-settings").textContent;
    const configObject = JSON.parse(configJson);

    configObject.dom_id = "#swagger-ui";
    configObject.presets = [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
    ];

    {% if add_csrf %}
        configObject.requestInterceptor = (req) => {
            req.headers['X-CSRFToken'] = "{{csrf_token}}";
            return req;
        };
    {% endif %}

    const ui = SwaggerUIBundle(configObject);

    const observer = new MutationObserver(async (mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                const titleSec = document.querySelector('h2.title');
                if (titleSec) {
                    titleSec.appendChild(button);
                    observer.disconnect();
                }
            }
        }
    });

    observer.observe(document, {childList: true, subtree: true});
</script>
</body>
</html>
