creating njk template for log swap vos pin credit details page (#16)

* creating njk template for log swap vos pin credit details page

* Fixing indentation

* Fix: added missing newline at EOF

* Fixing indentation for njk function calls

Author: sweetymj

server/views/pages/log/swap-vos-pin-credit-details.njk

@@ -1,4 +1,6 @@
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% extends "../../partials/layout.njk" %}
 
@@ -11,5 +13,39 @@
       text: "Back",
       href: "/log/prisoner-details"
     }) }}
+
+    <span class="govuk-caption-xl">{{ appTypeTitle }}</span>
+    <h1 class="govuk-heading-xl govuk-!-margin-top-0">Log details</h1>
+
+    <div class="govuk-width-container">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-one-half">
+          <form method="POST" id="log-swap-vos-pin-credit-details">
+            <input type="hidden" name="_csrf" value="{{ csrfToken }}" />
+
+            {{ govukCharacterCount({
+              name: "swap-vos-pin-credit-details",
+              id: "swap-vos-pin-credit-details",
+              maxlength: 1000,
+              threshold: 75,
+              value: textareaValue,
+              label: {
+                text: "Details (optional)",
+                classes: "govuk-label--s",
+                isPageHeading: true
+              },
+              hint: {
+                text: "Add a brief summary, for example, if this person is a Foreign National"
+              }
+            }) }}
+
+            {{ govukButton({
+              text: "Continue",
+              classes: "govuk-button--primary"
+            }) }}
+          </form>
+        </div>
+      </div>
+    </div>
   </div>
-{% endblock %}
+{% endblock %}