{% extends "banner.html" %}

{% block content %}
    <style>
        .rounded-section {
            border: 1px solid #ccc;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #f3e6ff;
        }
    </style>

    <form id="uploadForm" enctype="multipart/form-data" method="POST" class="p-2 p-md-4" >
        <div class="row">
            <div class="col-md-6">
                <div class="rounded-section">
                    <label class="form-label"><strong>Choose analysis:</strong></label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="mlst" name="mlst" value="mlst">
                        <label class="form-check-label" for="mlst">MLST</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="resistance" name="resistance" value="resistance">
                        <label class="form-check-label" for="resistance">Resistance</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="virulence" name="virulence" value="virulence">
                        <label class="form-check-label" for="virulence">Virulence</label>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rounded-section">
                    <div class="form-check ">
                        <input class="form-check-input" type="checkbox" id="showResistance" name="showResistance" value="all">
                        <label class="form-check-label" for="showResistance">Show all analysed antimicrobials</label>
                    </div>
                    <div class="form-check ">
                        <input class="form-check-input" type="checkbox" id="showVirulence" name="showVirulence" value="virless">
                        <label class="form-check-label" for="showVirulence">Show virulence genes with &lt; 100% match</label>
                    </div>
                    <div >
                        <label for="threshold_vir" class="form-label"><strong>Threshold for %ID:</strong></label>
                        <input type="number" class="form-control" id="threshold_vir" placeholder="Enter threshold" name="threshold_vir" value="98">
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="rounded-section">
                    <label class="form-label" for="bacteria_species"><strong>Choose species:</strong></label>
                    <select class="form-select" name="bacteria" id="bacteria_species" required>
                      <option disabled value="" selected>Choose species:</option>
                      <option value="klebsiella_pneumoniae">Klebsiella pneumoniae</option>
                      <option value="staphylococcus_aureus">Staphylococcus aureus</option>
                    </select>
                </div>
            </div>

            <div class="col-md-6">
                <div class="rounded-section">
                    <label for="fileUpload" class="form-label"><strong>Upload file and submit:</strong></label>
                    <div class="d-flex">
                        <input type="file" class="form-control me-2" id="fileUpload" name="file" required>
                        <button type="submit" class="btn btn-light" id="submitButton">Submit</button>
                    </div>
                    <small class="form-text text-muted mt-2">Please upload only .txt, .fasta, .fas or .fna file with assembled genome. </small>
                </div>
            </div>

        </div>
    </form>
<div id="loadingMessage" style="display: none;">Processing... Please wait.</div>

<script>
document.getElementById('uploadForm').onsubmit = function() {
    // Change the submit button to a loading button
    var submitButton = document.getElementById('submitButton');
    submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';
    submitButton.disabled = true; // Disable the button to prevent multiple submissions
};
</script>


{% endblock %}