<!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>Photo Viewer | PhotoGallery</title>
    <meta name="description"
        content="View and manage your photos in PhotoGallery. Edit titles, descriptions, tags, and technical info for each image.">
    <meta name="keywords"
        content="photo viewer, photo gallery, image management, photo tags, download photos, photo metadata">

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

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-md sticky-top 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}">
                    <img th:src="@{/icons/arrow-left.svg}" class="icon me-2" alt="">Back to Grid
                </a>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container py-4 py-md-5">
        <div class="row g-4">

            <!-- Photo Display -->
            <section class="col-lg-8">
                <div class="photo-stage mb-4">
                    <img th:src="@{${photo.filePath}}" alt="Photo of [[${photo.title}]]" class="img-fluid">
                </div>

                <div class="d-flex justify-content-center">
                    <div class="btn-group btn-action-group rounded-pill overflow-hidden shadow" role="group"
                        aria-label="Photo Actions">
                        <a th:href="@{${photo.filePath}}" class="btn" download aria-label="Download photo">
                            <img th:src="@{/icons/download.svg}" class="icon" alt="">
                        </a>
                        <a th:href="@{${photo.filePath}}" class="btn" target="_blank" rel="noopener"
                            aria-label="Open original photo">
                            <img th:src="@{/icons/arrow-up-right.svg}" class="icon" alt="">
                        </a>
                        <button class="btn" th:fragment="favButton"
                            th:attr="hx-post=@{/photo/favorite/{id}(id=${photo.id})}" 
                            hx-swap="outerHTML"
                            hx-boost="false" aria-label="Toggle favorite">
                            <img th:if="${!photo.favourite}" th:src="@{/icons/star.svg}" class="icon" alt="">
                            <img th:if="${photo.favourite}" th:src="@{/icons/star-fill.svg}" class="icon" alt="">
                        </button>
                        <button class="btn" title="Fullscreen"
                            onclick="document.querySelector('.photo-stage img').requestFullscreen()"
                            aria-label="View fullscreen">
                            <img th:src="@{/icons/arrows-fullscreen.svg}" class="icon" alt="">
                        </button>
                    </div>
                </div>
            </section>

            <!-- Photo Metadata & Editing -->
            <aside class="col-lg-4">

                <!-- Properties Form -->
                <form th:object="${photo}" method="post" th:action="@{/photo/{id}(id=${photo.id})}"
                    class="card mb-4 shadow-sm" hx-boost="false">
                    <div class="card-body p-4">
                        <h2 class="fw-bold mb-4 fs-5">
                            <img th:src="@{/icons/pencil-square.svg}" class="icon me-2" alt="">Properties
                        </h2>

                        <div class="mb-3">
                            <label class="form-label" for="title">Title</label>
                            <input id="title" th:field="*{title}" class="form-control" type="text"
                                placeholder="Add a title...">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="description">Description</label>
                            <textarea id="description" th:field="*{description}" class="form-control" rows="3"
                                placeholder="Describe this moment..."></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Tags</label>
                            <div class="input-group">
                                <span class="input-group-text bg-transparent border-end-0 text-white-50">
                                    <img th:src="@{/icons/tag.svg}" class="icon" alt="">
                                </span>
                                <input name="newTag" class="form-control border-start-0" maxlength="20"
                                    placeholder="Add tag & hit Enter"
                                    th:attr="hx-post=@{/tags/add(photoId=${photo.id})}"
                                    hx-trigger="keyup[key=='Enter'], blur" 
                                    hx-target="#tagContainer" 
                                    hx-swap="beforeend"
                                    hx-on::after-request="this.value=''" 
                                    hx-boost="false" aria-label="Add a new tag" />
                            </div>
                            <div id="tagContainer" class="mt-3 d-flex flex-wrap gap-2">
                                <th:block th:each="tag : *{tags}">
                                    <div th:replace="~{:: tagBadge(tag=${tag})}"></div>
                                </th:block>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="copyright">Copyright</label>
                            <input id="copyright" th:field="*{copyRight}" class="form-control" type="text">
                        </div>

                        <div class="row g-2">
                            <div class="col-6">
                                <button class="btn btn-outline-light w-100 rounded-pill" type="reset">Reset</button>
                            </div>
                            <div class="col-6">
                                <button class="btn btn-primary w-100 rounded-pill" type="submit">Save</button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- Tag Badge Fragment -->
                <span th:if="${!#strings.isEmpty(tag)}" th:fragment="tagBadge(tag)"
                    class="badge rounded-pill bg-primary bg-opacity-25 border border-primary border-opacity-50 px-3 py-2 d-flex align-items-center">
                    <span th:text="${tag}"></span>
                    <input type="hidden" name="tags" th:value="${tag}">
                    <button type="button" class="btn-close btn-close-white ms-2" style="font-size: 0.6rem;"
                        th:hx-post="@{/tags/remove}" 
                        hx-target="closest .badge" 
                        hx-swap="outerHTML" 
                        hx-boost="false"
                        aria-label="Remove tag">
                    </button>
                </span>

                <!-- Technical Info -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-body p-4">
                        <h3 class="fw-bold mb-3 fs-6">
                            <img th:src="@{/icons/info-circle.svg}" class="icon me-2" alt="">Technical Info
                        </h3>
                        <div class="meta-row">
                            <span class="meta-label">Format</span>
                            <span class="meta-value text-uppercase" th:text="${photo.mimeType}"></span>
                        </div>
                        <div class="meta-row">
                            <span class="meta-label">Resolution</span>
                            <span class="meta-value" th:text="${photo.width} + ' x ' + ${photo.height}"></span>
                        </div>
                        <div class="meta-row">
                            <span class="meta-label">Size</span>
                            <span class="meta-value" th:text="${photo.file_size} + ' MB'"></span>
                        </div>
                        <div class="meta-row border-0">
                            <span class="meta-label">Color Space</span>
                            <span class="meta-value" th:text="${photo.colourSpace}"></span>
                        </div>
                    </div>
                </div>

            </aside>
        </div>
    </main>

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

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            document.body.addEventListener("keydown", function (e) {
                if (e.target.name === "newTag" && e.key === "Enter") {
                    e.preventDefault();
                }
            });
        });
    </script>

</body>

</html>