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

{% block head %}
  {{ block.super }}
    <script type="application/ld+json">
        {{ jsonld | safe }}
    </script>

    <style>
        p {
            word-wrap: break-word;
        }

        .gridcontainer {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }

        .a, .b, .c {
            padding: 1rem;
        }
        .a {
            padding-bottom: 0
        }
        .c {
            padding-top: 0
        }

        /* small screen means the single column is wider - room for thumbnail to float right */
        .thumb_wrapper {
            float: right;
        }

        /* Layout for medium and larger screens */
        @media (min-width: 768px) {
            .gridcontainer {
                grid-template-columns: 33.3% 66.6%;
                grid-template-areas:
                "a b"
                "c b";
                /* make sure 'a' is no bigger than it's content */
                grid-template-rows: auto 100%;
            }

            .a {
                grid-area: a;
            }

            .b {
                grid-area: b;
            }

            .c {
                grid-area: c;
            }

            .thumb_wrapper {
                float: none;
            }
            .a p:last-child {
                margin-bottom: 0;
            }
        }

        .debug {
            display: none;
        }

    </style>
{% endblock %}

{% block content %}

<div class="row column" style="margin-top:25px">

    <div class="gridcontainer">
        <div class="a">
            <h2>{{ idr_id }}</h2>

            <!-- just show first image -->
            {% with image=images.0 %}
            <p class="thumb_wrapper">
                <a title="Open image in Viewer" target="_blank" href="{% url 'webindex' %}img_detail/{{ image.id }}/"><img src="{% url 'webgateway_render_thumbnail' image.id %}" /></a>
            </p>
            {% endwith %}

            {% if release_date %}
                <p>Release Date: {{ release_date }}</p>
            {% endif %}

            {% if publication %}
                <p>Publication DOI: <a target="_blank" href="{{ publication.link }}">{{ publication.name }}</a></p>
            {% endif %}

            {% if data_doi %}
                <p>Data DOI: <a href="{{ data_doi.link }}">{{ data_doi.name }}</a></p>
            {% endif %}

            {% if license %}
                <p>License: <a target="_blank" href="{{ license.link }}">{{ license.name }}</a></p>
            {% endif %}

            {% if pubmed_id %}
                <p>PubMed ID: <a target="_blank" href="{{ pubmed_id.link }}">{{ pubmed_id.name }}</a></p>
            {% endif %}

            {% if pmc_id %}
                <p>PMC ID: <a target="_blank" href="{{ pmc_id.link }}">{{ pmc_id.name }}</a></p>
            {% endif %}

            {% for url in external_urls %}
                <p style="margin-bottom: 0">External URL: <a target="_blank" href="{{ url }}">{{ url }}</a></p>
            {% endfor %}
        </div>

        <div class="b">
            <h1>{{ title }}</h1>

            <p>{{ containers.0.description }}</p>

            <p>{{ authors }}</p>

            <h3>
                <img style="width: 36px; height: 36px" src="{% static 'idr_gallery/images/idr-logomark.svg' %}" />
                Browse Data in IDR
            </h3>

            {% for container in containers %}
                <p>
                    <a href="{% url 'webindex' %}?show={{ container.type | lower }}-{{ container.id }}">{{ container.name }}</a>
                    (<span class="image_count" id="image_count_{{ container.name }}"></span>)
                </p>
            {% endfor %}

            <h3>
                <img style="width: 36px; height: 36px" src="{% static 'idr_gallery/images/bff_logo.png' %}" />
                BioFile Finder
            </h3>

            <p>
                <a href="https://bff.allencell.org/" target="_blank">BioFile Finder</a> is a tool for filtering, sorting and grouping tabular data.
                Each table below is loaded from IDR as a Parquet file, with each row representing an image.
                Images can be selected in BioFile Finder and the "Download" link will open them in the IDR viewer.
            </p>
            <!-- Shown by JS if any tables are above threshold size -->
            <p id="slow_load_warning" style="display: none">
                NB: large tables may take some time to load in BioFile Finder.
            </p>

            {% for container in containers %}
            <p {% if container.empty_study_container %}
                id="bff_study_container"
              {% else %}
                id="bff_p_{{ container.name }}"
              {% endif %}>
                <a target="_blank" title="Open BioFile Finder in a new Tab" href="{{ container.bff_url_parquet }}">
                    {{ container.short_name }}
                </a>
                    <span>(</span><span class="image_count"
                    {% if container.empty_study_container %}
                        id="bff_total_row_count"
                    {% else %}
                        id="bff_row_count_{{ container.name }}"
                    {% endif %}>
                    <!-- image counts loaded by JS -->
                    </span>,
                    <!-- Hidden link, just used for HEAD request to get size (shown instead) -->
                    parquet:
                    <a class="table-download-link parquet" style="display: none;" href="{{ container.parquet_download }}">-</a><span>)</span>
            </p>
            {% endfor %}

            <!-- Image Path: {{ img_path }} <br>
            Data Location: {{ data_location }} <br>
            Is Zarr?: {{ is_zarr }} <br> -->

            <h3>Download</h3>

            {% if download_url %}
            <p>
                To download original image files in your browser, you can
                <!-- NB: This URL is updated dynamically by JavaScript below, using download_urls.tsv -->
                <a id="download_url" target="_blank" href="{{ download_url }}">access original data</a>.
            </p>
            {% endif %}

            <!-- If the data is 'mkngff' Zarr data, link to "alpha" BIA pages with Zarr viewers etc e.g. idr0010-->
            {% if bia_ngff_id %}
                <p>View OME-Zarr data and download at <a target="_blank" href="https://uk1s3.embassy.ebi.ac.uk/bia-integrator-data/pages/{{ bia_ngff_id }}.html">BioImage Archive: {{ bia_ngff_id }}</a>.</p>
            {% elif bia_accession %}
                <!-- Otherwise if BIA link is in KVPs, you can simply download from that page: e.g. idr0017 -->
                <p>Data for this study is available at the <a target="_blank" href="{{ bia_accession.link }}">BioImage Archive: {{ bia_accession.name }}</a>.</p>
            {% endif %}

            <!-- hidden link for robots etc -->
            <p class="debug">Download as <a href="{% url 'idr_gallery_study_jsonld' idr_id %}" target="_blank">JSON</a>.</p>

            {% if download_url %}
            <p>
                For more download options, including bulk download using Globus or FTP clients, see the IDR
                <a target="_blank" href="https://idr.openmicroscopy.org/about/download.html">Data download</a> page.
            </p>
            {% endif %}
        </div>
        <div class="c">

            <hr>

            {% for kvp in other_kvps %}
                <p>{{ kvp.0 }}: {{ kvp.1 }}</p>
            {% endfor %}

            <hr>

            {% for annotation_file in annotation_files %}
                <p>Annotation File: <a href="{{ annotation_file.link }}">{{ annotation_file.name }}</a></p>
            {% endfor %}

        </div>
    </div>


</div>

<script>

    const BASE_URL = "{{ base_url }}";
    const IDR_ID = "{{ idr_id }}";
    const MAX_IMAGES = 1000000;
    const SLOW_WARNING_THRESHOLD = 100000;
    let url = BASE_URL + "searchengine/api/v1/resources/container_images/?data_source=idr";
    let fmt = new Intl.NumberFormat();

    document.addEventListener("DOMContentLoaded", function() {
        // load image counts...
        // https://idr.openmicroscopy.org/searchengine//api/v1/resources/container_images/?data_source=idr

        // for each table-download-link (csv download link OR hidden parquet link), HEAD request to get content-length...
        // Then add size in MB after link
        const csvLinks = document.querySelectorAll('.table-download-link');
        csvLinks.forEach(link => {
            fetch(link.href, { method: 'HEAD' })
                .then(response => {
                    const contentLength = response.headers.get('Content-Length');
                    if (contentLength) {
                        let sizeInMB = (contentLength / (1024 * 1024));
                        // E.g. 162 MB (not 1.6e+2 MB) or 2.5 MB
                        sizeInMB = sizeInMB > 99 ? sizeInMB.toFixed(0) : sizeInMB.toPrecision(2);
                        // add size after link
                        const sizeSpan = document.createElement('span');
                        sizeSpan.textContent = ` ${sizeInMB} MB`;
                        link.parentNode.insertBefore(sizeSpan, link.nextSibling);
                    }
                })
                .catch(error => {
                    console.error('Error fetching CSV file size:', error);
                });
        });

        // Load image counts for each container from searchengine and add to page
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const containers = data.results.results;
                let total = 0;
                containers.forEach(container => {
                    if (container.name.startsWith("{{ idr_id }}")) {
                        // In case 'image count' gets renamed to 'image_count' in future...
                        let imageCount = container["image count"] || container["image_count"] || 0;
                        if (imageCount > SLOW_WARNING_THRESHOLD && imageCount < MAX_IMAGES) {
                            // Show "may be slow to load" warning - also below for total
                            document.getElementById("slow_load_warning").style.display = "block";
                        }
                        total += imageCount;
                        const $idr_span = document.getElementById(`image_count_${container.name}`);
                        const $bff_span = document.getElementById(`bff_row_count_${container.name}`);
                        if ($idr_span) {
                            if (imageCount === 1) {
                                $idr_span.textContent = `1 image`;
                                $bff_span.textContent = `1 row`;
                            } else if (imageCount == 0) {
                                $idr_span.textContent = `study info`;
                                // $all_images = $bff_span;
                            } else {
                                $idr_span.textContent = `${fmt.format(imageCount)} images`;
                                $bff_span.textContent = `${fmt.format(imageCount)} rows`;
                            }
                        }
                        // replace the BFF link text if too many images
                        if (imageCount > MAX_IMAGES) {
                            const $bff_para = document.getElementById(`bff_p_${container.name}`);
                            $bff_para.innerHTML = `<b>${container.name}</b> has ${fmt.format(imageCount)} rows. Too large to load in BioFile Finder.`;
                        }
                    }
                });
                // Handle "All containers" total
                let $total_count = document.getElementById("bff_total_row_count");
                if ($total_count) {
                    if (total === 1) {
                        $total_count.textContent = `1 row`;
                    } else {
                        $total_count.textContent = `all ${total} rows`;
                        if (total > SLOW_WARNING_THRESHOLD && total < MAX_IMAGES) {
                            document.getElementById("slow_load_warning").style.display = "block";
                        }
                    }
                }
                if (total > MAX_IMAGES) {
                    const $bff_study_para = document.getElementById("bff_study_container");
                    if ( $bff_study_para ) {
                        $bff_study_para.innerHTML = `<b>{{ idr_id }}</b> has ${fmt.format(total)} rows. Too large to load in BioFile Finder.`;
                    }
                }
            })
            .catch(error => {
                console.error('Error fetching image counts:', error);
            });

        // Load download URLs from TSV file in GitHub...
        fetch('https://raw.githubusercontent.com/will-moore/idr.openmicroscopy.org/refs/heads/download_urls/_data/download_urls.tsv')
            .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);
                if (studyLine) {
                    const cells = studyLine.split('\t');
                    const downloadUrlIndex = headers.indexOf("download_url");
                    const downloadUrl = cells[downloadUrlIndex];
                    if (downloadUrl) {
                        const downloadLink = document.getElementById("download_url");
                        if (downloadLink) {
                            downloadLink.href = downloadUrl;
                        }
                    }
                } else {
                    console.warn(`No download URL found for ${IDR_ID} in TSV file`);
                }
            });
    });

</script>
{% endblock %}