<!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="#{settings.title}">Settings - Reitti</title>
    <link rel="icon" th:href="@{/img/logo.svg}">
    <link rel="apple-touch-icon" th:href="@{/img/logo.svg}">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/logo.svg}">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/lineicons.css">
    <script src="/js/htmx.min.js"></script>
    <script src="/js/util.js"></script>
</head>
<body class="settings-page">
<div class="settings-container">
    <div th:replace="~{fragments/settings-navigation :: settings-nav(${activeSection}, ${dataManagementEnabled}, ${isAdmin})}"></div>
    <div class="settings-content-area">
        <div id="transportation-modes" class="settings-section active">
            <div th:fragment="transportation-modes-content">
                <h2 th:text="#{transportation.modes.title}">Transportation Modes</h2>

                <div th:if="${successMessage}" class="alert alert-success" style="display: block;">
                    <span th:text="#{${successMessage}}">Success message</span>
                </div>
                <div th:if="${errorMessage}" class="alert alert-danger" style="display: block;">
                    <span th:text="#{${errorMessage}}">Error message</span>
                </div>

                <div class="settings-card" th:if="${!configs.isEmpty()}">
                    <table>
                        <thead>
                        <tr>
                            <th th:text="#{transportation.modes.table.mode}">Mode</th>
                            <th th:text="#{${isImperial ? 'transportation.modes.table.max.mph' : 'transportation.modes.table.max.kmh'}}">Max Speed</th>
                            <th th:text="#{transportation.modes.table.actions}">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="config : ${configs}">
                            <td th:text="#{${'transportation.mode.' + config.mode().name().toLowerCase()}}"></td>
                            <td>
                                <form th:attr="hx-post=@{/settings/transportation-modes/{mode}/update(mode=${config.mode()})}"
                                      hx-target="body"
                                      hx-swap="outerHTML"
                                      hx-trigger="change delay:500ms"
                                      style="display: inline;">
                                    <input type="hidden" name="unitSystem" th:value="${unitSystem.name()}">
                                    <input type="number" 
                                           name="maxSpeed" 
                                           th:value="${isImperial and config.maxKmh() != null ? #numbers.formatDecimal(config.maxKmh() / 1.60934, 1, 1) : config.maxKmh()}"
                                           step="0.1"
                                           min="0"
                                           th:placeholder="#{transportation.modes.max.placeholder}">
                                </form>
                            </td>
                            <td>
                                <button class="btn btn-danger"
                                        th:attr="hx-post=@{/settings/transportation-modes/{mode}/delete(mode=${config.mode()})}, hx-confirm=#{transportation.modes.delete.confirm}"
                                        hx-target="body"
                                        hx-swap="outerHTML"
                                        th:text="#{form.delete}">Delete
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="settings-card" th:if="${!availableModes.isEmpty()}">
                    <h3 th:text="#{transportation.modes.add.title}">Add Transportation Mode</h3>
                    <form hx-post="/settings/transportation-modes/add" 
                          hx-target="body"
                          hx-swap="outerHTML"
                          class="token-form"
                          style="margin-bottom: 20px;">
                        <div class="form-group">
                            <label for="mode" th:text="#{transportation.modes.mode.label}">Transportation Mode</label>
                            <select id="mode" name="mode" required>
                                <option value="" th:text="#{transportation.modes.mode.select}">Select a mode...</option>
                                <option th:each="mode : ${availableModes}" 
                                        th:value="${mode}" 
                                        th:text="#{${'transportation.mode.' + mode + '.name'}}"></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="maxSpeed" th:text="#{${isImperial ? 'transportation.modes.max.mph.label' : 'transportation.modes.max.kmh.label'}}">Max Speed</label>
                            <input type="hidden" name="unitSystem" th:value="${unitSystem.name()}">
                            <input type="number" 
                                   id="maxSpeed" 
                                   name="maxSpeed" 
                                   step="0.1" 
                                   min="0"
                                   th:placeholder="#{${isImperial ? 'transportation.modes.max.mph.placeholder' : 'transportation.modes.max.kmh.placeholder'}}">
                            <small th:text="#{${isImperial ? 'transportation.modes.max.mph.help' : 'transportation.modes.max.kmh.help'}}">Leave empty for no speed limit</small>
                        </div>
                        <button type="submit" class="btn" th:text="#{transportation.modes.add.button}">Add Mode</button>
                    </form>
                </div>

                <div class="settings-card" th:if="${availableModes.isEmpty() && !configs.isEmpty()}">
                    <p th:text="#{transportation.modes.all.configured}">All available transportation modes have been configured.</p>
                </div>

                <div class="settings-card" th:if="${!configs.isEmpty()}">
                    <h3 th:text="#{transportation.modes.reclassify.title}">Reclassify Trips</h3>
                    <p th:text="#{transportation.modes.reclassify.description}">After changing your transportation mode settings, you can reclassify all existing trips to apply the new configurations.</p>
                    
                    <button id="reclassify-btn" 
                            class="btn btn-primary"
                            hx-post="/settings/transportation-modes/reclassify"
                            hx-target="#reclassify-status"
                            hx-swap="innerHTML"
                            hx-indicator="#reclassify-spinner"
                            th:text="#{transportation.modes.reclassify.button}">Reclassify All Trips</button>
                    
                    <div id="reclassify-spinner" class="htmx-indicator" style="margin-left: 10px;">
                        <i class="lni lni-spinner-arrow spinning"></i>
                        <span th:text="#{transportation.modes.reclassify.processing}">Processing...</span>
                    </div>
                    
                    <div id="reclassify-status" style="margin-top: 10px;"></div>
                </div>

            </div>
        </div>
    </div>
</div>
<div th:fragment="reclassify-status">
    <div th:if="${reclassifyStatus == 'started'}" class="alert alert-info">
        <i class="lni lni-checkmark-circle"></i>
        <span th:text="#{${message}}">Reclassification started successfully. This process will run in the background.</span>
    </div>
    <div th:if="${reclassifyStatus == 'error'}" class="alert alert-danger">
        <i class="lni lni-cross-circle"></i>
        <span th:text="#{${message}}">Failed to start reclassification. Please try again.</span>
    </div>
</div>

</body>
<script th:inline="javascript">
    window.userSettings = /*[[${userSettings}]]*/ {}
</script>
</html>
