{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div id="step1">
            <p>
                Co-expressed genes / transcripts are a group of genes / transcripts that express simultaneously under specific conditions.<br>
                They tend to be controlled under similar transcriptional regulation and involve in identical biological processes or pathways.<br>
                <strong> Correlation of single gene :</strong>	Pearson's correlation coefficient and Spearman's rank correlation coefficient are applied to identify genes / transcripts with co-expression patterns.<br>
                <strong>Correlation network :</strong>	users can input a group of genes / transcripts and set parameters to view the correlation network. Based on the correlation network, users can find the candidate of the key gene / transcript.
            </p>
            <strong style="font-size: 1.5rem; ">Please specify a function:</strong>
            <div class="img-container">
                <div class="img">
                    <a href="{% url 'coexpression_single' project_id=project_id %}"><img height="250" src="{% static 'images/coexpression_single_gene.png' %}" width="250"></a>
                    <p style="margin-top: 5%;">Select a gene to search genes with similar or contrary expression patterns.</p>
                </div>
                <div class="img">
                    <a href="{% url 'coexpression_network' project_id=project_id %}"><img height="250" src="{% static 'images/coexpression_correlation_network.png' %}" width="250"></a>
                    <p style="margin-top: 5%;">Input a group of genes to view correlation network.</p>
                </div>
                <div class="img">
                    <a href="{% url 'coexpression_wgcna' project_id=project_id %}" class="wgcna-link"><img height="250" src="{% static 'images/coexpression_wgcna.png' %}" width="250"></a>
                    <p style="margin-top: 5%;">Identify gene modules and explore their correlation with external traits.</p>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const wgcnaLinks = document.querySelectorAll('.wgcna-link');
    
    wgcnaLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            Swal.fire({
                title: 'Initializing WGCNA Analysis',
                html: 'Processing large-scale genomic data...<br>This may take few minutes.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading(); 
                }
            });
            
            return true; 
        });
    });
});
</script>
<style>
    .img-container {
        display: flex;           /* 使用 Flexbox */
        justify-content: space-around; /* 左右對齊 */
        padding: 20px;           /* 增加間距 */
        gap: 20px;               /* 設定左右區塊距離 */
    }
    .img {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 250px;
        text-align: center;
    }
    
</style>    
{% endblock %}