{% from "components/table.html" import mapping_table, row, text_field, field, row_heading %}
{% from "components/textbox.html" import textbox %}

{% extends "withoutnav_template.html" %}

{% block per_page_title %}
  Pricing
{% endblock %}

{% block maincolumn_content %}

<div class="grid-row">
  <div class="column-two-thirds">

    <h1 class="heading-large">Pricing</h1>
    <p> To use GOV.UK Notify, there’s:</p>
    <ul class="list list-bullet">
      <li>no procurement cost</li>
      <li>no monthly charge</li>
      <li>no setup fee to use</li>
    </ul>

    <h2 class="heading-medium">Emails</h2>
    <p>It’s free to send emails through GOV.UK Notify.</p>

    <h2 class="heading-medium">Text messages</h2>
    <p>You have a free allowance of text messages each financial year. You’ll get:</p>
    <ul class="list list-bullet">
      <li>250,000 free text messages for a central government service</li>
      <li>25,000 free text messages for a local government service</li>
    </ul>
    <p>It costs 1.58 pence (plus VAT) for each text message you send after your free allowance.</p>
    <h3 class="heading-small">Long text messages</h3>
    <p>If a text message is beyond a certain length, it’ll be charged as more than one message:</p>
    <div class="bottom-gutter-3-2">
      {% call mapping_table(
        caption='Letter pricing',
        field_headings=['Message length', 'Charge'],
        field_headings_visible=True,
        caption_visible=False
      ) %}
        {% for message_length, charge in [
          ('Up to 160 characters', '1 text message'),
          ('Up to 306 characters', '2 text messages'),
          ('Up to 459 characters', '3 text messages')
        ] %}
          {% call row() %}
            {{ text_field(message_length) }}
            {{ text_field(charge) }}
          {% endcall %}
        {% endfor %}
      {% endcall %}
    </div>
    <h3 class="heading-small">Sending text messages to international numbers</h3>
    <p>It might cost more to send text messages to international numbers than UK ones, depending on the country.</p>
    <details>
      <summary>International text message rates</summary>

      <div class="live-search" data-module="live-search" data-targets="#international-pricing .table-row">
        {{ textbox(
          search_form.search,
          width='1-1',
          label='Search by country name or code'
        ) }}
      </div>

      <div id="international-pricing" class="bottom-gutter-3-2">
        {% call mapping_table(
          caption='Letter pricing',
          field_headings=['Country code', 'Country', 'Cost multiplier'],
          field_headings_visible=True,
          caption_visible=False
        ) %}
          {% for cc, names, billable_units in international_sms_rates %}
            {% call row() %}
              {{ text_field('+' + cc) }}
              {% call field() %}
                {% for name in names %}
                  {{ name }}<br>
                {% endfor %}
              {% endcall %}
              {{ text_field('{}&hairsp;&times;'.format(billable_units)|safe) }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>

    </details>

    <h2 class="heading-medium">Letters</h2>
    <p>The cost of sending a letter depends on how many sheets of paper you need.</p>
    <div class="bottom-gutter-3-2">
      {% call mapping_table(
        caption='Letter pricing',
        field_headings=['', 'Central government', 'Local government'],
        field_headings_visible=True,
        caption_visible=False
      ) %}
        {% for sheets, central, local in [
          ('1 sheet', '30', '33'),
          ('2 sheets', '33', '39'),
          ('3 sheets', '36', '45')
        ] %}
          {% call row() %}
            {% call row_heading() %} {{ sheets }} (double sided) {% endcall %}
            {{ text_field(central + 'p + VAT') }}
            {{ text_field(local + 'p + VAT') }}
          {% endcall %}
        {% endfor %}
      {% endcall %}
    </div>
    <p>Letter prices include:</p>
    <ul class="list list-bullet">
      <li>paper</li>
      <li>double-sided colour printing</li>
      <li>envelopes</li>
      <li>2nd Class postage</li>
    </ul>

  </div>
</div>

{% endblock %}