<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Allowance Planner 2000</title>
    <style>
        tr:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<h1>Allowance Planner 2000</h1>

<div th:if="${error != null}">
    <h2>Error</h2>
    <p th:text="${error}"></p>
</div>

<div th:if="${error == null}">
    <h2>Users</h2>
    <span th:each="user : ${users}">
        <strong th:if="${currentUser != null and currentUser == user.id()}" th:text="${user.name()}"></strong>
        <a th:href="@{/login(user=${user.id()})}"
           th:text="${user.name()}" th:unless="${currentUser != null and currentUser == user.id()}"></a>
    </span>

    <div th:if="${currentUser != null and currentUser > 0}">
        <h2>Allowances</h2>
        <form action="/createAllowance" method="post">
            <table border="1">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Progress</th>
                    <th>Target</th>
                    <th>Weight</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><label><input name="name" placeholder="Name" type="text"/></label></td>
                    <td></td>
                    <td><label><input name="target" placeholder="Target" type="number"/></label></td>
                    <td><label><input name="weight" placeholder="Weight" type="number"/></label></td>
                    <td><input type="submit" value="Create"/></td>
                </tr>
                <tr th:each="allowance : ${allowances}">
                    <td th:if="${allowance.id() == 0}">Total</td>
                    <td th:if="${allowance.id() != 0}" th:text="${allowance.name()}"></td>
                    <td th:if="${allowance.id() == 0}" th:text="${allowance.progress()}"></td>
                    <td th:if="${allowance.id() != 0}">
                        <progress th:max="${allowance.target()}" th:value="${allowance.progress()}"></progress>
                        (<span th:text="${allowance.progress()}"></span>)
                    </td>
                    <td th:if="${allowance.id() == 0}"></td>
                    <td th:if="${allowance.id() != 0}" th:text="${allowance.target()}"></td>
                    <td th:text="${allowance.weight()}"></td>
                    <td th:if="${allowance.id() != 0 and allowance.progress() >= allowance.target()}">
                        <a th:href="@{/completeAllowance(allowance=${allowance.id()})}">Mark as completed</a>
                    </td>
                    <td th:if="${allowance.id() == 0 or allowance.progress() < allowance.target()}"></td>
                </tr>
                </tbody>
            </table>
        </form>

        <h2>Tasks</h2>
        <form action="/createTask" method="post">
            <table border="1">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Assigned</th>
                    <th>Reward</th>
                    <th>Schedule</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="task : ${tasks}">
                    <td th:text="${task.name()}"></td>
                    <td>
                        <span th:if="${task.assigned() == null}">None</span>
                        <span th:if="${task.assigned() != null}" th:text="${task.assigned()}"></span>
                    </td>
                    <td th:text="${task.reward()}"></td>
                    <td th:text="${task.schedule()}"></td>
                    <td>
                        <a th:href="@{/completeTask(task=${task.id()})}">Mark as completed</a>
                    </td>
                </tr>
                <tr>
                    <td><label><input name="name" placeholder="Name" type="text"/></label></td>
                    <td></td>
                    <td><label><input name="reward" placeholder="Reward" type="number"/></label></td>
                    <td><label><input name="schedule" placeholder="Schedule" type="text"/></label></td>
                    <td><input type="submit" value="Create"/></td>
                </tr>
                </tbody>
            </table>
        </form>

        <h2>History</h2>
        <table border="1">
            <thead>
            <tr>
                <th>Timestamp</th>
                <th>Allowance</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${history}">
                <td th:text="${item.timestamp()}"></td>
                <td th:text="${item.allowance()}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
