package templates

templ Dashboard() {
    <title>Dashboard</title>
    <div class="container" data-main-body="true"> 
        <div class="row" style="margin-top: -20px">
            <div class="c-crust col card mx-auto cr-all d-flex-col">
                <div class="c-surface0 d-flex w-100 cr-top">
                    <i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
                    <span class="mx-auto my-auto tc-text">Income/Expenses</span>
                    <i class="my-auto tc-text py-3 pe-3 me-1" data-feather="arrow-right"></i>
                </div>
                <div class="d-flex" style="height: 88%">
                    <div class="w-50">
                        <canvas 
                        class="chartjs-chart"  
                        data-chart-endpoint="/components/data/expenditure_chart"
                        data-chart-type="historical_vs_current"
                        id="IncomeVsExpenditureChart"
                        ></canvas>
                    </div>
                    <div class="w-50 c-surface1" style="overflow-y: scroll">
                        <div class="m-4 my-5"
                        hx-trigger="load delay:0.25s"
                        hx-get="/components/account_summaries"
                        >
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="c-crust col card mx-auto cr-all">
                <div class="c-surface0 d-flex w-100 cr-top">
                    <i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
                    <i class="my-auto tc-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
                </div>
            </div>
        </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="/components/data/transaction_table_rows"
                hx-params=""
                >
                </tbody>
            </table>
        </div>
    </div>
}