<!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 th:text="#{memory.new.page.title}">New Memory - 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">
    <link rel="stylesheet" th:href="@{/css/gallery-block.css}" href="../../static/css/gallery-block.css">
    <link rel="stylesheet" th:href="@{/css/photo-client.css}" href="../../static/css/photo-client.css">
    <link rel="stylesheet" href="/css/leaflet.css">
    <script src="/js/htmx.min.js"></script>
    <script src="/js/leaflet.js"></script>
    <script src="/js/leaflet.geodesic.2.7.2.js"></script>
    <script src="/js/TileLayer.Grayscale.js"></script>
    <script src="/js/raw-location-loader.js"></script>
    <script src="/js/HumanizeDuration.js"></script>
    <script src="/js/photo-client.js"></script>
</head>
<body class="memories-page">
<div class="settings-container">
    <nav class="settings-nav">
        <div class="settings-header">
            <a href="/memories" class="back-link">
                <i class="lni lni-arrow-left"></i>
                <span th:text="#{memory.new.back.to.memories}">Back to Memories</span>
            </a>
            <h1 th:text="#{memory.new.title}">New Memory</h1>
        </div>
    </nav>
    
    <div th:fragment="new-memory" class="settings-content-area">
        <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}" class="memory-form" hx-indicator="#memory-processing-overlay" hx-swap="outerHTML" hx-target="closest .settings-content-area" hx-vals='js:{"timezone": getUserTimezone()}' onsubmit="return validateDates()">
            <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:placeholder="#{memory.form.title.placeholder}" th:value="${title}">
                <input type="hidden" name="year" th:value="${year}">
            </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" th:placeholder="#{memory.form.description.placeholder}" th:text="${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 id="dateError" class="alert alert-error" style="display: none;">
                <i class="lni lni-warning"></i>
                <span id="dateErrorText"></span>
            </div>

            <div class="form-actions">
                <button th:if="${year != 'all'}" th:attr="hx-get=@{/memories/year/{year}(year=${year})}"
                        hx-target=".memories-overview" hx-swap="outerHTML" hx-vals="js:{timezone: getUserTimezone()}" class="btn btn-primary" th:text="#{memory.form.cancel}">Cancel</button>
                <button th:if="${year == 'all'}" th:attr="hx-get=@{/memories/all}"
                        hx-target=".memories-overview" hx-swap="outerHTML" hx-vals="js:{timezone: getUserTimezone()}" class="btn btn-primary" th:text="#{memory.form.cancel}">Cancel</button>
                <button type="submit" class="btn btn-primary"
                        hx-disabled-elt="this">
                    <span th:text="#{memory.form.create}">Create Memory</span>
                </button>
            </div>
        </form>
        <script th:inline="javascript">
            // User settings from server
            window.userSettings = /*[[${userSettings}]]*/ {};

            function getUserTimezone() {
                if (window.userSettings.timezoneOverride) {
                    return window.userSettings.timezoneOverride;
                } else {
                    return Intl.DateTimeFormat().resolvedOptions().timeZone;
                }
            }

            function validateDates() {
                const startDate = document.getElementById('startDate').value;
                const endDate = document.getElementById('endDate').value;
                const errorDiv = document.getElementById('dateError');
                const errorText = document.getElementById('dateErrorText');

                if (!startDate || !endDate) {
                    errorText.textContent = /*[[#{memory.form.date.error.empty}]]*/ 'Dates cannot be empty';
                    errorDiv.style.display = 'block';
                    return false;
                }

                if (new Date(startDate) > new Date(endDate)) {
                    errorText.textContent = /*[[#{memory.form.date.error.end.before.start}]]*/ 'End date must be on or after start date';
                    errorDiv.style.display = 'block';
                    return false;
                }

                errorDiv.style.display = 'none';
                return true;
            }
        </script>

    </div>
</div>

</body>
</html>
