{% extends 'base.html' %}
{% load static %}
{% block content %}
{% block title %}skinregeneration.org | Stereo-seq{% endblock %}

<link rel="stylesheet" href="{% static '/css/sean2025stereoseq.css' %}">

<div class="title-wrapper">
    <a href="https://doi.org/10.7554/eLife.60066" class="title">
        <h1>placeholder text</h1>
        <p>placeholder text</p>
        <p> See Paper </p>
    </a>
</div>

<div class="sub-title">
    <div class="searchbar">
        <div class="search-div">
            <input type="text" id="geneName" placeholder="Lef1...">
            <button id="searchBtn" onclick="search()">Search</button>
        </div>
    </div>
</div>

<div class="returnButtonContainer">
    <a href="../" id="returnButton">◀ Return to Collection</a>
</div>

<div class="grid-container">
    <div class="sean-grid">
        <div class="s1" id="ages">
            P3
        </div>
        <div class="s2" id="ages">
            P10
        </div>
        <div class="s3" id="ages">
            6mo
        </div>
    </div>
</div>
<div class="grid-container">
    <p>Spatial Clustering</p><button class="toggleLegendButton" data-grid="grid_1">▼</button>
    <div class="sean-grid" id="grid_1">
        <div class="s1" id="portrait">
            <img alt="Pig P3 spatial clustering" class="img1" src='../../../../media/datasets/unpublished/Spatial/PigP3_crop/Thompson2025_PigP3_Spatial_Clustering.png'>
        </div>
        <div class="s2" id="portrait">
            <img alt="Pig P10 spatial clusteringP" class="img1" src='../../../../media/datasets/unpublished/Spatial/PigP10_crop/Thompson2025_PigP10_Spatial_Clustering.png'>
        </div>
        <div class="s3" id="portrait">
            <img alt="Pig 6mo spatial clustering" class="img1" src='../../../../media/datasets/unpublished/Spatial/Pig6mo_crop/Thompson2025_Pig6mo_Spatial_Clustering.png'>
        </div>
    </div>
</div>

<div class="grid-container">
    <p>Spatial Clustering (overlay)</p><button class="toggleLegendButton" data-grid="grid_2">▼</button>
    <div class="sean-grid" id="grid_2">
        <div class="s1" id="portrait">
            <img alt="Pig P3 spatial clustering with mask" class="img1" src='../../../../media/datasets/unpublished/Spatial/PigP3_crop/Thompson2025_PigP3_Spatial_Clustering_wMask.png'>
        </div>
        <div class="s2" id="portrait">
            <img alt="Pig P10 spatial clustering with mask" class="img1" src='../../../../media/datasets/unpublished/Spatial/PigP10_crop/Thompson2025_PigP10_Spatial_Clustering_wMask.png'>
        </div>
        <div class="s3" id="portrait">
            <img alt="Pig 6mo spatial clustering with mask" class="img1" src='../../../../media/datasets/unpublished/Spatial/Pig6mo_crop/Thompson2025_Pig6mo_Spatial_Clustering_wMask.png'>
        </div>
    </div>
</div>

<div class="grid-container">
    <p>Spatial Expression</p><button class="toggleLegendButton" data-grid="grid_3">▼</button>
    <div class="sean-grid" id="grid_3">
        <div class="s1" id="portrait">
            <div class='result' id='imageContainer1'>
                <img alt="Pig P3 spatial expression plot" src="../../../media/datasets/unpublished/Spatial/PigP3_crop/Expression/KRT14.png" class="img-search">
            </div>
        </div>
        <div class="s2" id="portrait">
            <div class='result' id='imageContainer2'>
                <img alt="Pig P10 spatial expression plot" src="../../../media/datasets/unpublished/Spatial/PigP10_crop/Expression/KRT14.png" class="img-search">
            </div>
        </div>
        <div class="s3" id="portrait">
            <div class='result' id='imageContainer3'>
                 <img alt="Pig 6mo spatial expression plot" src="../../../media/datasets/unpublished/Spatial/Pig6mo_crop/Expression/KRT14.png" class="img-search"> 
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelector('#geneName').addEventListener('keydown', function (event) {
        if (event.keyCode === 13) {
            search();
        }
    });

    function search() {
        let geneName = document.querySelector('#geneName').value;
        geneName = geneName.toUpperCase();

        let imageContainers = document.querySelectorAll('.result');

        let databasepath;
        for (let i = 0; i < imageContainers.length; i++) {
            if (imageContainers[i].id === 'imageContainer1') {
                databasepath = 'PigP3_crop';
            } else if (imageContainers[i].id === 'imageContainer2') {
                databasepath = 'PigP10_crop';
            } else if (imageContainers[i].id === 'imageContainer3') {
                databasepath = 'Pig6mo_crop';
            }
    
            imageContainers[i].innerHTML = '';
            const image = document.createElement('img');
            image.src = `../../../media/datasets/unpublished/Spatial/${databasepath}/Expression/${geneName}.png`;
            image.alt = `Spatial clustering expression plot of ${geneName}`;
            image.classList.add("img-search")
            imageContainers[i].appendChild(image);
            console.log("search");
    
        image.onerror = function() {
            imageContainers[i] = document.querySelector('#imageContainer');
            imageContainers[i].innerHTML = '';
        
            const image = document.createElement('img');
            image.src = `../../../media/assets/error3.png`;
            image.alt = `Gene not found`;
            image.classList.add("img-search");
        
            // Append the image to the container
            imageContainers[i].appendChild(image);
        };
    }
}
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggleLegendButton').forEach(button => {
        button.addEventListener('click', function () {
            const gridId = this.getAttribute('data-grid');
            const grid = document.getElementById(gridId);

            if (grid.classList.contains('collapsed')) {
                grid.classList.remove('collapsed');
                this.innerHTML = '▼'; 
            } else {
                grid.classList.add('collapsed');
                this.innerHTML = '▲'; 
            }
        });
    });
});

</script>
<script src="{% static '/js/personal.js' %}" async defer></script>
{% endblock %}