<!--@Author: Hasan Ali Özkan-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Files</title>
    
    <style>
        @font-face {
            font-family: 'Font Awesome 6 Free';
            font-style: normal;
            font-weight: 900;
            src: url('spel/static/fa-solid-900.woff2') format('woff2');
        }
        /* General styling */
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }



        .container {
            text-align: center;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            max-height: 450px;
            margin: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        /* Header styling */
        h1 {
            font-size: 1.8rem;
            color: #0056b3;
            margin-bottom: 20px;
        }

        /* File input styling */
        .file-upload {
            border: 2px dashed #ccc;
            background-color: #fafafa;
            padding: 20px;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease;
            margin: 20px 0;
        }

        .file-upload:hover {
            background-color: #e0f7fa;
        }

        .file-upload i {
            font-size: 3rem;
            color: #0056b3;
        }

        .file-upload p {
            font-size: 1.2rem;
            color: #555;
        }

        .file-list {
            margin-top: 15px;
            font-size: 1rem;
            color: #333;
            text-align: left;
        }

        /* Error alert box */
        .alert {
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            margin-top: 15px;
            display: inline-block;
        }
        .success{
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            margin-top: 15px;
            display: inline-block;
        }

        /* Submit button */
        input[type="submit"] {
            padding: 12px 20px;
            font-size: 1.2rem;
            background-color: #0056b3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 80%;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #00408d;
        }

                /* Footer */
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #666;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Upload Files</h1>

    {% if error_message %}
        <div class="alert">{{ error_message }}</div>
    {% endif %}
    {% if success_message %}
    <div class="success">{{ success_message }}</div>
    {% endif %}

    <form method="post" enctype="multipart/form-data">
        <div id="drop-area" class="file-upload" ondrop="dropFile(event)" ondragover="allowDrop(event)" onclick="triggerFileInput()">
            
            <span>

                <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12.5535 2.49392C12.4114 2.33852 12.2106 2.25 12 2.25C11.7894 2.25 11.5886 2.33852 11.4465 2.49392L7.44648 6.86892C7.16698 7.17462 7.18822 7.64902 7.49392 7.92852C7.79963 8.20802 8.27402 8.18678 8.55352 7.88108L11.25 4.9318V16C11.25 16.4142 11.5858 16.75 12 16.75C12.4142 16.75 12.75 16.4142 12.75 16V4.9318L15.4465 7.88108C15.726 8.18678 16.2004 8.20802 16.5061 7.92852C16.8118 7.64902 16.833 7.17462 16.5535 6.86892L12.5535 2.49392Z" fill="#1C274C"></path> <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#1C274C"></path> </g></svg>
            </span>
            <p>Drag and drop files here, or click to select</p>
            <em><span>Allowed file types:  {{allowed_file}}</span></em>
            <input type="file" name="file" id="fileInput" style="display: none;" onchange="handleFileSelect(event)" multiple>
        </div>
        <div id="fileList" class="file-list"></div>
        <input type="submit" value="Upload">
    </form>
</div>
<footer>
    <p>&copy; 2024 SFSGL is a  <strong>CommonCodeBase</strong> project maintained by Hasan Ali Özkan</p>
</footer>

<script>
    // Allow drop event
    function allowDrop(event) {
        event.preventDefault();
        document.getElementById('drop-area').style.backgroundColor = '#e0f7fa';
    }

    // Handle drop event
    function dropFile(event) {
        event.preventDefault();
        const fileInput = document.getElementById('fileInput');
        const files = event.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            displayFileList(files);
        }
    }

    // Handle file selection through click
    function handleFileSelect(event) {
        const files = event.target.files;
        displayFileList(files);
    }

    // Display list of selected or dropped files
    function displayFileList(files) {
        const fileListDiv = document.getElementById('fileList');
        fileListDiv.innerHTML = ''; // Clear current file list
        const fileNames = Array.from(files).map(file => `<li>${file.name}</li>`).join('');
        fileListDiv.innerHTML = `<ul>${fileNames}</ul>`;
    }

    // Trigger the file input dialog when the drop-area is clicked
    function triggerFileInput() {
        document.getElementById('fileInput').click();
    }

    // Optional: Reset drop area styling when files are deselected
    document.getElementById('fileInput').addEventListener('change', function() {
        if (!this.files.length) {
            document.getElementById('drop-area').style.backgroundColor = '#fafafa';
            document.getElementById('fileList').innerHTML = '';
            document.getElementById('drop-area').innerHTML = `<i class="fas fa-cloud-upload-alt"></i><p>Drag and drop files here, or click to select</p>`;
        }
    });
</script>

</body>
</html>