<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload a Zip File - Retuve</title>
    <link rel="stylesheet" href="/static/main.css">
</head>

<body class="index-body">
    <header>Retuve</header>
    <div class="index-container">
        <h1>Upload a Zip File</h1>
        <form id="upload-form" action="/api/upload/" enctype="multipart/form-data" method="post">
            <input type="file" name="file" accept=".zip,.jpg,.png,.dcm,.nii.gz" required>
            <select name="keyphrase">
                {% for keyphrase in keyphrases %}
                <option value="{{ keyphrase }}">{{ keyphrase }}</option>
                {% endfor %}
            </select>
            <input type="submit" value="Upload">
        </form>

        <div id="upload-progress-container" style="display: none;">
            <p>Uploading...</p>
            <progress id="upload-progress" value="0" max="100"></progress>
        </div>

        <div id="upload-result"></div>
        <a href="/" class="back-button upload-back-button">Back</a>
    </div>
    <footer>&copy; 2024 Adam McArthur</footer>
    <script>
        document.querySelector('#upload-form').addEventListener('submit', function (event) {
            event.preventDefault();

            const form = event.target;
            const formData = new FormData(form);
            const keyphrase = document.querySelector('select[name="keyphrase"]').value;

            const progressContainer = document.getElementById('upload-progress-container');
            const progressBar = document.getElementById('upload-progress');
            const resultDiv = document.getElementById('upload-result');

            progressContainer.style.display = 'block';
            resultDiv.innerHTML = '';

            const xhr = new XMLHttpRequest();
            xhr.open('POST', `/api/upload/${encodeURIComponent(keyphrase)}`);

            xhr.upload.addEventListener('progress', function (event) {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    progressBar.value = percentComplete;
                }
            });

            xhr.addEventListener('load', function () {
                progressContainer.style.display = 'none';

                if (xhr.status === 200) {
                    resultDiv.innerHTML = '<p>Upload successful!</p>';
                } else {
                    resultDiv.innerHTML = '<p>Upload failed. Please try again.</p>';
                }
            });

            xhr.addEventListener('error', function () {
                progressContainer.style.display = 'none';
                resultDiv.innerHTML = '<p>An error occurred during the upload.</p>';
            });

            xhr.send(formData);
        });
    </script>
</body>

</html>