DEFRA/ivory-front-office

{% extends 'two-thirds-layout.njk' %}

{% from "file-upload/macro.njk" import govukFileUpload %}

{# Override the form block to set multipart encoding #}
{% block formDefinition %}
  <form method="post" autocomplete="off" {{ novalidateVal }} enctype="multipart/form-data" >
    <input id="defra-csrf-token" type="hidden" name="DefraCsrfToken" value="{{ DefraCsrfToken }}">
{% endblock %}

{% set hintHtml %}
  <span id="hint" class="govuk-body">
    {% if viewData.addedPhotos %}
      <p class="govuk-body">You can add up to {{viewData.maxPhotos - viewData.addedPhotos}} more photo{% if viewData.maxPhotos - viewData.addedPhotos > 1 %}s{% endif %}.</p>
    {% else %}
      <p class="govuk-body">You can add up to {{viewData.maxPhotos}} photos.</p>
    {% endif %}
    <p class="govuk-body">You must show:</p>

    <ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-7">
      <li>the whole item</li>
      <li>any unique features</li>
    </ul>
  </span>
{% endset %}

{% block formContent %}

    {{ govukFileUpload({
      name: fieldname,
      id: fieldname,
      label: {
        text: pageHeading,
        isPageHeading: isQuestionPage,
        classes: "govuk-label--xl"
      },
      hint: { html: hintHtml },
      errorMessage: errors[fieldname],
      classes: "ivory-govuk-file-upload",
      attributes: {
        accept: viewData.mimeTypes,
        multiple: true
      }
    }) }}

{% endblock %}

{% block contentFooter %}
  {% if viewData.addedPhotos %}
    <p id="cancel-link" class="govuk-body"><a href="{{ viewData.cancelLink }}">Cancel</a></p>
  {% endif %}
{% endblock %}