<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Block - Reitti</title>
    <link rel="icon" th:href="@{/img/logo.svg}">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/memories.css">
    <link rel="stylesheet" href="/css/lineicons.css">
</head>
<body class="memories-page">
<div class="settings-container">
    <nav class="settings-nav">
        <div class="settings-header">
            <a th:href="@{/memories/{id}(id=${memoryId})}" class="back-link">
                <i class="lni lni-arrow-left"></i>
                <span>Back to Memory</span>
            </a>
            <h1>Edit Block</h1>
        </div>
    </nav>
    
    <div class="settings-content-area">
        <div th:fragment="edit-text-block" th:if="${block.blockType.name() == 'TEXT'}" class="memory-form">
            <h2>Edit Text Block</h2>
            <form th:attr="hx-post=@{/memories/{memoryId}/blocks/{blockId}/text(memoryId=${memoryId}, blockId=${block.id})}" hx-target="closest .memory-block" hx-swap="innerHTML" hx-vals="js:{timezone: getUserTimezone()}">
                <div class="form-group">
                    <label for="headline">Headline</label>
                    <input type="text" id="headline" name="headline" class="form-control" 
                           th:value="${textBlock?.headline}" placeholder="Enter headline">
                </div>
                <div class="form-group">
                    <label for="content">Content</label>
                    <textarea id="content" name="content" class="form-control" rows="10" 
                              placeholder="Enter content" th:text="${textBlock?.content}"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" 
                            th:attr="hx-get=@{/memories/{memoryId}/blocks/{blockId}/view(memoryId=${memoryId}, blockId=${block.id})}"
                            hx-target="closest .memory-block" 
                            hx-swap="innerHTML" 
                            class="btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
        <div th:fragment="edit-cluster-trip-block" th:if="${block.blockType.name() == 'CLUSTER_TRIP'}" class="memory-form">
            <h2 th:text="#{memory.edit.block.cluster.trip.title}">Edit Trips Block</h2>
            <form th:attr="hx-post=@{/memories/{memoryId}/blocks/{blockId}/cluster(type='CLUSTER_TRIP', memoryId=${memoryId}, blockId=${block.id})}" hx-target="closest .memory-block" hx-swap="innerHTML" hx-vals="js:{timezone: getUserTimezone()}">
                <div class="form-group">
                    <label th:text="#{memory.edit.block.title}" for="title">Title</label>
                    <input type="text" id="title" name="title" class="form-control"
                           th:value="${clusterTripBlock?.title}" th:placeholder="#{memory.edit.block.title.placeholder}" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label th:text="#{memory.edit.block.cluster.trip.select.trips}">Select Trips</label>
                    <table class="table">
                        <thead>
                            <tr>
                                <th th:text="#{memory.edit.block.cluster.trip.selected}">Selected</th>
                                <th th:text="#{memory.edit.block.cluster.trip.trip}">Trip</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="tripDto : ${availableTrips}">
                                <td>
                                    <input type="checkbox"
                                           name="selectedParts"
                                           th:value="${tripDto.memoryTrip() ? 'm-id:' + tripDto.id() : 't-id:' + tripDto.id() }"
                                           th:checked="${tripDto.memoryTrip()}">
                                </td>
                                <td th:text="${#temporals.format(tripDto.trip().startTime, 'MMM d, yyyy HH:mm')} + ' (' + ${tripDto.trip().startVisit.name} + ') -> ' + ${#temporals.format(tripDto.trip().endTime, 'MMM d, yyyy HH:mm')} + ' (' + ${tripDto.trip().endVisit.name} + ')'">Trip details</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-actions">
                    <button type="button"
                            th:attr="hx-get=@{/memories/{memoryId}/blocks/{blockId}/view(memoryId=${memoryId}, blockId=${block.id})}"
                            hx-target="closest .memory-block"
                            hx-swap="innerHTML"
                            class="btn btn-secondary" th:text="#{form.cancel}">Cancel</button>
                    <button type="submit" class="btn btn-primary" th:text="#{form.save.changes}">Save Changes</button>
                </div>
            </form>
        </div>
        <div th:fragment="edit-cluster-visit-block" th:if="${block.blockType.name() == 'CLUSTER_VISIT'}" class="memory-form">
            <h2 th:text="#{memory.edit.block.cluster.visit.title}">Edit Visits Block</h2>
            <form th:attr="hx-post=@{/memories/{memoryId}/blocks/{blockId}/cluster(type='CLUSTER_VISIT', memoryId=${memoryId}, blockId=${block.id})}" hx-target="closest .memory-block" hx-swap="innerHTML" hx-vals="js:{timezone: getUserTimezone()}">
                <div class="form-group">
                    <label th:text="#{memory.edit.block.title}" for="visit_title">Title</label>
                    <input type="text" id="visit_title" name="title" class="form-control"
                           th:value="${clusterVisitBlock?.title}" th:placeholder="#{memory.edit.block.title.placeholder}" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label th:text="#{memory.edit.block.cluster.visit.select.visits}">Select Trips</label>
                    <table class="table">
                        <thead>
                            <tr>
                                <th th:text="#{memory.edit.block.cluster.visit.selected}">Selected</th>
                                <th th:text="#{memory.edit.block.cluster.visit.visit}">Visit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="visitDto : ${availableVisits}">
                                <td>
                                    <input type="checkbox"
                                           name="selectedParts"
                                           th:value="${visitDto.memoryVisit() ? 'm-id:' + visitDto.id() : 'v-id:' + visitDto.id() }"
                                           th:checked="${visitDto.memoryVisit()}">
                                    <input type="hidden" name="memoryPart" th:value="${visitDto.memoryVisit()}">
                                </td>
                                <td th:text="${visitDto.visit().name} + ' (' + ${#temporals.format(visitDto.visit().startTime, 'MMM d, yyyy HH:mm')} + ' -> ' + ${#temporals.format(visitDto.visit().endTime, 'MMM d, yyyy HH:mm')} + ')'">Visit details</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-actions">
                    <button type="button"
                            th:attr="hx-get=@{/memories/{memoryId}/blocks/{blockId}/view(memoryId=${memoryId}, blockId=${block.id})}"
                            hx-target="closest .memory-block"
                            hx-swap="innerHTML"
                            class="btn btn-secondary" th:text="#{form.cancel}">Cancel</button>
                    <button type="submit" class="btn btn-primary" th:text="#{form.save.changes}">Save Changes</button>
                </div>
            </form>
        </div>
        <div th:fragment="edit-image-gallery-block" th:if="${block.blockType.name() == 'IMAGE_GALLERY'}" class="memory-form">
            <h2 th:text="#{memory.block.gallery.edit}">New Image Gallery Block</h2>
            <form th:attr="hx-post=@{/memories/{id}/blocks/{blockId}/image-gallery(id=${memoryId}, blockId=${block.id})}" hx-target="closest .memory-block" hx-swap="innerHTML" hx-vals="js:{timezone: getUserTimezone()}">
                <div class="gallery-panels">
                    <!-- Immich Panel -->
                    <div class="gallery-panel immich-panel" th:if="${immichEnabled && isOwner}">
                        <h4 th:text="#{memory.block.gallery.immich.title}">Select from Immich</h4>
                        <div class="immich-photos-container">
                            <div class="immich-photos-grid"
                                 id="immichPhotosGrid"
                                 th:attr="hx-get=@{/memories/{id}/blocks/immich-photos(page=0, id=${memoryId})}"
                                 hx-target=".immich-photos-container"
                                 hx-trigger="load"
                                 hx-swap="innerHTML">
                                <div class="loading" th:text="#{memory.block.gallery.loading}">Loading photos...</div>
                            </div>
                            <div class="immich-pagination" id="immichPagination"></div>
                        </div>
                    </div>

                    <!-- File Upload Panel -->
                    <div class="gallery-panel upload-panel">
                        <h4 th:text="#{memory.block.gallery.upload.title}">Upload Images</h4>
                        <div class="upload-area">
                            <input type="file"
                                   id="fileInput"
                                   name="files"
                                   multiple
                                   accept="image/*"
                                   class="form-control"
                                   th:attr="hx-post=@{/memories/{id}/blocks/upload-image(id=${memoryId})}"
                                   hx-encoding="multipart/form-data"
                                   hx-target="#selectedPhotos"
                                   hx-swap="beforeend">
                            <label for="fileInput" class="upload-label">
                                <i class="lni lni-cloud-upload"></i>
                                <span th:text="#{memory.block.gallery.upload.choose}">Choose files or drag here</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Combined Selected Photos Section -->
                <div class="selected-photos-section">
                    <h4 th:text="#{memory.block.gallery.selected.title}">Selected Photos</h4>
                    <div class="selected-photos-combined" id="selectedPhotos">
                        <div th:each="image : ${imageBlock.images}" class="selected-photo-item">
                            <img th:src="${image.imageUrl}" alt="Uploaded image">
                            <input type="hidden" name="uploadedUrls" th:value="${image.imageUrl}">
                            <button type="button" class="btn-remove"
                                    hx-get="/memories/fragments/empty"
                                    hx-target="closest .selected-photo-item"
                                    hx-swap="delete"
                                    th:title="#{memory.block.gallery.remove}">
                                <i class="lni lni-trash-3"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button"
                            th:attr="hx-get=@{/memories/{memoryId}/blocks/{blockId}/view(memoryId=${memoryId}, blockId=${block.id})}"
                            hx-target="closest .memory-block"
                            hx-swap="innerHTML"
                            class="btn btn-secondary" th:text="#{form.cancel}">Cancel</button>
                    <button type="submit" class="btn btn-primary" th:text="#{form.save.changes}">Save Changes</button>
                </div>
            </form>

        </div>

    </div>
</div>
</body>
</html>
