Skouter mortgage estimates. Web application with view written in PHP and Vue, but controller and models in Go.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

139 lines
2.9 KiB

  1. {{define "header"}}
  2. {{end}}
  3. {{define "main"}}
  4. <div id="pdf-doc">
  5. <div class="disclaimer"><p>Actual costs may vary from estimates after approval. Get an official quote before choosing a loan.</p></div>
  6. <header class="heading">
  7. <img src="data:image/png;base64,{{.Letterhead}}" />
  8. <div>
  9. <div class="user-info">
  10. <h4>{{.User.FirstName}} {{.User.LastName}}</h4>
  11. <span>{{.User.Email}}</span>
  12. <span>{{.User.Phone}}</span>
  13. <small>{{.User.Address.Street}}</small>
  14. <small>
  15. {{.User.Address.City}}, {{.User.Address.Region}} {{.User.Address.Zip}}
  16. </small>
  17. </div>
  18. <img src="data:image/png;base64,{{.Avatar}}" />
  19. </div>
  20. </header>
  21. <table>
  22. <thead><tr>
  23. <th></th>{{range $l := .Estimate.Loans}}<th>{{$l.Name}}</th>{{end}}
  24. </tr></thead>
  25. <tbody>
  26. <tr><td>Type</td>
  27. {{range .Estimate.Loans}}<td>{{.Type.Name}}</td>{{end}}</tr>
  28. <tr><td>Term</td>
  29. {{range .Estimate.Loans}}<td>{{.Term}} Years</td>{{end}}</tr>
  30. <tr><td>Amortization</td>
  31. {{range .Estimate.Loans}}<td>{{.Amortization}}</td>{{end}}</tr>
  32. <tr><td>Interest rate</td>
  33. {{range .Estimate.Loans}}<td>{{.Interest}}%</td>{{end}}</tr>
  34. <tr><td>Monthly MI</td>
  35. {{range .Estimate.Loans}}<td>${{dollars .Mi.Premium}}/month</td>{{end}}</tr>
  36. <tr><td>Real estate taxes</td>
  37. {{range .Estimate.Loans}}<td>${{dollars .Tax}}</td>{{end}}</tr>
  38. <tr class="total"><td>Total monthly payment</td>
  39. {{range .Estimate.Loans}}<td>${{dollars .Result.TotalMonthly}}</td>{{end}}</tr>
  40. <tr class="gap"></tr>
  41. <tr><td>Purchase price</td>
  42. {{range .Estimate.Loans}}<td>${{dollars $.Estimate.Price}}</td>{{end}}</tr>
  43. <tr><td>Loan amount</td>
  44. {{range .Estimate.Loans}}<td>${{dollars .Amount}}</td>{{end}}</tr>
  45. <tr><td>Down payment</td>
  46. {{range .Estimate.Loans}}<td>${{diff .Amount $.Estimate.Price}}</td>{{end}}</tr>
  47. <tr><td>Closing costs</td>
  48. {{range .Estimate.Loans}}<td>${{dollars .Result.TotalFees}}</td>{{end}}</tr>
  49. <tr><td>MI Premium</td>
  50. {{range .Estimate.Loans}}<td>${{.Mi.Upfront}}</td>{{end}}</tr>
  51. <tr><td>Credits</td>
  52. {{range .Estimate.Loans}}<td>${{dollars .Result.TotalCredits}}</td>{{end}}</tr>
  53. </tbody>
  54. </table>
  55. <div class="break"></div>
  56. <section class="summary">
  57. <div class="box">
  58. hello
  59. </div>
  60. </section>
  61. <style scoped>
  62. #pdf-doc {
  63. margin: 4px 30px;
  64. }
  65. .disclaimer {
  66. font-weight: bold;
  67. border-bottom: 1px solid lightgrey;
  68. margin-bottom: 20px;
  69. color: var(--text);
  70. text-align: center;
  71. }
  72. .disclaimer p {
  73. margin: 5px 0;
  74. }
  75. h4 {
  76. margin: 4px 0;
  77. }
  78. header.heading {
  79. display: flex;
  80. justify-content: space-between;
  81. }
  82. .user-info {
  83. display: flex;
  84. flex-flow: column;
  85. }
  86. #pdf-doc header.heading > div {
  87. display: flex;
  88. text-align: right;
  89. }
  90. header.heading .user-info {
  91. margin-right: 8px;
  92. }
  93. table {
  94. width: 100%;
  95. margin-top: 20px;
  96. }
  97. tr.gap {
  98. height: 20px;
  99. }
  100. table td:first-child {
  101. font-weight: bold;
  102. }
  103. tbody tr:nth-child(odd) {
  104. background: #F5F5F3;
  105. }
  106. table td {
  107. padding: 4px;
  108. }
  109. div.break {
  110. page-break-after: always;
  111. }
  112. </style>
  113. {{end}}