{% extends "withnav_template.html" %}
{% from "components/sms-message.html" import sms_message %}
{% from "components/email-message.html" import email_message %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/table.html" import list_table, field, text_field, index_field, index_field_heading %}

{% block page_title %}
  Send text messages – GOV.UK Notify
{% endblock %}

{% block maincolumn_content %}

  {% if request.args['help'] %}
    <h1 class="heading-large">Example text message</h1>
  {% else %}
    <h1 class="heading-large">Send yourself a test</h1>
  {% endif %}

  {% if 'sms' == template.template_type %}
    <div class="grid-row">
      <div class="column-two-thirds">
        {{ sms_message(
          template.formatted_as_markup,
          recipient='',
          show_placeholder_for_recipient=True
        ) }}
      </div>
    </div>
  {% elif 'email' == template.template_type %}
    {{ email_message(
      template.formatted_subject_as_markup,
      template.formatted_as_markup,
      recipient='',
      show_placeholder_for_recipient=True
    ) }}
  {% endif %}

  <form method="post">
    {% call(item, row_number) list_table(
      example,
      caption="Fill in the {}".format('field' if template.placeholders|length == 1 else 'fields'),
      field_headings=[recipient_column] + template.placeholders|list
    ) %}
      {% for column in item %}
        {% call field() %}
          {% if loop.index > 1 %}
            <label class="visuallyhidden" for="placeholder-field-{{ loop.index }}">{{ column }}</label>
            <input class="form-control form-control-1-1 " data-module="" name="{{ column }}" rows="8" type="text" value="" id="placeholder-field-{{ loop.index }}">
          {% else %}
            {{ column }}
          {% endif %}
        {% endcall %}
      {% endfor %}
    {% endcall %}

    {{ page_footer("Preview", back_link=(
      url_for('.send_messages', service_id=current_service.id, template_id=template.id)) if not help else None
    ) }}
  </form>

{% endblock %}