{% load static %}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Docs - Packs Site</title>
    <link rel="stylesheet" href="{% static 'vendor/swagger-ui/swagger-ui.css' %}">
    <style>
        html, body { margin: 0; padding: 0; background: #1c2022; }
        #swagger-ui { min-height: 100vh; }
        .swagger-ui .topbar { display: none; }
    </style>
</head>
<body>
    <div id="swagger-ui"></div>
    <script src="{% static 'vendor/swagger-ui/swagger-ui-bundle.js' %}"></script>
    <script>
    (function () {
        document.documentElement.classList.add('dark-mode');
        const specUrl = "{% url 'api:docs_spec' %}";
        window.ui = SwaggerUIBundle({
            url: specUrl,
            dom_id: '#swagger-ui',
            deepLinking: true,
            displayRequestDuration: true,
            presets: [SwaggerUIBundle.presets.apis],
            layout: 'BaseLayout',
        });
    })();
    </script>
</body>
</html>
