package web

templ transactions_page(userID int) {
    <title>Transactions</title>
    <div class="d-flex-col mx-4 h-100">
        <div class="c-crust row cr-all p-5" style="height: fit-content">
            <button 
            class="borderless-btn dropdown-button"
            aria-describedby="filter-popup"
            data-dropdown-target="filter-popup"
            data-dropdown-direction="bottom-start"
            data-dropdown-motion="expand-down"
            >
                <i class="" data-feather="filter"></i>
                <span class="ms-3 my-auto">Add Filter</span>
            </button>
            <div class="popup-menu" id="filter-popup" role="tooltip" style="display: none; max-height: 0px;">
                <p>Hey there</p>
            </div>

            <button class="ms-5 borderless-btn">
                <span class="my-auto mx-3">No Filters</span>
            </button>
        </div>

        <div class="row mt-5">
            <table class="card-table table table-striped cr-all">
                <colgroup>
                    <col style="width: 2%"></col>
                    <col style="width: 15%"></col>
                    <col style="width: 30%"></col>
                    <col style="width: 15%"></col>
                    <col style="width: 3%"></col>
                    <col style="width: 1%"></col>
                </colgroup>
                <thead>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <div class="d-flex">
                                <span class="my-auto me-0">
                                ID
                                </span>
                            <i class="my-auto ms-0 me-auto" data-feather="chevron-up"></i>
                            </div>
                        </td>
                        <td>Account</td>
                        <td>Date</td>
                        <td></td>
                        <td class="t-e" style="width:auto">Amount</td>
                    </tr>
                </thead>
                <tbody 
                hx-trigger="load delay:0.25s"
                hx-get="/web/transaction_table_rows"
                hx-params=""
                >
                </tbody>
            </table>
        </div>
    </div>
}