{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
{% from "components/list.html" import list_of_placeholders %}
{% from "components/form.html" import form_wrapper %}

{% block service_page_title %}
  Confirm changes
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large">Confirm changes</h1>

  <div class="bottom-gutter">
    {% if template_change.placeholders_removed %}
      <p>
        You removed {{ list_of_placeholders(template_change.placeholders_removed) }}
      </p>
    {% endif %}
    {% if template_change.placeholders_added %}
      <p>
        You added {{ list_of_placeholders(template_change.placeholders_added) }}
      </p>
    {% endif %}
  </div>

  {% call form_wrapper() %}
    <input type="hidden" name="name" value="{{ new_template.name }}" />
    <input type="hidden" name="subject" value="{{ new_template._subject or '' }}" />
    <input type="hidden" name="template_content" value="{{ new_template.content }}" />
    <input type="hidden" name="template_id" value="{{ new_template.id }}" />

    <input type="hidden" name="confirm" value="true" />
    {{ page_footer(
      'Save changes to template',
      back_link=url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id),
      back_link_text="Back"
    ) }}
  {% endcall %}

  <p>
    When you send messages using this template you’ll need
    {{ column_headings|length }}
    column{{ 's' if column_headings|length > 1 else '' }} of data:
  </p>

  <div class="spreadsheet fullscreen-content" data-module="fullscreen-table"">
    {% call(item, row_number) list_table(
      example_rows,
      caption="Example",
      caption_visible=False,
      field_headings=[''] + column_headings
    ) %}
      {% if 1 == row_number %}
        {{ index_field('') }}
      {% else %}
        {{ index_field(row_number - 1) }}
      {% endif %}
      {% for column in item %}
        {{ text_field(column) }}
      {% endfor %}
    {% endcall %}
  </div>

  <p class="top-gutter">Developers, you’ll need to update your API calls</p>

{% endblock %}