{% extends 'environment/base_environment_home.html' %}

<!--{% block local_js_top %}-->
<!--  {{ block.super }}-->

<!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js" integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
<!--  <script>-->
<!--    if (!window.socket){-->
<!--      window.socket = io("{{ websocket_url }}", {-->
<!--        transports: ["websocket"],-->
<!--        pingInterval: 25000,-->
<!--        pingTimeout: 60000,-->
<!--        reconnection: true,-->
<!--        reconnectionAttempts: Infinity,-->
<!--        reconnectionDelay: 2000,-->
<!--        reconnectionDelayMax: 10000,-->
<!--      });-->
<!--    }-->

<!--    let isModalOpen = false;-->
<!--    let cardToRefresh = "";-->

<!--    function fetchNewCards(executionId) {-->
<!--      const baseUrl = "{% url 'research_environments_partial' %}";-->
<!--      const fetchUrl = executionId ? `${baseUrl}?execution_resource_name=${executionId}` : baseUrl;-->
<!--      return fetch(fetchUrl).then(response => {-->
<!--        if (response.ok){-->
<!--          return response.text();-->
<!--        } else {-->
<!--          return null;-->
<!--        };-->
<!--      });-->
<!--    }-->
<!--  </script>-->
<!--{% endblock%}-->

{% block main_view %}
<!--  <script>-->
<!--    function refreshCards(executionId) {-->
<!--        fetchNewCards(executionId)-->
<!--        .then(html => {-->
<!--          if (html) {-->
<!--              $("#environment-tabs").html(html);-->
<!--            };-->
<!--         });-->
<!--    }-->

<!--    function pollExecutionStatus(executionId) {-->
<!--        const pollUrl = `{% url "check_execution_status" %}?execution_resource_name=${executionId}`;-->
<!--        fetch(pollUrl)-->
<!--        .then(response => response.json())-->
<!--        .then(({ finished }) => {-->
<!--            if (finished) {-->
<!--                refreshCards(executionId);-->
<!--            }-->
<!--        });-->
<!--    }-->

<!--    {% for workflow in workflows %}-->
<!--      pollExecutionStatus("{{ workflow.execution_resource_name }}");-->
<!--    {% endfor %}-->
<!--  </script>-->
  {% include "environment/_environment_tabs.html" %}
{% endblock %}

{% block local_js_bottom %}
<script>
  const sendRequest = (function() {
    const csrfToken = getCookie("csrftoken");

    return function(request_data, http_method, url, button_type) {
        $(".inside-modal-button").prop("disabled", true);

        let data = request_data;
        if (button_type === "update") {
            data = JSON.parse(data);
            let instance_name = data["instance_name"]
            const instance = $(`#form-select-${instance_name} option:selected`).val();
            if (instance === "") return;

            data["machine_type"] = instance;
            data = JSON.stringify(data);
        }
        fetch(url, {
            method: http_method,
            body: data,
            credentials: "same-origin",
            headers: {
                "X-CSRFToken": csrfToken,
                "Content-Type": "application/json",
            },
        }).then(response =>
       {
       if (response.ok)
       {
        return response.json();
       } else {
        throw response.json();
       }
       })
          .then(json => fetchNewCards())
          .then(html => {
            $(".modal").on("hidden.bs.modal", (e) => {
              if (html){
                $("#environment-tabs").html(html);
              };
            });
            $(".modal").modal("hide");
          }).catch(errorResponseJson => {
            $(".modal").modal("hide");
            errorResponseJson.then(message => {
            $("#environment-tabs").prepend(`<div class='alert alert-danger' role='alert'>${message.error}</div>`);
            $(".inside-modal-button").prop("disabled", false);
            });
          })
      }
  })();
</script>
{% endblock %}