{% from "components/big-number.html" import big_number %}
{% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
{% from "components/pill.html" import pill %}

{% extends "withnav_template.html" %}

{% block service_page_title %}
  Usage
{% endblock %}

{% block maincolumn_content %}

    <h2 class='heading-large'>Usage</h2>

    <div class="bottom-gutter">
      {{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }}
    </div>

    <div class='grid-row'>
      <div class='column-half'>
        <h2 class='heading-small'>Emails</h2>
        <div class="keyline-block">
          {{ big_number(emails_sent, 'sent', smaller=True) }}
          {{ big_number("Unlimited", 'free allowance', smaller=True) }}
        </div>
      </div>
      <div class='column-half'>
        <h2 class='heading-small'>Text messages</h2>
        <div class="keyline-block">
          {{ big_number(sms_sent, 'sent', smaller=True) }}
          {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
          {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
          {% if sms_chargeable %}
            {{ big_number(
              sms_chargeable,
              'at {:.2f} pence per message'.format(sms_rate * 100),
              smaller=True
            ) }}
          {% endif %}
        </div>
      </div>
    </div>

    <div class='grid-row'>
      <div class='column-half'>
        <div class="keyline-block">
          &nbsp;
        </div>
      </div>
      <div class='column-half'>
        <div class="keyline-block">
          {{ big_number(
            (sms_chargeable * sms_rate),
            'spent',
            currency="£",
            smaller=True
          ) }}
        </div>
      </div>
    </div>

    {% if months %}
      <div class="dashboard-table body-copy-table">
        {% call(month, row_index) list_table(
          months,
          caption="Total spend",
          caption_visible=False,
          empty_message='',
          field_headings=[
            'By month',
            hidden_field_heading('Cost'),
          ],
          field_headings_visible=True
        ) %}
          {% call row_heading() %}
            {{ month.name }}
          {% endcall %}
          {% call field(align='left') %}
            {{ big_number(
              sms_rate * month.paid,
              currency="£",
              smallest=True
            ) }}
            <ul>
            {% if month.free %}
              <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
            {% endif %}
            {% if month.paid %}
              <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
              {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
            {% endif %}
            {% if not (month.free or month.paid) %}
              <li aria-hidden="true">–</li>
            {% endif %}
            </ul>
          {% endcall %}
        {% endcall %}
      </div>
    {% endif %}

    <div class="grid-row">
      <div class="column-half">
        <p class="align-with-heading-copy">
          Financial year ends 31 March.
        </p>
      </div>
      <div class="column-half">
        <p class="align-with-heading-copy">
          What counts as 1 text message?<br />
          See <a href="{{ url_for('.pricing') }}">pricing</a>.
        </p>
      </div>
    </div>

{% endblock %}