{% extends "base.html" %}
{% load static %}
{% load ui_framework %}

{% block breadcrumbs_wrapper %}{% render_breadcrumbs %}{% endblock %}

{% block extra_styles %}
    <link rel="stylesheet" href="{% static 'drf_spectacular_sidecar/swagger-ui-dist/swagger-ui.css' %}">
    <style>
        /* Manual styling inherited from drf-spectacular */
        html { box-sizing: border-box; overflow-y: scroll; }
        *, *:after, *:before { box-sizing: inherit; }
        body { background: var(--bs-body-bg); margin: 0; }
        /* Style overrides to address conflicts between Swagger styling and Nautobot/Bootstrap styling */
        pre.version { border: none; background: none; }
        .loading-container .loading { display: block; }
        /* Dark theme support */
        [data-bs-theme="dark"] .swagger-ui,
        [data-bs-theme="dark"] .swagger-ui .backdrop-ux,
        [data-bs-theme="dark"] .swagger-ui .microlight,
        [data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary-method {
            filter: hue-rotate(180deg) invert(1);
        }
        [data-bs-theme="dark"] .swagger-ui input:is([type="email"], [type="file"], [type="password"], [type="search"], [type="text"]),
        [data-bs-theme="dark"] .swagger-ui textarea {
            color: var(--bs-body-bg);
        }
        [data-bs-theme="dark"] .swagger-ui .scheme-container {
            background: transparent;
        }
    </style>
{% endblock extra_styles %}

{% block content %}
    <div id="swagger-ui"></div>
{% endblock content %}

{% block javascript %}
    <script src="{% static 'drf_spectacular_sidecar/swagger-ui-dist/swagger-ui-bundle.js' %}"></script>
    <script src="{% static 'drf_spectacular_sidecar/swagger-ui-dist/swagger-ui-standalone-preset.js' %}"></script>
    {% if script_url %}
        <script src="{{ script_url }}"></script>
    {% else %}
        <script>
            {% include './swagger_ui.js' with settings=swagger_settings%}
        </script>
    {% endif %}
{% endblock javascript %}