{% extends 'base.html' %}

{% block content %}


<p>{{ _('The Clam AntiVirus Scanner (ClamAV) antivirus software searches your files for malicious programs. If the scanner identifies a potential security threat, it flags the file to allow you to take the appropriate action.') }}</p>

<div class="container">


<div class="col-auto">
<label class="directory-select-label" for="directory-select">{{ _('Choose a directory') }}</label><br>
<div class="input-group">
        <input type="text" id="directory-select" class="form-control" list="directory-options">
        <datalist id="directory-options">
            {% for directory in directories %}
                <option value="{{ directory }}">
            {% endfor %}
        </datalist>       
  <span class="input-group-btn">
    <button id="start-scan-btn" class="btn btn-primary" tabindex="-1">{{ _('Start Scan') }}</button>

    <!-- Scanning Spinner Button (Initially hidden) -->
    <button id="scanning-btn" class="btn btn-primary" tabindex="-1" type="button" style="display: none;" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        {{ _('Scanning...') }}
    </button>


  </span>
</div>
</div>



    <!-- Scan Complete Message (Initially hidden) -->
    <div id="scan-complete-message" class="alert alert-success mt-3 mb-3" style="display: none;">
        {{ _('Scan is complete!') }}
    </div>
    
    <!-- Scan Results Card (Initially hidden) -->
    <div id="scan-results-card" class="card card-one mt-3" style="display: none;">
        <div class="card-header" style="display: block;">
            <h6 class="card-title">{{ _('Scan Results') }}</h6>
            <nav class="nav nav-icon nav-icon-sm ms-auto">
                <a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
                <a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
            </nav>
        </div>
        <div class="card-body">
            <div class="row row-cols-auto gy-3 gx-5">
                <div class="col-auto">
                    <!-- Scan Results -->
                    <label class="fs-xs mb-1"><div id="scan-results"></div></label>  
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to handle displaying scan results in real-time
// Function to handle displaying scan results in real-time
function displayScanResults(result) {
    const scanResultsDiv = document.getElementById('scan-results');

    // Split the current content into an array of lines
    const lines = scanResultsDiv.innerHTML.split('<br>');

    // Check if the result starts with "Scanning"
    if (result.startsWith('Scanning')) {
        // Append the result to the array of lines
        lines.push(result);
    } else {
        // If it does not start with "Scanning," replace the last line
        lines[lines.length - 1] = result;
    }

    // Update the inner HTML with the modified lines
    scanResultsDiv.innerHTML = lines.join('<br>');
}


    // Function to show the scan complete message
    function showScanCompleteMessage() {
        document.getElementById('scan-complete-message').style.display = 'block';
    }

    // Function to initiate the scan when the "Start Scan" button is clicked
    document.getElementById('start-scan-btn').addEventListener('click', function() {
        // Hide the "Start Scan" button and show the scanning spinner button
        document.getElementById('start-scan-btn').style.display = 'none';
        document.getElementById('scanning-btn').style.display = 'inline-block';

        // Get the selected directory from the dropdown
        const selectedDirectory = document.getElementById('directory-select').value;

        // Send the selected directory to the server for scanning
        fetch(`/start-scan?directory=${encodeURIComponent(selectedDirectory)}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('{{ _("Network response was not ok") }}');
                }
                return response.body.getReader();
            })
            .then(reader => {
                document.getElementById('scan-results-card').style.display = 'block';
                // Read and display scan results in real-time
                const decoder = new TextDecoder('utf-8');
                return reader.read().then(function processText({ done, value }) {
                    if (done) {
                        showScanCompleteMessage();
                        return;
                    }
                    const result = decoder.decode(value);
                    displayScanResults(result);
                    return reader.read().then(processText);
                });
            })
            .catch(error => {
                console.error('Scan failed:', error);
                displayScanResults('Scan failed: ' + error.message);
                document.getElementById('start-scan-btn').style.display = 'block';
            })
            .finally(() => {
                // Show the scan results card after the scan is complete
                document.getElementById('scanning-btn').style.display = 'none';
                document.getElementById('start-scan-btn').style.display = 'block';
            });
    });




function inputScanDomain() {
  const urlParams = new URLSearchParams(window.location.search);
  const pathValue = urlParams.get('path');

  const directoryInput = document.getElementById("directory-select");

  if (pathValue) {
    directoryInput.value = pathValue;
    document.getElementById('start-scan-btn').click();
  }
}

// Listen for changes in the URL's query parameters
window.addEventListener("hashchange", inputScanDomain);
window.addEventListener("popstate", inputScanDomain);
window.addEventListener("load", inputScanDomain);



</script>








{% endblock %}