<!DOCTYPE html>
<html lang="en" data-bs-theme="dark" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Upload Photo | PhotoGallery</title>
    <meta name="description" content="Upload and manage your photos in PhotoGallery. Add up to 20 images per upload with real-time progress feedback.">
    <meta name="keywords" content="photo upload, image management, gallery, photo gallery, multiple image upload">
    

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/uploadPhoto.css}">
</head>

<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md sticky-top shadow-sm p-3">
        <div class="container">
            <a class="navbar-brand fw-bold text-uppercase tracking-wider" th:href="@{/home}">
                    <img th:src="@{/icons/camera-reels.svg}" class="icon me-2" alt="">
                Gallery
            </a>
            <div class="ms-auto">
                <a class="btn btn-sm btn-outline-light rounded-pill px-4" th:href="@{/home}"
                    aria-label="Back to gallery grid">
                    <img th:src="@{/icons/arrow-left.svg}" class="icon me-2" alt="">
                    Back to Grid
                </a>
            </div>
        </div>
    </nav>

    <!-- Main Upload Section -->
    <main class="container d-flex justify-content-center align-items-center min-vh-100">
        <div class="card p-4 shadow-lg w-100" style="max-width: 500px;">
            <h1 class="mb-3 text-center fs-4">Upload Photos</h1>

            <form method="post" enctype="multipart/form-data" 
                th:hx-post="@{/uploadPhoto}"
                hx-target="#response" hx-swap="innerHTML">

                <div class="mb-3">
                    <label for="files" class="form-label visually-hidden">Select Photos</label>
                    <input class="form-control" type="file" id="files" name="files" accept="image/*" multiple required
                        onchange="if(this.files.length > 20){ alert('Maximum 20 images allowed per upload'); this.value=''; }"
                        aria-describedby="fileHelp">
                    <div id="fileHelp" class="form-text text-muted">Maximum 20 images per upload.</div>
                </div>

                <button class="btn btn-primary w-100" type="submit" aria-label="Upload selected images">
                    Upload Images
                </button>
            </form>

            <!-- Progress Bar -->
            <div class="progress mt-3 d-none" id="uploadProgress" role="progressbar" aria-label="Upload progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
            </div>

            <!-- Response Message -->
            <div id="response" th:fragment="responseMessage" class="mt-3 text-center small" th:text="${message}"></div>
        </div>
    </main>

    <!-- Scripts -->
    <script th:src="@{/js/bootstrap.bundle.min.js}" defer></script>
    <script th:src="@{/js/htmx.min.js}" defer></script>

    <script>
        // Upload progress handling
        document.body.addEventListener('htmx:xhr:loadstart', function () {
            const bar = document.getElementById('uploadProgress');
            if (bar) {
                bar.classList.remove('d-none');
                bar.firstElementChild.style.width = '25%';
            }
        });

        document.body.addEventListener('htmx:xhr:progress', function (evt) {
            const bar = document.querySelector('#uploadProgress .progress-bar');
            if (bar && evt.detail.lengthComputable) {
                bar.style.width = (evt.detail.loaded / evt.detail.total * 100) + '%';
            }
        });

        document.body.addEventListener('htmx:afterRequest', function () {
            const bar = document.getElementById('uploadProgress');
            if (bar) {
                bar.firstElementChild.style.width = '100%';
                setTimeout(() => bar.classList.add('d-none'), 800);
            }
        });
    </script>

</body>

</html>