{% 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 must choose 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 = 'Map of your activity at the development site' %}
{% 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">Map of your activity at the development site</h1>
    </div>
</div>

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

      <p class="govuk-body">You must send a survey map showing the site before any of the planned activity.</p>
      <p class="govuk-body">Your survey map should include:</p>
         <ul class="govuk-list govuk-list--bullet">
            <li>habitat locations</li>
            <li>type of habitat</li>
            <li>entrances</li>
            <li>survey positions</li>
        </ul>
      <p class="govuk-body">You can upload:</p>
        <ul class="govuk-list govuk-list--bullet">
            <li>GeoJSON files</li>
            <li>KML files</li>
            <li>common shapefiles</li>
            <li>PDF, jpg or PNG files (if these are used, your application may take longer to process)</li>
            <li>ZIP files</li>
        </ul>
        <p class="govuk-body">The file must be smaller than 30MB.</p>

        <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: 'Upload a different file.' } 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 %}