{{define "header"}}
{{end}}

{{define "main"}}
<div 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>

<header class="heading">

<img src="data:image/png;base64,{{.Letterhead}}" />

<div>
<div class="user-info">
<h4>{{.User.FirstName}} {{.User.LastName}}</h4>
<span>{{.User.Email}}</span>
<span>{{.User.Phone}}</span>
<small>{{.User.Address.Street}}</small>
<small>
{{.User.Address.City}}, {{.User.Address.Region}} {{.User.Address.Zip}}
</small>
</div>
<img src="data:image/png;base64,{{.Avatar}}" />
</div>

</header>

<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>{{.Amortization}}</td>{{end}}</tr>
<tr><td>Interest rate</td>
{{range .Estimate.Loans}}<td>{{.Interest}}%</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}}</td>{{end}}</tr>
<tr class="total"><td>Total monthly payment</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>${{.Mi.Upfront}}</td>{{end}}</tr>
<tr><td>Credits</td>
  {{range .Estimate.Loans}}<td>${{dollars .Result.TotalCredits}}</td>{{end}}</tr>
</tbody>
</table>

<div class="break"></div>

<section class="summary">
<div class="box">
hello
</div>
</section>

<style scoped>
#pdf-doc {
    margin: 4px 30px;
}

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

.disclaimer p {
    margin: 5px 0;
}

h4 {
    margin: 4px 0;
}

header.heading {
    display: flex;
    justify-content: space-between;
}

.user-info {
    display: flex;
    flex-flow: column;
}

#pdf-doc header.heading > div {
    display: flex;
    text-align: right;
}

header.heading .user-info {
  margin-right: 8px;
}

table {
  width: 100%;
  margin-top: 20px;
}

tr.gap {
  height: 20px;
}

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

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

table td {
  padding: 4px;
}

div.break {
    page-break-after: always;
}
</style>
{{end}}