{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div id="step1">
            <div class="card mt-3">
                <div class="card-header fs-5 fw-bold " style="background-color: #6495ED; color: #fff;">
                    Gene list submission
                </div>
                <div class='card-body'>
                    <form id="ajax_form">
                        <label for="gene_id" class="form-label">Please input a gene list with IDs (separate by semicolon or line break)(max=150)</label><br>
                        <textarea id="query" name="query" style="width: 400px; height: 300px">{{ gene_list }}</textarea>
                    </form>
                    <hr>
                    <button class="btn btn-outline-primary" id="submit" style="width: 10%; position:relative; left:0%;">submit</button>
                </div>
            </div>
            <!-- expression_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>
                                    <tr>
                                        <th>Select</th>
                                        <th>Query ID</th>
                                        <th>Gene ID</th>
                                        <th>Description</th>
                                        <th>Definition of KEGG ortholog</th>
                                    </tr>
                                </thead>
                                <tbody>                   
                                </tbody>
                            </table>
                        </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>
        <div id="step2" style="display: none;">
            <span class="badge rounded-pill " style="background-color: #6495ED;">Set parameters</span>
            <div id="step2-container" style="margin-left: 20px; margin-top: 10px;">
                <strong>➢ Correlation coefficient</strong>
                <div>
                    <input type="radio" name="coefficient" value="pcc" checked> Pearson correlation coefficient (PCC)<br>
                    <input type="radio" name="coefficient" value="spearman"> Spearman's rank correlation coefficient (Spearman's rho)
                </div><br>
                <strong>➢ Cut-off value</strong>
                <div>
                    <p>Note: The minimum cut-off value is 0.7 in positive correlation and maximum cut-off value is -0.7 in negative correlation.</p>
                    <input type="text" id="cut-off" name="cut-off" value="0.8">
                </div>
            </div>        
            <div style="margin-left: 50%; margin-top: 20px; text-align: center;">
                <button class="btn btn-outline-primary" id="step2-submit">Submit</button>
                <button class="btn btn-secondary" id="prevStep">Back</button>
            </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/coexpression_network.js' %}"></script>
<style>
    .badge {
        font-size: 1.5rem;  /* 調整字體大小 */
        padding: 10px 15px; /* 增加內邊距，讓圓角標籤更大 */
    }

    .deg-box {
        width: 40%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }

    #step2-container{
        width: 80%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }
    .modal-custom {
        max-width: 80%;
    }
</style>    
{% endblock %}