package web

templ transactions_page(userID int, accounts *[]string) {
    <title>Transactions</title>
    <div class="d-flex-col mx-4 h-100" data-main-body="true">
        <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;">
                <div class="d-flex p-3">
                    <select class="select-swapout">
                        <option data-select-div="filter-accounts">Account</option>
                        <option data-select-div="filter-two-inputs">Amount</option>
                        <option data-select-div="filter-two-inputs">Date</option>
                        <option data-select-div="filter-contains">Desc. Contains</option>
                        <option data-select-div="filter-two-inputs">ID</option>
                    </select>
                    <div id="filter-two-inputs" class="d-flex" style="display: none;">
                        <input type="text"></input>
                        <select class="ms-2">
                            <option>></option>
                            <option>=</option>
                            <option>{"<"}</option>
                        </select>
                        <input class="ms-2" type="text"></input>
                    </div>
                    <div id="filter-contains" class="d-flex" style="display: none;">
                        <select class="ms-2">
                            <option>Contains</option>
                        </select>
                        <input class="ms-2" type="text"></input>
                    </div>
                    <div id="filter-accounts" class="d-flex">
                        <select class="ms-2">
                            <option>=</option>
                        </select>
                        <select class="ms-2">
                        for _, value := range *accounts {
                            <option>{value}</option>
                        }
                        </select>
                    </div>
                    <button 
                        class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
                    >Add
                    </button>
                </div>

            </div>

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

            <button
                class="borderless-btn ms-auto me-3 c-green ch-teal"
                style="color: var(--pf-bg);"
            >
                <i class="" data-feather="plus"></i>
                Add New
            </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>
}