<div id="run-detail-modal" class="modal is-desktop-size"></div>
<script>
  document.addEventListener("openModal", function(event) {
    let modal_id = event.detail.modal;
    if (modal_id !== "run-detail-modal") return;

    let $modal = document.getElementById(modal_id);
    let run_uuid = event.detail.$button.dataset.uuid;
    let run_detail_url = `/run/${run_uuid}/`;
    $modal.innerHTML = "";

    fetch(run_detail_url).then(function (response) {
      if (response.ok) {
        return response.text();
      } else {
        closeModals();
        throw Error(response.statusText);
      }
    }).then(function (html) {
      $modal.innerHTML = html;
      document.querySelectorAll('#run-detail-modal .highlight code').forEach((block) => {
        hljs.highlightBlock(block);
      });
      setupCloseModalButtons();
      let execute_pipeline_links = document.querySelector(".execute-pipeline-link");
      if (execute_pipeline_links) {
        execute_pipeline_links.addEventListener('click', displayOverlay);
      }
    }).catch(function (error) {
      console.warn('Error:', error);
    });

  });
</script>