{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner %}
{% from "components/textbox.html" import textbox %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/page-footer.html" import page_footer %}

{% from "components/form.html" import form_wrapper %}

{% block service_page_title %}
  Letter validation preview
{% endblock %}

{% block maincolumn_content %}

<div class="grid-row">
  <div class="column-whole">
    {% if result %}
      {{ banner(message, with_tick=True) }}
    {% elif message %}
      {{ banner(message, 'dangerous')}}
    {% endif %}

      <h1 class="heading-large">Letter validation preview</h1>
    <div class="bottom-gutter">
     {{ file_upload(
          form.file,
          action = url_for('main.service_letter_validation_preview', service_id=current_service.id),
          button_text='Choose a file',
      )}}
    </div>
      {%if not pages %}
        <div>
        <p>Your file must be:
        <li>a PDF</li>
        <li>no more than 10 pages long</li>
        <li>less than 2 MB</li>
        </p>
        <p>The content of your letter must appear inside the printable area.</p>
        <p>
        <a href="https://docs.notifications.service.gov.uk/documentation/images/notify-pdf-letter-spec-v2.3.pdf">
            Download the letter specification</a> for more information.
        </p>
        </div>
    {% endif%}
  </div>
  <div class="column-whole template-container" >

    {% for page in pages %}
    <div class="letter">
      <img src="data:image/png;base64,{{ page }}">
    </div>
    {% endfor %}
  </div>
</div>

{% endblock %}