{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <span class="badge rounded-pill step" id="enrichment-badge"></span>
                <p id="enrichment-description" class="mb-0 mt-1"></p>
            </div>
            <div class="d-flex gap-3 align-items-center">
                <div class="btn-group shadow-sm" role="group" id="metric-toggle-group" style="display: none;">
                    <input type="radio" class="btn-check" name="metricToggle" id="metricFDR" value="fdr" autocomplete="off" checked>
                    <label class="btn btn-outline-primary btn-sm" for="metricFDR">FDR</label>

                    <input type="radio" class="btn-check" name="metricToggle" id="metricPValue" value="p_value" autocomplete="off">
                    <label class="btn btn-outline-primary btn-sm" for="metricPValue">P-value</label>
                </div>

                <button id="download-enrichment-table" class="btn btn-sm btn-outline-secondary shadow-sm">
                    Download Table
                </button>
            </div>
        </div>

        <div id="top20-bubble-container" style="display: none; margin-bottom: 30px;">
            <div id="top20-bubble-chart"></div>
        </div>
        
        <div class="table-responsive">
            <table id="enrichment-results-table" class="table align-middle" style="width:100%;">
                <thead class="table-light">
                    <tr id="table-header">
                        <!-- 動態產生 -->
                    </tr>
                </thead>
                <tbody>
                    <!-- 動態產生 -->
                </tbody>
            </table>
        </div>

        <div class="btn-container" id="bubble-btn-container" style="display: none;">
            <div class="btn-row">
                <button class="custom-btn" id="biological">Biological Process</button>
                <button class="custom-btn" id="cellular">Cellular Component</button>
                <button class="custom-btn" id="molecular">Molecular Function</button>
            </div>
        </div>

        <!-- bubble 圖 -->
        <div class="modal fade" id="bubble-container" 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">GO Bubble Plot</h2>
                    </div>
                    <div class="modal-body">
                        <div id="go-bubble-chart" style="width:100%"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{% static 'js/analysis/enrichment_result.js' %}"></script>
<style>

    #step2-container{
        width: 80%;              /* 限制寬度 */
        border: 1px solid #ccc;   /* 加框線 */
        padding: 15px;           /* 內距 */
        border-radius: 10px;     /* 圓角 */
        background-color: #f8f8f8; /* 淡背景色 */
    }
    .badge {
        font-size: 1.5rem;  /* 調整字體大小 */
        padding: 10px 15px; /* 增加內邊距，讓圓角標籤更大 */
        background-color: #6495ED;
        margin-bottom: 5px;
    }
    .pval-light {
        background-color: #ffeaea !important;  /* 淺紅 */
        color: #b71c1c !important;
        font-weight: bold;
        text-align: center;
    }
    .pval-strong {
        background-color: #ffb3b3 !important;  /* 深紅 */
        color: #b71c1c !important;
        font-weight: bold;
        text-align: center;
    }
    .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: 1.5em;      
        color: #2da000; 
        background: #fff; 
        border: 2px solid #2da000;
        border-radius: 12px; 
        cursor: pointer;
        max-width: 500px;      
        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: #d4ffc3cc;     
        color: #2da000;
        box-shadow: 0 2px 8px rgba(56,150,251,0.06); 
    }

    .modal-custom {
        max-width: 80%;
    }

</style>    
{% endblock %}