{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <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 valid symbols or IDs (separate by semicolon or line break)</label><br>
                    <textarea id="query" name="query" style="width: 333px; height: 100px">{{ gene_list }}</textarea>
                </form>
                <hr>
                <button class="btn btn-outline-primary" id="submit" style="width: 10%; position:relative; left:0%;">submit</button>
            </div>
        </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-next" class="btn btn-primary">Next</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- condition_list -->
    <div class="modal fade" id="condition_list" 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">Condition Selection</h2>
                </div>
                <div class="modal-body">
                    <form  method="POST">
                        <div>
                            <label>
                                <input type="checkbox" id="select-all-checkbox" onclick="toggleCheckboxes(this.checked)"> Select All/Delete All
                            </label>
                        </div><br>
                        <div id="condition-options-container">
                            <!-- Dynamically populated conditions will be inserted here -->
                        </div>
                    </form>
                </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>
</main>
<script src="{% static 'js/analysis/expression_search.js' %}"></script>
<style>
    .modal-custom {
        max-width: 80%;
    }
    #condition_list .modal-dialog {
        max-width: 40%;
        margin-top: 10%;
    }
</style>    
{% endblock %}