<div id="app">
  <h2>Mortgage Calculator</h2>
  <div class="form">
    <div class="form-group">
      <label>Home Value: </label>
      <custominput v-model="homeValue" :step="1000"/>
    </div>
    <div class="form-group">
      <label>Down Payment: </label>
      <custominput v-model="downpayment" :step="1000"/>
    </div>
    <div class="form-group">
      <label>Amortization Period: </label>
      <custominput v-model="amortization" :step="1" type="years"/>
    </div>
    <div class="form-group">
      <label>Interest Rate: </label>
      <custominput v-model="interestRate" :step="0.001" type="percent" decimals="3"/>
    </div>
    <div class="form-group">
      <label>Payment Frequency: </label>
      <select class="form-control" v-model="paymentSelection">
        <option v-for="payment, key in paymentPeriod" :value="key">{{key}}</option>
      </select>
    </div>

    <div class="form-group">
      <label>Total cost of loan:</label>
      <span class="">{{formatAsCurrency(totalCostOfMortgage)}}</span>
    </div>

    <div class="form-group">
      <label>Total Interest Paid:</label>
      <span class="">{{formatAsCurrency(interestPayed)}}</span>
    </div>

    <div class="form-group">
      <label>{{paymentSelection}} Payment:</label>
      <span class="out">{{formatAsCurrency(payment, 2)}}</span>
    </div>

    <h3>Amortization Schedule</h3>
    <svg viewBox="0 0 560 300">

      <g class="xaxis">
        <line x1="0" y1="1" x2="500" y2="1"/>
        <g v-for="index in amortization">
          <line y1="0" :y2="index % 5 === 0 ? 10 : 5" v-bind="{ 'x1':index*500/(amortization), 'x2':index*500/(amortization) }"/>
          <text v-if="index % (amortization < 55 ? 5 : 10) === 0" v-bind="{ 'x':(index-0.4)*500/(amortization), 'y':30 }">{{ index }}</text>
        </g>
      </g>

      <g class="graph">
        <rect v-for="p in amortizationGraphBars(500,250)" v-bind="p" @mouseMove="setHover(p, $event)" @mouseOut="graphSelection.visible = false"></rect>
      </g>

    </svg>
    <div class="note">* amount of principal remaining at the end of a year</div>
  </div>

  <div class="hover" v-if="graphSelection !== null" v-show="graphSelection.visible === true" :style="graphSelection.style">
    Year: {{ graphSelection.year }}<br/>
    Principal: {{ graphSelection.principal }} <br/>
    Remaining: {{ graphSelection.principalPercent }} <br/>
  </div>

</div>

<template id="custominput">
  <input type="text" class="form-control" @keydown.up.prevent="increment" @keydown.down.prevent="decrement" :value="active?val:formatted" @blur="update" @keyup.enter.stop="update" @focus="active = true">
</template>