<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<!-- Users Content Fragment -->
<div th:fragment="users-content">
    <h2 th:text="#{users.title}">User Management</h2>
    <div hx-get="/settings/users-content" hx-trigger="load" hx-target="this" hx-swap="innerHTML"></div>
</div>

<!-- Users List Fragment -->
<div th:fragment="users-list">
    <div th:if="${successMessage}" class="alert alert-success" style="display: block;">
        <span th:text="${successMessage}">User created successfully</span>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger" style="display: block;">
        <span th:text="${errorMessage}">Error message</span>
    </div>
    <div th:if="${requireRelogin}" class="alert alert-warning" style="display: block;">
        <span>Your username has changed to <strong th:text="${newUsername}"></strong>. You will need to log out and log in again with your new username.</span>
    </div>
    <h2 th:text="#{users.title}">Significant Places</h2>

    <div class="settings-card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 th:text="#{users.existing}">Existing Users</h3>
            <button th:if="${isAdmin}" class="btn"
                    hx-get="/settings/user-form"
                    hx-target="#user-management"
                    hx-swap="innerHTML"
                    th:text="#{users.add.title}">Add New User</button>
        </div>
        
        <div th:if="${users.isEmpty()}">
            <p th:text="#{users.no.users}">No users found.</p>
        </div>

        <table th:if="${!users.isEmpty()}">
            <thead>
            <tr>
                <th th:text="#{users.table.username}">Username</th>
                <th th:text="#{users.table.display.name}">Display Name</th>
                <th th:text="#{users.table.role}">Role</th>
                <th th:text="#{users.table.actions}">Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user : ${users}" th:attr="data-user-id=${user.id}" class="user-row">
                <td th:text="${user.username}" th:attr="data-username=${user.username}"></td>
                <td th:text="${user.displayName}" th:attr="data-display-name=${user.displayName}"></td>
                <td th:text="${user.role}" th:attr="data-role=${user.role}"></td>
                <td>
                    <button th:if="${isAdmin || user.username == currentUsername}" class="btn"
                            th:attr="hx-get=@{/settings/user-form(userId=${user.id}, username=${user.username}, displayName=${user.displayName}, role=${user.role})}"
                            hx-target="#user-management"
                            hx-swap="innerHTML"
                            th:text="#{form.update}">Edit
                    </button>
                    <button th:if="${isAdmin && user.username != currentUsername}"
                            class="btn btn-danger"
                            th:attr="hx-post=@{/settings/users/{id}/delete(id=${user.id})}, hx-confirm=#{users.delete.confirm}"
                            hx-target="#user-management"
                            hx-swap="innerHTML"
                            th:text="#{form.delete}">Delete
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- User Form Page Fragment -->
<div th:fragment="user-form-page">
    <form hx-target="#user-management" hx-swap="innerHTML" class="user-form" autocomplete="off" 
          th:attr="hx-post=${userId != null ? '/settings/users/update' : '/settings/users'}"
          enctype="multipart/form-data">
        <input type="hidden" name="userId" th:value="${userId}">
        <h3 th:text="${userId != null ? #messages.msg('users.update.title') : #messages.msg('users.add.title')}">Add New User</h3>
        <div class="form-group">
            <label for="username" th:text="#{users.username.label}">Username</label>
            <input type="text" id="username" name="username" required th:placeholder="#{users.username.placeholder}" autocomplete="off" 
                   th:value="${username}">
        </div>
        <div class="form-group">
            <label for="displayName" th:text="#{users.display.name.label}">Display Name</label>
            <input type="text" id="displayName" name="displayName" required th:placeholder="#{users.display.name.placeholder}" autocomplete="off"
                   th:value="${displayName}">
        </div>
        <div class="form-group">
            <label for="password" th:text="#{users.password.label}">Password</label>
            <input type="password" id="password" name="password" th:required="${userId == null}" th:placeholder="#{users.password.placeholder}" autocomplete="new-password">
            <small th:if="${userId != null}" th:text="#{users.password.keep.current}">Leave empty to keep current password</small>
        </div>
        <div th:if="${isAdmin}" class="form-group">
            <label for="role" th:text="#{users.role.label}">Role</label>
            <div class="select">
                <select id="role" name="role" required>
                    <option value="USER" th:selected="${selectedRole == 'USER' || selectedRole == null}" th:text="#{users.role.user}">User</option>
                    <option value="ADMIN" th:selected="${selectedRole == 'ADMIN'}" th:text="#{users.role.admin}">Admin</option>
                </select>
            </div>
        </div>
        <input th:unless="${isAdmin}" type="hidden" name="role" th:value="${selectedRole ?: 'USER'}">
        <div class="separator"></div>
        <div class="form-group">
            <h3 th:text="#{users.avatar.label}">Profile Picture</h3>
            
            <!-- Current avatar display -->
            <div th:if="${userId != null && hasAvatar}" class="current-avatar">
                <img th:src="@{/avatars/{userId}(userId=${userId}, ts=${#dates.createNow().time})}" 
                     alt="Current avatar" 
                     class="avatar">
            </div>
            
            <!-- Default avatars selection -->
            <div class="default-avatars-section">
                <h4 th:text="#{users.avatar.default.title}">Choose a default avatar:</h4>
                <div class="default-avatars-grid">
                    <label th:each="defaultAvatar : ${defaultAvatars}" class="default-avatar-option">
                        <input type="radio" name="defaultAvatar" th:value="${defaultAvatar}" style="display: none;">
                        <img th:src="@{/img/avatars/default/{avatar}(avatar=${defaultAvatar})}"
                             th:alt="${defaultAvatar}" 
                             class="avatar">
                    </label>
                </div>
            </div>
            
            <div class="separator">
                <span th:text="#{users.avatar.or}">OR</span>
            </div>
            
            <!-- Custom file upload -->
            <div class="custom-avatar-section">
                <h4 th:text="#{users.avatar.custom.title}">Upload a custom image:</h4>
                <div class="avatar-input-row">
                    <input type="file" id="avatar" name="avatar" accept="image/jpeg,image/png,image/gif,image/webp">
                    <button type="button" 
                            th:if="${userId != null && hasAvatar}"
                            class="btn btn-danger avatar-remove-btn"
                            onclick="removeCurrentAvatar()"
                            th:text="#{users.avatar.delete}">Remove current avatar</button>
                </div>
                <small th:text="#{users.avatar.requirements}">Max 2MB. JPEG, PNG, GIF, or WebP format.</small>
            </div>
            
            <input type="hidden" id="removeAvatarFlag" name="removeAvatar" value="false">
        </div>
        <div class="separator"></div>

        <div class="form-group">
            <h3 th:text="#{language.title}">Preferred Language</h3>
            <div class="language-selection">
                <div class="language-buttons">
                    <label class="btn language-btn">
                        <input type="radio" name="preferred_language" value="en" th:checked="${selectedLanguage == 'en' || selectedLanguage == null}" style="display: none;">
                        <span class="language-flag">🇺🇸</span>
                        <span th:text="#{language.english}" class="language-name">English</span>
                    </label>

                    <label class="btn language-btn">
                        <input type="radio" name="preferred_language" value="fi" th:checked="${selectedLanguage == 'fi'}" style="display: none;">
                        <span class="language-flag">🇫🇮</span>
                        <span th:text="#{language.finnish}" class="language-name">Suomi</span>
                    </label>

                    <label class="btn language-btn">
                        <input type="radio" name="preferred_language" value="de" th:checked="${selectedLanguage == 'de'}" style="display: none;">
                        <span class="language-flag">🇩🇪</span>
                        <span th:text="#{language.german}" class="language-name">Deutsch</span>
                    </label>

                    <label class="btn language-btn">
                        <input type="radio" name="preferred_language" value="fr" th:checked="${selectedLanguage == 'fr'}" style="display: none;">
                        <span class="language-flag">🇫🇷</span>
                        <span th:text="#{language.french}" class="language-name">Français</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="separator"></div>

        <div class="form-group">
            <h3 th:text="#{units.title}">Unit System</h3>
            <div class="language-selection">
                <div class="language-buttons">
                    <label class="btn language-btn">
                        <input type="radio" name="unit_system" value="METRIC" th:checked="${selectedUnitSystem == 'METRIC' || selectedUnitSystem == null}" style="display: none;">
                        <span th:text="#{units.metric}" class="language-name">Metric</span>
                        <small th:text="#{units.metric.description}" class="unit-description">km, m, °C</small>
                    </label>

                    <label class="btn language-btn">
                        <input type="radio" name="unit_system" value="IMPERIAL" th:checked="${selectedUnitSystem == 'IMPERIAL'}" style="display: none;">
                        <span th:text="#{units.imperial}" class="language-name">Imperial</span>
                        <span th:text="#{units.imperial.description}" class="unit-description">mi, ft, °F</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="separator"></div>
        <div class="form-group">
            <label class="checkbox-container">
                <input type="checkbox" name="preferColoredMap" th:checked="${preferColoredMap}" class="checkbox-input">
                <span class="checkbox-checkmark"></span>
                <span th:text="#{map.colored.preference}" class="checkbox-label">Show map in color</span>
            </label>
            <p th:text="#{map.colored.preference.description}" class="form-description">When enabled, the map will be displayed in full color. When disabled, the map will be shown in grayscale.</p>
        </div>
        <div class="separator"></div>
        <div class="form-group">
            <h3 th:text="#{users.home.location.label}">Home Location</h3>
            <p class="form-description" th:text="#{users.home.location.description}">Set your home location. This location will be displayed when no data is available for the selected date.</p>
            <div class="home-location-inputs">
                <div class="coordinate-input">
                    <label for="homeLatitude" th:text="#{users.home.latitude.label}">Latitude</label>
                    <input type="number" 
                           id="homeLatitude" 
                           name="homeLatitude" 
                           step="any" 
                           min="-90" 
                           max="90"
                           th:value="${homeLatitude}"
                           th:placeholder="#{users.home.latitude.placeholder}"
                           onchange="updateMapMarker()">
                </div>
                <div class="coordinate-input">
                    <label for="homeLongitude" th:text="#{users.home.longitude.label}">Longitude</label>
                    <input type="number" 
                           id="homeLongitude" 
                           name="homeLongitude" 
                           step="any" 
                           min="-180" 
                           max="180"
                           th:value="${homeLongitude}"
                           th:placeholder="#{users.home.longitude.placeholder}"
                           onchange="updateMapMarker()">
                </div>
                <button type="button" 
                        class="btn"
                        onclick="clearHomeLocation()"
                        th:text="#{users.home.location.clear}">Clear</button>
            </div>
            
            <div id="homeLocationMap" class="home-location-map"></div>
        </div>
        <div class="separator"></div>
        <div style="display: flex; gap: 10px;">
            <button type="submit" class="btn" th:text="${userId != null ? #messages.msg('form.update') : #messages.msg('form.create')}">Create User</button>
            <button type="button" class="btn"
                    hx-get="/settings/users-content"
                    hx-target="#user-management"
                    hx-swap="innerHTML"
                    th:text="#{form.cancel}">Cancel</button>
        </div>
    </form>
</div>
</body>
</html>
