Add: View

Author: Beckyrose200

app/views/return-logs/setup/period-used.njk

@@ -0,0 +1,134 @@
+{% extends 'layout.njk' %}
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from 'govuk/components/date-input/macro.njk' import govukDateInput %}
+
+{% block breadcrumbs %}
+  {# Back link #}
+  {{
+    govukBackLink({
+      text: 'Back',
+      href: backLink
+    })
+  }}
+{% endblock %}
+
+{% block content %}
+  {# Error summary #}
+  {% if error %}
+    {{ govukErrorSummary({
+      titleText: "There is a problem",
+      errorList: error.errorList
+    }) }}
+  {%endif%}
+
+  {# Main heading #}
+  <div>
+    <span class="govuk-caption-l"> Return reference {{ returnReference }} </span>
+    <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+  </div>
+  <div>
+    <form method="post">
+      <input type="hidden" name="wrlsCrumb" value="{{wrlsCrumb}}"/>
+
+      {% set dateInputHTML %}
+        {# From #}
+        {{ govukDateInput({
+          id: 'period-used-from',
+          namePrefix: 'period-used-from',
+          errorMessage: {
+            text: error.fromFullDate.message
+          } if error.fromFullDate,
+          fieldset: {
+            legend: {
+              text: "From",
+              classes: "govuk-fieldset__legend--xs govuk-!-font-weight-bold"
+            }
+          },
+          items: [
+            {
+              classes: 'govuk-input--width-2 ' + errorClass,
+              name: 'day',
+              value: periodUsedFromDay
+            },
+            {
+              classes: 'govuk-input--width-2 ' + errorClass,
+              name: 'month',
+              value: periodUsedFromMonth
+            },
+            {
+              classes: 'govuk-input--width-4 ' + errorClass,
+              name: 'year',
+              value: periodUsedFromYear
+            }
+          ]
+        }) }}
+
+        {# To #}
+        {{ govukDateInput({
+          id: 'period-used-To',
+          namePrefix: 'period-used-to',
+          errorMessage: {
+            text: error.toFullDate.message
+          } if error.toFullDate,
+          fieldset: {
+            legend: {
+              text: "To",
+              classes: "govuk-fieldset__legend--xs govuk-!-font-weight-bold"
+            }
+          },
+          items: [
+            {
+              classes: 'govuk-input--width-2 ' + errorClass,
+              name: 'day',
+              value: periodUsedToDay
+            },
+            {
+              classes: 'govuk-input--width-2 ' + errorClass,
+              name: 'month',
+              value: periodUsedToMonth
+            },
+            {
+              classes: 'govuk-input--width-4 ' + errorClass,
+              name: 'year',
+              value: periodUsedToYear
+            }
+          ]
+        }) }}
+      {% endset %}
+
+      {{ govukRadios({
+        name: "periodDateUsedOptions",
+        errorMessage: {
+          text: error.periodDateUsedOptions.message
+          } if error.periodDateUsedOptions,
+        fieldset: {
+          legend: {
+            classes: "govuk-fieldset__legend--l"
+          }
+        },
+        items: [
+          {
+            value: "default",
+            text: "Default abstraction period",
+            hint: { text: abstractionPeriod },
+            checked: periodDateUsedOptions === 'default'
+          },
+          {
+            value: "custom-dates",
+            text: "Custom dates",
+            checked: periodDateUsedOptions === 'custom-dates',
+            conditional: {
+              html: dateInputHTML
+            }
+          }
+        ]
+      }) }}
+
+      {{ govukButton({ text: "Continue", preventDoubleClick: true }) }}
+    </form>
+  </div>
+{% endblock %}