package templates

import "nickiel.net/recount_server/types"
import "strconv"


templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account, buckets *[]types.Bucket) {
    <template id="breakdown-template-row">
        <tr>
            <td></td>
            <td class="my-2">
                <select class="ms-2 select border" id="acnt-entry-selection">
                    for _, value := range *buckets {
                    <option value={strconv.Itoa(value.Id)}>{value.DisplayCode.String} | {value.DisplayName.String}</option>
                    }
                </select>
            </td>
            <td><input type="text" /></td>
            <td><input type="number" step="any" /></td>
        </tr>
    </template>
    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col" data-rcnt-taxrate="0.095">
        <form method="POST" id="new-transaction-form">
            <div class="my-2 d-flex">
                <h2 class="ms-5">New Transaction</h2>     
                <button class="ms-auto me-4 my-auto exit-btn" id="close-transaction-pane">
                    <i class="my-auto" data-feather="x"></i>
                </button>
            </div>
            <div class="d-flex">
                <div class="d-flex ms-5" style="overflow-x: scroll; width: 90%;">
                    for _, value := range *entry_types {
                        <button class="borderless-btn btn-sm mx-3">
                        {value.DisplayName}
                        </button>
                    }
                </div>
                <div class="d-flex" style="width:10%">
                    <button type="submit" class="btn-sm my-auto ms-auto me-4 d-flex invert c-green">
                        <i class="my-2" data-feather="save"></i>
                        <span class="my-auto ms-2">Save</span>
                    </button>
                </div>
            </div>
            <div class="c-mantle cr-all m-5 container" style="height: 85%;">
                <div class="row mt-5">
                    <div class="p-5 mx-auto">
                        <label for="acnt-entry-selection" id="acnt-entry-label">
                            Account:
                        </label>
                        <select class="ms-2 select border" id="acnt-entry-selection">
                            for _, value := range *acnts {
                            <option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
                            }
                        </select>
                    </div>
                    <div class="p-5 mx-auto" style="height: fit-content;">
                        <label>
                            Date:
                            <input class="input" id="date-entry" type="date" />
                        </label>
                    </div>
                    <div class="p-5 mx-auto" style="height: fit-content;">
                        <label>
                            Amount:
                            <input class="input" id="amount-entry" type="number" step="any" />
                        </label>
                    </div>

                    <div class="d-flex p-5 mx-auto">
                        <span class="my-auto">Tag: </span>
                        <label class="input-sizer">
                            <input 
                                size="4"
                                class="input"
                                id="trans-tab-entry"
                                type="text"
                            />
                            <span class="d-flex"> <i class="my-auto" style="transform: scale(-1,1);" data-feather="tag"></i> </span>
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="ms-5 d-flex">
                        <h2 class="my-3">Breakdown</h2>
                        <button type="button" class="btn-sm ms-5 my-auto c-green invert" id="new-breakdown-btn">
                            <i class="" data-feather="plus"></i>
                            <span class="my-auto pe-2">New</span>
                        </button>
                        <button type="button" class="btn-sm ms-5 my-auto c-green invert" id="tax-breakdown-btn">
                            <i class="" data-feather="plus"></i>
                            <span class="my-auto pe-2">Tax</span>
                        </button>
                    </div>
                </div>
                <div class="row" style="flex-grow: 1">
                    <table class="table table-striped cr-all" style="width: 100%; border: solid 1px black;">
                        <thead>
                            <tr>
                                <td></td>
                                <td class="py-2">Bucket</td>
                                <td>Description</td>
                                <td>Amount</td>
                            </tr>
                        </thead>
                        <tbody id="breakdown-tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
    
}