<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>FinanceTracker | Transactions</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


</head>

<style>
    /* Fixed table layout and numeric alignment */
    #dataTable {
        table-layout: fixed;
        width: 100%;
    }

    .numeric {
        white-space: nowrap;
        text-align: right;
    }

    /* Truncate description with ellipsis */
    .description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Row color coding */
    .txn-positive td {
        background-color: rgba(0, 255, 0, 0.15);
    }

    .txn-negative td {
        background-color: rgba(255, 0, 0, 0.15);
    }

    body {
        background-color: #f8f9fc;
    }

    .card {
        border: none;
        border-radius: 0.75rem;
    }

    .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .material-icons {
        vertical-align: middle;
        font-size: 20px;
    }

    .scroll-to-top {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        width: 40px;
        height: 40px;
        background-color: #0d6efd;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
</style>

<body id="page-top">
    <div id="wrapper">
        <div th:replace="~{fragments/sidebar-nav :: sidebar-nav}"></div>

        <div class="d-flex flex-column" id="content-wrapper">
            <div id="content">
                <div th:replace="~{fragments/topbar :: topbar}"></div>

                <div class="container-fluid">
                    <div class="card shadow">
                        <div class="row align-items-center card-header py-3">
                            <div class="col-md-4">
                                <p class="text-primary m-0 fw-bold">Transactions</p>
                            </div>
                            <div class="col-md-4 text-md-center">
                                <input hx-get="/searchTransactions" hx-trigger="input changed delay:500ms"
                                    hx-target="#table-container" hx-include="#itemSize" name="searchValue"
                                    id="searchValue" type="search" class="form-control form-control-sm"
                                    placeholder="Search...">
                            </div>
                            <div class="col-md-4 text-md-end">
                                <a th:href="@{/addTransaction}" class="btn btn-primary btn-sm">Add Transaction</a>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Show
                                    <select id="itemSize" name="pageSize" hx-get="/transactions-fragment"
                                        hx-trigger="change" hx-target="#table-container" hx-include="#searchValue"
                                        class="d-inline-block form-select form-select-sm" style="width: auto;">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>
                            </div>

                            <div id="table-container" th:fragment="transactionList">
                                <div class="table-responsive" style="overflow-x: auto;">
                                    <table class="table my-0" id="dataTable">
                                        <thead>
                                            <tr>
                                                <th class="numeric">Money In</th>
                                                <th class="numeric">Money Out</th>
                                                <th class="numeric">Balance</th>
                                                <th>Date</th>
                                                <th>Category</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            <tr th:each="transaction : ${transactions}"
                                                th:with="rowClass=${(transaction.moneyIn + transaction.moneyOut + transaction.fee) < 0 ? 'txn-negative' : 'txn-positive'}"
                                                th:class="${rowClass}">
                                                <td class="numeric"
                                                    th:text="${#numbers.formatCurrency(transaction.moneyIn)}"></td>
                                                <td class="numeric"
                                                    th:text="${#numbers.formatCurrency(transaction.moneyOut)}"></td>
                                                <td class="numeric"
                                                    th:text="${#numbers.formatCurrency(transaction.fee)}">
                                                </td>
                                                <td class="numeric"
                                                    th:text="${#numbers.formatCurrency(transaction.balance)}"></td>
                                                <td th:text="${transaction.date}"></td>
                                                <td th:text="${transaction.category}"></td>
                                                <td class="description" th:text="${transaction.description}"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <nav class="mt-3">
                                    <ul class="pagination">
                                        <li class="page-item" th:classappend="${pageNum == 0} ? 'disabled'">
                                            <button class="page-link" hx-get="/transactions-fragment"
                                                th:hx-vals="${'{&quot;pageNum&quot;:' + (pageNum - 1) + '}'}"
                                                hx-include="#searchValue, #itemSize" hx-target="#table-container">«
                                                Previous</button>
                                        </li>
                                        <li class="page-item disabled">
                                            <span class="page-link">Page [[${pageNum + 1}]] of [[${totalPages}]]</span>
                                        </li>
                                        <li class="page-item"
                                            th:classappend="${pageNum + 1 >= totalPages} ? 'disabled'">
                                            <button class="page-link" hx-get="/transactions-fragment"
                                                th:hx-vals="${'{&quot;pageNum&quot;:' + (pageNum + 1) + '}'}"
                                                hx-include="#searchValue, #itemSize" hx-target="#table-container">Next
                                                »</button>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/bs-init.js"></script>
    <script src="assets/js/theme.js"></script>
</body>

</html>