<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css">
    <link rel="icon" href="https://django-ninja.dev/img/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="https://django-ninja.dev/img/favicon.png" type="image/png">
    <title>{{ api.title }}</title>
    <style>
        .version-selector {
            position: fixed;
            top: 10px;
            right: 20px;
            z-index: 1000;
            background: white;
            padding: 10px 15px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .version-selector label {
            font-family: sans-serif;
            font-size: 14px;
            color: #3b4151;
        }
        .version-selector select {
            font-size: 14px;
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="version-selector">
        <label for="version-select">API Version:</label>
        <select id="version-select" onchange="window.location.search='?version='+this.value">
            <option value="latest"{% if current_version == "latest" %} selected{% endif %}>Latest</option>
            {% for version in versions %}
            <option value="{{ version }}"{% if current_version == version %} selected{% endif %}>{{ version }}</option>
            {% endfor %}
        </select>
    </div>

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

    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
    <script type="application/json" id="swagger-settings">
        {{ swagger_settings | safe }}
    </script>
    <script>

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

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

        // Add request interceptor to inject version header (and CSRF if needed)
        const currentVersion = "{{ current_version }}";
        const versionHeader = "{{ version_header }}";

        configObject.requestInterceptor = (req) => {
            // Add version header for non-latest versions
            if (currentVersion && currentVersion !== "latest") {
                req.headers[versionHeader] = currentVersion;
            }
    {% if add_csrf %}
            req.headers['X-CSRFToken'] = "{{csrf_token}}";
    {% endif %}
            return req;
        };

        const ui = SwaggerUIBundle(configObject);

    </script>
</body>
</html>
