<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>PhotoGallery | Explore Your Collection</title>
    <meta name="description" content="Explore your photo collection with PhotoGallery. Browse, search, and manage images effortlessly.">
    <meta name="keywords" content="photo gallery, image collection, photo search, photo management, photography">

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/home.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="@{/}">
                <img th:src="@{/icons/camera-reels.svg}" class="icon me-2" alt="">Gallery
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMain" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navMain">
                <div class="mx-auto search-container mt-3 mt-md-0">
                    <input class="form-control" type="search" name="search" id="search" placeholder="Search the collection..." aria-label="Search photos"
                        th:hx-post="@{/search}" hx-trigger="input changed delay:500ms, keyup[key=='Enter']" hx-target="#image-container" hx-swap="outerHTML">
                </div>

                <ul class="navbar-nav ms-auto align-items-center gap-2 mt-3 mt-md-0">
                    <li>
                        <a class="btn" th:href="@{/uploadPhoto}" aria-label="Upload photo">
                            <img th:src="@{/icons/upload.svg}" class="icon" alt="">
                        </a>
                    </li>
                    <li>
                        <button class="btn" th:hx-post="@{/scanLibrary}" hx-trigger="click" hx-swap="none" aria-label="Scan library">
                            <img th:src="@{/icons/arrow-clockwise.svg}" class="icon" alt="">
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Carousel -->
    <section id="carousel-1" class="carousel slide d-flex justify-content-center align-items-center" data-bs-ride="carousel" data-bs-interval="4000">
        <div class="carousel-inner" style="max-width: 65rem;">
            <div th:each="carouselImage, iterStat : ${carouselImages}" class="carousel-item" th:classappend="${iterStat.first} ? active : ''">
                <img th:src="@{${carouselImage.filePath}}" alt="Carousel Image" class="d-block w-100">
            </div>
        </div>
        <div class="carousel-indicators">
            <button th:each="carouselImage, iterStat : ${carouselImages}" type="button" data-bs-target="#carousel-1" th:attr="data-bs-slide-to=${iterStat.index}" th:class="${iterStat.first} ? active : ''" aria-label="Slide [[${iterStat.index + 1}]]"></button>
        </div>
    </section>

    <!-- Photo Grid -->
    <main class="py-4 py-md-5">
        <div id="image-container" th:fragment="image-container" class="container-fluid px-2">

            <div id="image-row" class="custom-photo-grid">
                <th:block th:fragment="images">
                    <div class="photo-card" th:each="image : ${images}">
                        <a th:href="@{/photo/{id}(id=${image.id})}">
                            <img th:src="@{${image.thumbnailPath}}" loading="lazy" alt="Photo titled [[${image.title}]]">
                            <div class="photo-overlay">
                                <small class="text-white text-truncate" th:text="${image.title}">Image Title</small>
                            </div>
                        </a>
                    </div>
                </th:block>
            </div>

            <div class="htmx-indicator">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <div style="height: 10px;" th:hx-get="@{/loadMoreImages}" hx-trigger="intersect" hx-target="#image-row" hx-swap="beforeend" hx-indicator=".htmx-indicator"></div>
        </div>
    </main>

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

</body>

</html>
