Immanuel
/
skouter


			
				
					
						
						
							
							<!DOCTYPE html>
<head>
	<meta charset='utf-8'>
    <meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body id="pdf-doc">

<div class="disclaimer">
<p>Actual costs may vary from estimates after approval.
Get an official quote before choosing a loan.</p>
</div>
{{template "header" .}}
{{template "comparison" .}}

{{range .Estimate.Loans}}
<div class="break"></div>
<div class="disclaimer">
<p>Actual costs may vary from estimates after approval.
Get an official quote before choosing a loan.</p>
</div>
{{template "header" $}}
<section class="summary">
  <h1>{{.Name}}</h1>
    <h4>{{.Type.Name}} {{.Term}} Year, {{.Amortization}} rate</h4>

<div>
<div class="entries">
  <h4 class="title">Monthly Payment</h4>
  <p><span>Loan payment</span> <span>${{dollars .Result.LoanPayment}}</span></p>
  <p><span>Mortgage insurance</span> <span>${{dollars .Mi.Premium}}</span></p>
  <p><span>Property taxes</span> <span>${{dollars .Tax}}</span></p>
  <p><span>Homeowner's insurance</span> <span>${{dollars .Hoi}}</span></p>
  <p class="total"><span>Total</span> <span>${{dollars .Result.TotalMonthly}}</span></p>
</div>
<div class="entries">
  <h4 class="title">Transaction Details</h4>
  <p><span>Down payment</span> <span>${{diff .Amount $.Estimate.Price}}</span></p>
  <p><span>Closing costs</span> <span>${{dollars .Result.TotalFees}}</span></p>
  <p><span>Credits</span> <span>${{dollars .Result.TotalCredits}}</span></p>
  <p class="total"><span>Total</span>
  <span>${{dollars .Result.CashToClose}}</span></p>

</div>
</div>

<h2>Closing Costs Breakdown</h2>

<div>
<div class="entries">
  <h4 class="title">Fees Paid to Lender</h4>
  {{range (sortFees "Lender" .Fees)}}
  <p><span>{{.Name}}</span> <span>${{dollars .Amount}}</span></p>
  {{end}}
</div>
<div class="entries">
  <h4 class="title">Items Required by Lender</h4>
  {{range (sortFees "Required" .Fees)}}
  <p><span>{{.Name}}</span> <span>${{dollars .Amount}}</span></p>
  {{end}}
</div>
<div class="entries">
  <h4 class="title">Title Company Fees</h4>
  {{range (sortFees "Title" .Fees)}}
  <p><span>{{.Name}}</span> <span>${{dollars .Amount}}</span></p>
  {{end}}
</div>

<div class="entries">
  <h4 class="title">Goverment and Recording Fees</h4>
  {{range (sortFees "Government" .Fees)}}
  <p><span>{{.Name}}</span> <span>${{dollars .Amount}}</span></p>
  {{end}}
</div>
<div class="entries">
  <h4 class="title">Other Fees</h4>
  {{range (sortFees "Other" .Fees)}}
  <p><span>{{.Name}}</span> <span>${{dollars .Amount}}</span></p>
  {{end}}
</div>
</div>

</section>
{{end}}
</body>

<style>
.disclaimer {
    font-weight: bold;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
    color: var(--text);
    text-align: center;
}

.disclaimer p {
    margin: 5px 0;
}

div.break {
    page-break-after: always;
}

.summary h1 {
  text-align: center;
}

.summary h2 {
  text-align: center;
  font-size: 20px;
  color: #4C555E;
}

.summary h4 {
  text-align: center;
  font-weight: normal;
  margin-bottom: 25px;
}

.summary > div {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.summary .entries {
  width: 300px;
  margin: 0 10px;
}

.summary .entries h4 {
  background: #F5F5F3;
  padding: 5px;
}

.summary .entries p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #F5F5F3;
}
p.total {
  font-weight: bold;
}
</style>