{% extends "idr_gallery/base.html" %} {% block content %}

<style>
  article {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  .download_list {
    list-style: none;
    background: white;
    margin: 0;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: solid 1px lightgrey;
  }
  a.file_download {
    color: #03A9F4;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
  }
  a.file_download:hover {
    text-decoration: underline;
  }
</style>

<article>
  <div style="display: flex; gap: 20px; flex-direction: row;">
    <div style="flex: 0 0 96px;">
      <img src="{% url 'render_thumbnail' image.id %}" alt="Thumbnail for {{ image.name }}" border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <div style="flex: 1 1 auto">
  
      <h2>Image Name: {{ image.name }}</h2>
      <strong>ID: {{ image.id }}</strong><br />
      <strong>Study: {{ idr_study }}</strong>

      {% if ext_info and ext_info.httpUrl %}
        <p>
          <!-- NB: IF we change to img_detail/ID/ to loading THIS page for zarrs, then we can't use it here (will always redirect back) -->
          <a href="{% url 'web_image_viewer' image.id %}">View in Web Image Viewer</a><br/>
          This image is available as an OME-Zarr file at the following URL:
          <a href="https://ome.github.io/ome-ngff-validator/?source={{ ext_info.httpUrl }}" target="_blank">{{ ext_info.httpUrl }}</a>
        </p>
      {% else %}
        <p>
          This image is not viewable online. <br/>
          The IDR only supports the viewing of OME-Zarr images hosted on S3.
        </p>
      {% endif %}
    </div>
  </div>

  <!-- BIA link hidden unless needed -->
  <div id="bia_link_section" style="margin-top: 20px; display: none;">
    Data can be downloaded from <a id="bia_link" target="_blank" href=""></a>
  </div>
  
  {% if fileset %}
    <h3>Download Image Files</h3>
    {% if data_location == "Github" %}
      <p>
        This image is defined by a {% if is_pattern %}.pattern{% else %}companion.ome{% endif %} file
        and sibling .tiff files which are on GitHub (links below).
        Each .tiff file is a symbolic link to the actual image file in
        <!-- link is updated from download_urls.tsv info -->
        <a id="download_url_tsv" target="_blank" class="file_download" href="#">loading download URL...</a>.
      </p>
    {% elif fileset.client_paths|length == 1 %}
      <p>There is 1 file associated with this image. Click to download:</p>
    {% else %}
      <p>
        There are {{ fileset.client_paths|length }} files associated with this image
        which can be downloaded from the links below. For more download options,
        including bulk download using Globus or FTP clients, see the
        <a href="/about/download.html">IDR Data download page</a>.
      </p>
    {% endif %}

    <ul class="download_list">
      {% for path in fileset.client_paths %}
      <li>
        <a class="file_download" target="_blank" href="#">{{ path }}</a>
      </li>
      {% endfor %}
    </ul>
  {% endif %}

</article>

<script>
  const IDR_ID_NAME = "{{ idr_study }}";
  let IDR_ID = IDR_ID_NAME.split("-")[0];

  function checkLinks() {
    let links = Array.from(document.querySelectorAll("a"));
    // links = links.slice(0,50)
    links.forEach((link) => {
      // ignore image viewer links
      if (!link.href || link.href.includes("img_detail")) return;
      // no cors-origin check for now, just check if the link is valid
      fetch(link.href, { method: "HEAD" })
        .then((response) => {
          link.style.color = response.ok ? "green" : "orange";
          link.title = response.ok ? "Link is valid" : "Link is broken";
        })
        .catch((error) => {
          // show "pink" and re-try with server-side check, to avoid CORS issues
          console.error("Error checking link:", error);
          link.style.color = "pink";
          link.title = "Error checking link";

          fetch(`/link_check/?url=${encodeURIComponent(link.href)}`)
            .then((res) => res.json())
            .then((data) => {
              console.log("Link check data:", data);
              if (data.is_valid) {
                link.style.color = "green";
                link.title = "Link is valid (checked with server)";
              } else {
                link.style.color = "red";
                link.title = `Link is broken: ${data.error}`;
              }
            });
        });
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    // Load download URLs from TSV file in GitHub to fix the download URL for this image
    let TABLE_URL = 'https://raw.githubusercontent.com/IDR/idr.openmicroscopy.org/refs/heads/master/_data/download_urls.tsv';
    // check query params for ?tsv= to allow testing with a different TSV file
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('tsv')) {
      TABLE_URL = urlParams.get('tsv');
    }
    fetch(TABLE_URL)
      .then((response) => response.text())
      .then((data) => {
        const lines = data.split("\n");

        // Use first line as header to find column names...
        const headers = lines[0].split("\t");

        const idrIndex = headers.indexOf("idrid");

        // Find the line for this IDR ID
        const studyLine = lines.find(
          (line) => line.split("\t")[idrIndex] === IDR_ID,
        );
        console.log(`Found line for ${IDR_ID}:`, studyLine);
        if (studyLine) {
          const cells = studyLine.split("\t");
          const downloadUrlIndex = headers.indexOf("download_url");
          // downloadUrl e.g. https://ftp.ebi.ac.uk/pub/databases/IDR/idr0047-neuert-yeastmrna/
          const downloadUrl = cells[downloadUrlIndex];
          let link = document.getElementById("download_url_tsv");
          if (link) {
            link.textContent = downloadUrl;
            link.href = downloadUrl;
          }
          
          // Load "replaceThis" and "withThis" from the TSV file to allow replacing the download URL in the links on this page
          const replaceThisIndex = headers.indexOf("replace_this");
          const withThisIndex = headers.indexOf("with_this");
          const replaceThis = cells[replaceThisIndex];
          const withThis = cells[withThisIndex] || "";
          console.log(`replaceThis: ${replaceThis}, withThis: ${withThis}`);
          if (replaceThis) {
            const fileDownloadLinks = document.querySelectorAll(".file_download");
            fileDownloadLinks.forEach((link) => {
              link.href = link.textContent.replace(replaceThis, withThis);
            });
          }

          // If there is a "bia_url" column, show the BIA link section with the URL from the TSV file
          const bia_urlIndex = headers.indexOf("bia_url");
          if (bia_urlIndex !== -1) {
            const biaUrl = cells[bia_urlIndex];
            if (biaUrl) {
              const biaLinkSection = document.getElementById("bia_link_section");
              const biaLink = document.getElementById("bia_link");
              biaLink.href = biaUrl;
              biaLink.textContent = biaUrl;
              biaLinkSection.style.display = "block";
            }
          }
        } else {
          console.warn(`No download URL found for ${IDR_ID} in TSV file`);
          // replace links with text
          const fileDownloadLinks = document.querySelectorAll(".file_download");
            fileDownloadLinks.forEach((link) => {
              link.parentElement.textContent = link.textContent;
            });
        }

        // After updating links, check them if ?check_links=1 is in the URL
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get("check_links")) {
          checkLinks();
        }
      });
  });
</script>

{% endblock %}