<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Swagger UI</title>
  <link rel="stylesheet" type="text/css" href="{{ css_dir }}swagger-ui.css" />
  <link rel="stylesheet" type="text/css" id="slate-css" media="none" href="{{ css_dir }}swagger-ui-dark.css" />
  {% for css_file in extra_css_files %}
  <link rel="stylesheet" type="text/css" href="{{ css_file }}" />
  {% endfor %}
</head>

<body style="overflow:hidden;{% if background %}background: {{ background }};{% endif %}">
  <div id="swagger-ui"></div>
  <script src="{{ js_dir }}swagger-ui-bundle.js" charset="UTF-8"> </script>
  <script src="{{ js_dir }}swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
  <script>
    window.onload = function () {
      window.ui = SwaggerUIBundle({
        dom_id: "#swagger-ui",
        onComplete: onComplete,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        {% if openapi_spec_url is string %}
        url: "{{openapi_spec_url}}",
        {% elif openapi_spec_url is sequence %}
        urls: [
        {% for item in openapi_spec_url %}
          {url:"{{item.url}}", name:"{{item.name}}"},
        {% endfor %}
        ],
        layout: "StandaloneLayout",
        {% endif %}
        {% if oauth2_redirect_url.startswith('.') %}
        "oauth2RedirectUrl": new URL("{{oauth2_redirect_url}}",window.location.href).href,
        {% else %}
        "oauth2RedirectUrl": "{{oauth2_redirect_url}}",
        {% endif %}
        "validatorUrl": "{{validatorUrl}}",
        {{options_str | safe}}
      })

      {% if oath2_prop_str != "{}" %}
      window.ui.initOAuth({{oath2_prop_str | safe}})
      {% endif %}

      if (parent.__init_is_dark_mode) {
          enable_dark_mode();
      }
    }

    enable_dark_mode = function(){
      document.getElementById("slate-css").media = ""
    }

    disable_dark_mode = function(){
      document.getElementById("slate-css").media = "none"
    }

    const resize_ob = new ResizeObserver(function(entries) {
      parent.update_swagger_ui_iframe_height("{{id}}");
    });

    // start observing for resizing
    resize_ob.observe(document.querySelector("body"));

    // authorize modal position
    var modal_top = 0;

    const mutation_ob = new MutationObserver(function (mutations) {
      if(mutations && mutations[0].addedNodes && mutations[0].addedNodes.length > 0){
        update_modal_top()
      }
    });

    onComplete = function(){
      // start observing for auth-wrapper after Swagger UI loaded
      const div = document.querySelector("div.auth-wrapper");
      if(div){
        mutation_ob.observe(div, {
          childList: true,
        });
      }
    }

    update_top_val = function(top){
      modal_top = top
      update_modal_top()
    }

    update_modal_top = function(){
      let modal_list = document.getElementsByClassName('modal-ux')
      if(modal_list.length > 0){
        let modal = modal_list.item(0)
        const modal_height = modal.offsetHeight
        const padding = 60
        min = parseInt(modal_height/2 + padding)
        max = document.body.scrollHeight - min + padding
        if (modal_top < min) {
          modal.style.top = `${min}px`
        } else if (modal_top > max) {
          modal.style.top = `${max}px`
        } else {
          modal.style.top = `${modal_top}px`
        }
      }
    }
  </script>
</body>

</html>
