<form method="post" autocomplete="off" class="form-horizontal">
    <div class="control-group">
        <label for="txtDate" class="control-label">Date</label>

        <div class="controls">
            <datepicker id="txtDate" model="voucher.Date" ng-model="voucher.Date"></datepicker>
        </div>
    </div>
    <div class="control-group" ng-repeat="journal in voucher.Journals | journalDebit:-1">
        <label for="ddlLedger" class="control-label">From</label>

        <div class="controls">
            <select id="ddlLedger" class="select-box" ng-model="journal.Ledger.LedgerID"
                    ng-options="l.LedgerID as l.Name for l in ledgers"> </select>

            <div class=" input-prepend">
                <span class="add-on">₹</span><input type="text" id="txtLedgerAmount" class="span2" autocomplete="off"
                                                    placeholder="Amount" ng-model="journal.Amount"/>
            </div>
        </div>
    </div>
    <div class=" control-group" id="add">
        <label for="txtLedger" class="control-label">Account</label>

        <div class="controls">
            <input type="text" ng-autocomplete id="txtLedger" resource="Account" label="Name" model="ledger" value="{{ledger.Name}}"/>
            <div class=" input-prepend">
                <span class="add-on">₹</span>
                <input type="text" id="txtAmount" class="span2" autocomplete="off"
                       placeholder="Amount" ng-model="amount"/>
            </div>
            <button class="btn btn-info" ng-click="addJournal()">Add <i class="icon-plus-sign icon-white"></i></button>
        </div>
    </div>

    <div class="control-group">
        <label for="gvGrid" class="control-label"></label>

        <div class="controls">
            <table id="gvGrid" class="table table-condensed table-bordered table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Amount</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody id="tbodyMain">
                <tr ng-repeat="journal in voucher.Journals | journalDebit:1">
                    <td>{{journal.Ledger.Name}}</td>
                    <td>{{journal.Amount}}</td>
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-danger" ng-click="removeJournal(journal)"><i
                                    class="icon-trash icon-white"></i> Delete</a>
                            <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a ng-confirm url="/partial/payment-modal.html" before="toggleEdit(journal)"
                                       on-action="toggleEdit(journal, true)" on-cancel="toggleEdit(journal, false)"><i
                                        class="icon-pencil"></i> Edit</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot id="tfootMain">
                </tfoot>
            </table>
        </div>
    </div>
    <div class="control-group">
        <label for="txtNarration" class="control-label">Narration</label>

        <div class="controls">
            <textarea rows="3" id="txtNarration" class="input-block-level" ng-model="voucher.Narration"></textarea>
        </div>
    </div>
    <div class="form-actions">
        <button class="btn btn-primary" ng-click="save()"
                ng-disabled="preventAlteration(voucher)">{{voucher.VoucherID | save_button}}
        </button>
        <button class="btn btn-inverse" ng-click="post()" ng-hide="!voucher.VoucherID"
                ng-disabled="voucher.Posted || !perms['Post Vouchers']">{{voucher.Posted | posted}}
        </button>
        <button class="btn btn-danger" ng-hide="!voucher.VoucherID" ng-disabled="preventAlteration(voucher)"
                ng-confirm title="Delete Voucher" action-text="Are you sure? This cannot be undone."
                action-button-text="Delete" action-function="delete()"> Delete
        </button>
    </div>
    <div class="row-fluid">
        Created on {{voucher.CreationDate | localTime}} and Last Edited on {{voucher.LastEditDate | localTime}} by
        {{voucher.User.Name}}. Posted by {{voucher.Poster}}
    </div>
</form>
