{% from "components/big-number.html" import big_number_with_status, big_number %}
{% from "components/pill.html" import pill %}
{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
{% from "components/message-count-label.html" import message_count_label %}

{% extends "withnav_template.html" %}

{% block service_page_title %}
  Messages sent,
  {{ selected_year }} to {{ selected_year + 1 }} financial year
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-large">
    Messages sent
  </h1>
  <div class="bottom-gutter">
    {{ pill(
      items=years,
      current_value=selected_year,
      big_number_args={'smallest': True},
    ) }}
  </div>
  {% if months %}
    <div class="body-copy-table" id='pill-selected-item'>
      {% call(month, row_index) list_table(
        months,
        caption="Total spend",
        caption_visible=False,
        empty_message='',
        field_headings=[
          'Month',
          'Emails',
          'Text messages',
          'letters',
        ],
        field_headings_visible=False,
        equal_length=True
      ) %}
        {% if not month.future %}
          {% call row_heading() %}
            {{ month.name }}
          {% endcall %}
          {% for counts, template_type in [
            (month.email_counts, 'email'),
            (month.sms_counts, 'sms'),
            (month.letter_counts, 'letter')
          ] %}
            {% call field(align='left') %}
              {{ big_number(
                counts.requested,
                message_count_label(counts.requested, template_type, suffix=''),
                smallest=True,
              ) }}
              {% if counts.requested %}
                <span class="{{ 'failure-highlight' if counts.show_warning else '' }}">
                  {{ "{:,}".format(counts.failed) }} failed
                </span>
              {% else %}
                –
              {% endif %}
            {% endcall %}
          {% endfor %}
        {% endif %}
      {% endcall %}
    </div>
  {% endif %}

  <p class="align-with-heading-copy">
    Financial year ends 31 March.
  </p>

{% endblock %}