{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div style="border: 2px solid #6495ED; padding: 15px; border-radius: 8px; width: 100%; position: relative;">
            <div class="Download-container"> 
                <button class="Download" onclick="Download()"  onmouseover="this.style.backgroundColor='#3d79e9'" onmouseout="this.style.backgroundColor='#6495ED'">Download Transcript List</button>
            </div>
            <h4 style="color: #6495ED;">Your submittion :</h4>
            <p><strong>Correlation coefficient: </strong><span id="coefficient"></span></p>
            <p><strong>Correlation: </strong><span id="correlation"></span></p>
            <p><strong>Cut-off Value: </strong><span id="cut-off"></span></p>
            <p><strong>Query ID: </strong><span id="GID"></span></p>
        </div><br>
        <table width="100%" bordercolor="black" border="1" style="border-collapse:collapse; word-break:break-all">
            <tbody>
                <tr>
                    <td width="200px" align="center"><strong>Gene / Probe ID</strong></td>
                    <td id="gid" colspan="3" ></td>
                </tr>
                <tr>
                    <th style="vertical-align: middle;">KEGG ortholog</th>
                    <td id="kegg_result" colspan="3" style="padding: 0; border: none;"></td>
                </tr>
            </tbody>
        </table>
        <br>
        <!-- Highcharts Line Chart -->
        <div class="chart-container">
            <div id="coexpressionChart" width="100%"></div>
        </div>

        <!-- enrichment button -->
        <div class="btn-container">
            <div class="btn-row">
                <button class="custom-btn"  onclick="Enrichment('pathway')">Pathway Enrichment Analysis</button>
                <button class="custom-btn"  onclick="Enrichment('go')">GO Enrichment Analysis</button>
            </div>
        </div>
        
        <!-- list -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title" id="staticBackdropLabel">Matched gene list</h2>
                    </div>
                    <div class="modal-body">
                        <div>
                            <button id="select-all-btn" class="btn btn-primary">Select All</button>
                            <button id="deselect-all-btn" class="btn btn-secondary">Deselect All</button>
                        </div><br>
                        <table id="expression-table" class="display table table-striped"  style="width: 100%;">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                        <div class="dataTables_info"></div>
                        <div id="no-annotation-section" class="no-annotation-section mt-4"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="modal-submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/coexpression_single_result.js' %}"></script>
<style>
    .Download-container{
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .Download{
        background-color: #6495ED;
        color: white;
        border: none;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }
    .chart-container { 
        width: 100%; 
        margin-bottom: 30px; 
    }
    .btn-container {
        display: flex;
        flex-direction: column;
        align-items: center;   
        gap: 20px;       
        margin-top: 30px;
    }

    .btn-row {
        display: flex;
        justify-content: center;
        gap: 56px;            
    }

    .custom-btn {
        display: inline-block;
        padding: 8px 20px;  
        font-size: 1em;      
        color: #438bff; 
        background: #fff; 
        border: 2px solid #438bff;
        border-radius: 12px; 
        cursor: pointer;
        max-width: 300px;      
        text-align: center;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        font-weight: normal;
        white-space: normal;
        word-break: break-word;
    }

    .custom-btn:hover {
        background: #e8f5ffd2;     
        color: #438bff;
        box-shadow: 0 2px 8px rgba(56,150,251,0.06); 
    }

    .modal-custom {
        max-width: 80%;
    }
</style>    
{% endblock %}