{% extends "layout.njk" %}
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{% from "fieldset/macro.njk" import govukFieldset %}
{% from "button/macro.njk" import govukButton %}
{% from "error-summary.njk" import errorSummary %}
{% set errorMap = {
        'scan-file': {
          'no-file-chosen' : { ref: '#scan-file', text: 'You have not selected a file to upload.' },
          'empty-file-chosen' : { ref: '#scan-file', text: 'The selected file is empty.' },
          'infected' : { ref: '#scan-file', text: 'The selected file contains a virus. Upload a different file.' },
          'file-too-big' : { ref: '#scan-file', text: 'The selected file is too big.' },
          'wrong-file-type' : { ref: '#scan-file', text: 'The selected file must be a JPG, PNG, KML, Shape, GeoJSON, PDF or ZIP.' }
        }
    } %}
{% set title = 'Upload a file' %}
{% block pageTitle %}
  {{ 'Error: ' + title if error else title }}
{% endblock %}
{% block content %}
  {{ errorSummary(error, errorMap, 'There is a problem') }}
  <div class="govuk-grid-row">
    <div class='govuk-grid-column-two-thirds'>
      <h1 class="govuk-heading-l">Upload a file</h1>
    </div>
  </div>
  <div class="govuk-grid-row">
    <div class="{{ widthClass if widthClass else 'govuk-grid-column-two-thirds' }}">
      <p class="govuk-body">The file must be smaller than 30MB. It can be:</p>
      <ul class="govuk-list govuk-list--bullet">
        <li>an image (JPG, PNG, TIF or BMP)</li>
        <li>map data (GeoJSON, KML or Shape)</li>
        <li>text (DOC, DOCX, PDF or ODT)</li>
        <li>a spreadsheet (XLS, XLSX or ODS)</li>
      </ul>
      <form enctype="multipart/form-data" method="post">
        {% call govukFieldset({
              legend: {
                classes: "govuk-fieldset__legend--l govuk-!-margin-bottom-0"
              }
            }) %}
        {{ govukFileUpload({
              id: "scan-file",
              name: "scan-file",
              label: {
                text: "Upload a file",
                classes: "govuk-label govuk-label--s"
              },
              errorMessage: { text: 'Select a file to upload.' } if error['scan-file']
            }) }}
        <div>
          <!-- Div user here to "push" the button onto a newline, otherwise it displays next to the file upload button, which is
          incorrect -->
          {{ govukButton({
                  attributes: { id: 'continue' },
                  preventDoubleClick: true,
                  text: 'Continue',
                  classes: "govuk-!-margin-top-5"
                }) }}
        </div>
        {% endcall %} <input type="hidden" name="crumb" value="{{ crumb }}"/>
      </form>
    </div>
  </div>
{% endblock %}