<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memories - Reitti</title>
    <link rel="icon" th:href="@{/img/logo.svg}">
    <link rel="stylesheet" th:href="@{/css/main.css}" href="../../static/css/main.css">
    <link rel="stylesheet" th:href="@{/css/lineicons.css}" href="../../static/css/lineicons.css">
    <script src="/js/htmx.min.js"></script>
</head>
<body class="memories-page">
<div class="settings-container">
    <div class="settings-nav">
        <div class="navbar">
            <a th:href="@{/}" href="../index.html"><img class="logo" th:src="@{/img/logo.svg}"
                                                        src="../../static/img/logo.svg" alt="reitti logo"
                                                        title="reitti"></a>
            <a href="/" class="nav-link" th:title="#{nav.timeline}"><i class="lni lni-route-1"></i></a>
            <a href="/statistics" class="nav-link" th:title="#{nav.statistics}"><i class="lni lni-bar-chart-4"></i></a>
            <form th:action="@{/logout}" method="post">
                <button type="submit" class="nav-link" style="font-size: 1.4rem;" th:title="#{nav.logout.tooltip}"><i
                        class="lni lni-exit"></i>
                </button>
            </form>
        </div>
    </div>

    <div class="settings-content-area">
        <div id="edit-fragment" class="memory-header" th:fragment="edit-memory">
        <div th:if="${error}" class="alert alert-error">
            <i class="lni lni-warning"></i>
            <span th:text="${error}">Error message</span>
        </div>

        <form th:attr="hx-post=@{/memories/{id}(id=${memory.id})}" hx-vals="js:{timezone: getUserTimezone()}" method="post" class="memory-form" hx-swap="outerHTML" hx-target=".memory-header">
            <input type="hidden" name="version" th:value="${memory.version}">
            <div class="form-group">
                <label for="title" th:text="#{memory.form.title.label}">Title *</label>
                <input type="text" id="title" name="title" required class="form-control" 
                       th:value="${memory.title}"
                       th:placeholder="#{memory.form.title.placeholder}"
                       placeholder="Give your memory a title">
            </div>

            <div class="form-group">
                <label for="description" th:text="#{memory.form.description.label}">Description</label>
                <textarea id="description" name="description" class="form-control" rows="4" 
                          placeholder="Add a description (optional)"
                          th:placeholder="#{memory.form.description.placeholder}"
                          th:text="${memory.description}"></textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="startDate" th:text="#{memory.form.start.date.label}">Start Date *</label>
                    <input type="date" id="startDate" name="startDate" required class="form-control" 
                           th:value="${startDate}">
                </div>

                <div class="form-group">
                    <label for="endDate" th:text="#{memory.form.end.date.label}">End Date *</label>
                    <input type="date" id="endDate" name="endDate" required class="form-control" 
                           th:value="${endDate}">
                </div>
            </div>
            <div class="form-actions">
                <a class="btn btn-secondary"
                        th:href="@{/memories/{id}(id=${memory.id})}" th:text="#{memory.form.cancel}">Cancel</a>
                <button type="submit" class="btn btn-primary" th:text="#{memory.form.update}">Save Changes</button>
            </div>
        </form>
    </div>
    </div>
</div>

<script>

    // User settings for timezone handling
    window.userSettings = /*[[${userSettings}]]*/ {};

    function getUserTimezone() {
        if (window.userSettings.timeZoneOverride) {
            return window.userSettings.timeZoneOverride;
        } else {
            return Intl.DateTimeFormat().resolvedOptions().timeZone;
        }
    }
    // Show/hide image URL field based on header type selection
    document.querySelectorAll('input[name="headerType"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const imageUrlGroup = document.getElementById('imageUrlGroup');
            if (this.value === 'IMAGE') {
                imageUrlGroup.style.display = 'block';
            } else {
                imageUrlGroup.style.display = 'none';
            }
        });
    });
</script>
</body>
</html>
