{{template "base" .}}

{{define "title"}}{{.Account.Name}}{{end}}

{{define "new"}}
    {{template "transaction-new" .}}
{{end}}

{{define "main"}}
<div class="budget-item">
    <a href="#newtransactionmodal" data-bs-toggle="modal" data-bs-target="#newtransactionmodal">New Transaction</a>
    <span class="time"></span>
</div>
<div>
    <script>        
        $(document).ready(function () {
            $('#errorcreatingtransaction').hide();
            $('#newtransactionform').ajaxForm({
                error: function() {
                    $('#errorcreatingtransaction').show();
                }
            }); 
        }); 
    </script>
    <div class="modal-header">
        <h5 class="modal-title">Edit Transaction</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <form id="newtransactionform" action="/api/v1/transaction/{{.Transaction.ID}}" method="POST">
        <div class="modal-body">
            <input type="hidden" name="account_id" value="{{.Account.ID}}" />
            <div class="form-group">
                <label for="category_id">Category</label>
                <select name="category_id" class="form-control">
                    <option value="" {{if not $.Transaction.CategoryID.Valid}}selected{{end}}>-- none --</option>
                    {{range .Categories}}
                        <option 
                                value="{{.ID}}" 
                                {{if and $.Transaction.CategoryID.Valid (eq .ID $.Transaction.CategoryID.UUID)}}selected{{end}}
                                >{{.Group}} : {{.Name}}</option>
                    {{end}}
                </select>
            </div>
            <div class="form-group">
                <label for="date">Date</label>
                <input type="date" name="date" class="form-control" value="{{.Transaction.Date.Format "2006-01-02"}}" />
            </div>
            <div class="form-group">
                <label for="memo">Memo</label>
                <input type="text" name="memo" class="form-control" value="{{.Transaction.Memo}}" />
            </div>
            <div class="form-group">
                <label for="amount">Amount</label>
                <input type="number" name="amount" class="form-control" placeholder="0.00" value="{{printf "%.2f" .Transaction.Amount.GetFloat64}}" />
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <input type="submit" class="btn btn-primary" name="create" value="Create" class="form-control" />
            <input type="submit" class="btn btn-danger" name="delete" value="Delete" class="form-control" />
        </div>
    </form>
</div>
{{end}}