finance-panel.html

<div class="finance-panel">
    <finance-summary data="finance"></finance-summary>
    <div class="inputfield">
        <label class="input-title">Expense Title</label>
        <autocomplete choices="finance._.peoples" enteredtext="finance.list[0].title"
            minlength="1" result="finance.list[0].expenseobj" type="'WHOM'"></autocomplete>
    </div>
    <div class="inputfield">
        <label class="input-title">Amount</label>
        <input class="input-value" type="number" ng-model="finance.list[0].amount">
    </div>
    <div class="inputfield" on-action="'[CLICK, KEYUP], [splitbtw, splitby], [true, true]'"
        scope-obj="finance._.isVisible">
        <label class="input-title">Paid By</label>
        <tags-autocomplete choices="finance._.attendees" enteredtext="finance.list[0].paidby.text"
            minlength="1" placeholder="" result="finance.list[0].paidby.whomobj" type="'WHOM'"
            tags="finance.list[0].paidby.taglist"></tags-autocomplete>
    </div>
    <div class="inputfield" ng-show="finance._.isVisible.splitbtw === true">
        <label class="input-title">Split Between</label>
        <tags-autocomplete choices="finance._.attendees" enteredtext="finance.list[0].splitbtw.text"
            minlength="1" placeholder="Me" result="finance.list[0].splitbtw.whomobj" type="'WHOM'"
            tags="finance.list[0].splitbtw.taglist"></tags-autocomplete>
    </div>
    <div class="inputfield" ng-show="finance._.isVisible.splitby === true">
        <label class="input-title">Split By</label>
        <div class="payment-type">
            <button class="choice btn btn-choice" chooseone="choosetime"
                ng-click="finance.list[0].splitbytype = 'EQLY'" ng-hide="finance.list[0].paidby.taglist.length > 1">Equally</button>
            <!-- <button class="choice btn btn-choice" chooseone="choosetime"
                ng-click="finance.list[0].splitbytype = 'PRTS'" ng-hide="finance.list[0].paidby.taglist.length > 1">Part</button>
            <button class="choice btn btn-choice" chooseone="choosetime"
                ng-click="finance.list[0].splitbytype = 'PRCT'" ng-hide="finance.list[0].paidby.taglist.length > 1">Percent</button> -->
            <button class="choice btn btn-choice" chooseone="choosetime"
                ng-click="finance.list[0].splitbytype = 'PMNT'" ng-show="finance.list[0].paidby.taglist.length > 1">Payment</button>
        </div>
    </div>
    <div class="sub-panel" ng-hide="finance.list[0].splitbytype === undefined">
        <div class="more-details">
            <div class="members paid-by-one" ng-if="finance.list[0].splitbytype !== 'PMNT'">
                <div class="member" ng-repeat="person in finance.list[0].splitbtw.taglist">
                    <finance-member-info details="{'name': person.text, 'amount': finance.list[0].amount}" paidby="finance.list[0].paidby.taglist"
                        size="finance.list[0].splitbtw.taglist.length" type="finance.list[0].splitbytype"></finance-member-info>
                </div>
            </div>
            <div class="members paid-by-many" ng-if="finance.list[0].splitbytype === 'PMNT'">
                <div class="member" ng-repeat="person in finance.list[0].paidby.taglist">
                    <finance-member-info details="{'name': person.text, 'amount': finance.list[0].amount}" paidby="finance.list[0].paidby.taglist"
                        index="$index" size="finance.list[0].splitbtw.taglist.length" type="finance.list[0].splitbytype"></finance-member-info>
                </div>
                <div class="remaining" ng-show="finance.list[0].amount > 0">
                    <span>REMAINING</span>
                    <span ng-class="{'text-danger': remainingAmount < 0}"
                        ng-bind="remainingAmount = (finance.list[0].amount - (finance.list[0].paidby.taglist | arraysum: {name: 'amount'}) )">
                        {{ remainingAmount }}
                    </span>
                    <span>of {{ finance.list[0].amount }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="inputfield">
		<button class="btn btn-default full-width add-another" ng-click="addNewItem()">ADD NEW</button>
	</div>
</div>