Recount-Server/web/templates/new_transaction_pane.templ

package templates

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


templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account) {
    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col">
        <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 ms-5" style="overflow-x: scroll;">
            for _, value := range *entry_types {
                <button class="borderless-btn btn-sm mx-3">
                    {value.DisplayName}
                </button>
            }
        </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>
            <div class="row">
                <div class="p-5 mx-auto">
                    <label class="input-sizer">
                        <span>Tag: </span>
                        <input 
                            size="4"
                            class="input"
                            id="trans-tab-entry"
                            type="text"
                        />
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="ms-5 d-flex">
                    <h2 class="my-3">Breakdown</h2>
                    <button class="btn-sm ms-5 my-auto c-green invert">
                        <i class="" data-feather="plus"></i>
                        <span class="my-auto pe-2">New</span>
                    </button>
                    <button class="btn-sm ms-5 my-auto c-green invert">
                        <i class="" data-feather="plus"></i>
                        <span class="my-auto pe-2">Tax</span>
                    </button>
                </div>
            </div>
            <div class="row" style="flex-grow: 1">

            </div>
        </div>
    </div>
    
}