{% 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, BMP, PNG, TIF, KML, shape, DOC, DOCX, ODT, XLS, XLSX, GeoJSON, ODS, PDF or ZIP.' }
        }
    }
%}

{% set title = 'Upload a supporting information' %}
{% block pageTitle %}{{ 'Error: ' + title if error else title }}{% endblock %}

{% block content %}

{{ errorSummary(error, errorMap, 'There is a problem') }}

<h1 class="govuk-heading-l">Upload supporting information</h1>

<div class="govuk-grid-row">
    <div class="{{ widthClass if widthClass else 'govuk-grid-column-two-thirds' }}">

      <p class="govuk-body">Upload files that support your application.</p>
      <p class="govuk-body">You can upload:</p>
         <ul class="govuk-list govuk-list--bullet">
            <li>a works schedule</li>
            <li>a methods statement</li>
            <li>monitoring reports</li>
            <li>maps, diagrams or drawings</li>
            <li>evidence of permissions or consents</li>
            <li>any other supporting information</li>
        </ul>
      <p class="govuk-body">You should include information on:</p>
        <ul class="govuk-list govuk-list--bullet">
            <li>how and when each badger sett will be affected</li>
            <li>types of machinery or tools that will be used and their distance from each badger sett</li>
            <li>justification for why each badger sett will be affected</li>
            <li>dates of any proposed mitigation work</li>
            <li>how the licence conditions will be upheld during the development work</li>
        </ul>

        <h2 class="govuk-heading-m">Upload a file</h2>
        <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 common shapefiles)</li>
            <li>text (DOC, DOCX, PDF or ODT)</li>
            <li>a spreadsheet (XLS, XLSX or ODS)</li>
            <li>ZIP files</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"
              },
              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: 'Upload and continue',
                  classes: "govuk-!-margin-top-5"
                }) }}
            </div>

            {% endcall %}
            <input type="hidden" name="crumb" value="{{crumb}}"/>
        </form>
    </div>
</div>
{% endblock %}