{{define "comparison"}}
<section id="comparison">
<table>
<thead><tr>
<th></th>{{range $l := .Estimate.Loans}}<th>{{$l.Name}}</th>{{end}}
</tr></thead>

<tbody>
<tr><td>Type</td>
{{range .Estimate.Loans}}<td>{{.Type.Name}}</td>{{end}}</tr>
<tr><td>Term</td>
{{range .Estimate.Loans}}<td>{{.Term}} Years</td>{{end}}</tr>
<tr><td>Amortization</td>
{{range .Estimate.Loans}}<td>Fixed</td>{{end}}</tr>
<tr><td>Interest rate</td>
{{range .Estimate.Loans}}<td>{{.Interest}}%</td>{{end}}</tr>
<tr><td>Loan payment</td>
  {{range .Estimate.Loans}}<td>${{dollars .Result.LoanPayment}}/month</td>{{end}}</tr>
<tr><td>Monthly MI</td>
  {{range .Estimate.Loans}}<td>${{dollars .Mi.Premium}}/month</td>{{end}}</tr>
<tr><td>Real estate taxes</td>
  {{range .Estimate.Loans}}<td>${{dollars .Tax}}/month</td>{{end}}</tr>
<tr><td>Hazard insurance</td>
  {{range .Estimate.Loans}}<td>${{dollars .Hazard}}/month</td>{{end}}</tr>
<tr class="total"><td>Total monthly</td>
{{range .Estimate.Loans}}<td>${{dollars .Result.TotalMonthly}}</td>{{end}}</tr>
<tr class="gap"></tr>
<tr><td>Purchase price</td>
{{range .Estimate.Loans}}<td>${{dollars $.Estimate.Price}}</td>{{end}}</tr>
<tr><td>Loan amount</td>
{{range .Estimate.Loans}}<td>${{dollars .Amount}}</td>{{end}}</tr>
<tr><td>Down payment</td>
{{range .Estimate.Loans}}<td>${{diff .Amount $.Estimate.Price }}</td>{{end}}</tr>
<tr><td>Closing costs</td>
{{range .Estimate.Loans}}<td>${{dollars .Result.TotalFees}}</td>{{end}}</tr>
<tr><td>MI Premium</td>
  {{range .Estimate.Loans}}<td>${{dollars .Mi.Upfront}}</td>{{end}}</tr>
<tr><td>Credits</td>
  {{range .Estimate.Loans}}<td>${{dollars .Result.TotalCredits}}</td>{{end}}</tr>
<tr class="total"><td>Cash to close</td>
  {{range .Estimate.Loans}}<td>${{dollars .Result.CashToClose}}</td>{{end}}</tr>
</tbody>
</table>
</section>

<style scoped>
table {
  width: 100%;
  margin-top: 20px;
}

tr.gap {
  height: 20px;
}

tr.total {
  text-decoration: underline;
  font-weight: bold;
}

table td:first-child {
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background: #F5F5F3;
}

table td {
  padding: 4px;
}
</style>
{{end}}