{% extends 'base.html' %}
{% load static %}
{% block content %}
{% block title %}skinregeneration.org | kdm6b total{% endblock %}

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

<div class="title">
    <label for="geneName"><h1> Integrated Cell collection </h1></label>
</div>

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

    <div class="box">
        <div class="s1 pic" id="portrait">
            <img alt="kdm6b-allcell RNA celltype UMAP" class="img1" src="../../../../media/data_files/kdm6b-allcell.png"> 
            <img alt="kdm6b-allcell time RNA celltype UMAP" class="img1" src="../../../../media/data_files/kdm6b-allcellt.png">
        </div>
        
        <div class="d1" id="portrait">
            <div class='result' id='imageContainer'>
                <img alt="kdm6b-allcell Lef1 RNA UMAP expression plot" src="../../../../media/datasets/Kdm6b/e14e17p5/LEF1.png" class="img-search">
            </div>
        </div>
    </div>
</script>
<script>
    window.addEventListener('load', function () {
        document.getElementById('form-box').submit();
    });

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

    function search() {
        let geneName = document.querySelector('#geneName').value;
        geneName = geneName.toUpperCase();
        console.log(geneName);
    
        const imageContainer = document.querySelector('#imageContainer');
        imageContainer.innerHTML = '';
    
        const image = document.createElement('img');
        image.src = `../../../media/datasets/Kdm6b/e14e17p5/${geneName}.png`;
        image.alt = `RNA UMAP expression plot of ${geneName}`;
        image.classList.add("img-search");
    
        // Append the image to the container
        imageContainer.appendChild(image);
    
        // Add an error handler to the image element
        image.onerror = function() {
            const imageContainer = document.querySelector('#imageContainer');
            imageContainer.innerHTML = '';
        
            const image = document.createElement('img');
            image.src = `../../../media/assets/error4.png`;
            image.alt = `Gene not found`;
            image.classList.add("img-search");
        
            // Append the image to the container
            imageContainer.appendChild(image);
        };
    }
    
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168691047-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-168691047-1');
</script>
{% endblock %}