{% 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 %}

    <h1 class="font-body-lg">
      Usage
    </h1>

    <div class="tabs tabs__usage">
      {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
    </div>
    <div id='pill-selected-item'>
      <div class='grid-row'>

        <div class='grid-col-12'>
          <h2 class='heading-small margin-bottom-1'>Text message parts</h2>
          <div class="keyline-block">
            You have sent
            {{ big_number(sms_sent, 'text message parts of your', smaller=True) }}
            {{ big_number(sms_free_allowance, 'free message parts allowance.', smaller=True) }}
            <br />
            You have
            {% if sms_free_allowance > 0 %}
              {{ big_number(sms_allowance_remaining, 'message parts remaining.', smaller=True) }}
            {% endif %}
            {# {% for row in sms_breakdown %}
              {% if row.charged_units > 0 %}
                {{ big_number(
                row.charged_units,
                  'at {:.2f} pence per message'.format(row.rate * 100),
                  smaller=True
                ) }}
              {% endif %}
            {% endfor %} #}
          </div>
        </div>
        {# <div class='grid-col-6'>
          <h2 class='heading-small'>Emails</h2>
          <div class="keyline-block">
            {{ big_number(emails_sent, 'email disabled during SMS pilot', smaller=True) }}
            {{ big_number("", '', smaller=True) }}
          </div>
        </div> #}
      </div>

      {# <div class='grid-row'>
        <div class='grid-col-6'>
          <div class="keyline-block">
            {{ big_number(
              sms_cost,
              'spent',
              currency="$",
              smaller=True
              ) }}
            </div>
          </div>
          <div class='grid-col-6'>
            <div class="keyline-block">
              &nbsp;
            </div>
          </div>
      </div> #}

      {% if months %}
        <div class="dashboard-table usage-table body-copy-table table-overflow-x-auto margin-top-4">
          {% call(item, row_index) list_table(
            months,
            caption="Total spend",
            caption_visible=False,
            empty_message='',
            field_headings=[
              'By month',
              'Text message parts',
              'Total message allowance',
            ],
            field_headings_visible=True
          ) %}
            {% call row_heading() %}
              {{ item.month }}
            {% endcall %}
            {% for counts, template_type in [
              (item.sms_counts.0, 'parts'),
            ] %}
              {% call field(align='left') %}
                {{ big_number(
                  counts.requested,
                  counts.requested|message_count_label(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 %}
            {% call field(align='left') %}
              <ul>
              {% if item.sms_free_allowance_used %}
                <li class="tabular-numbers">{{ item.sms_free_allowance_used|format_thousands }} total {{ item.sms_free_count|message_count_label('parts', suffix='') }}</li>
              {% endif %}
              {% for sms in item.sms_breakdown %}
                  <li class="tabular-numbers">{{ sms.charged_units|message_count('sms') }} at
                  {{- ' {:.2f}p'.format(sms.rate * 100) }}</li>
              {% endfor %}
              {% if not (item.sms_free_allowance_used or item.sms_cost) %}
                <li aria-hidden="true">–</li>
              {% endif %}
              </ul>
            {% endcall %}

          {% endcall %}
        </div>
      {% endif %}
    </div>

    <div class="grid-row">
      <div class="grid-col-4">
        <p class="align-with-heading-copy">
          Federal fiscal year ends September&nbsp;30
        </p>
      </div>
      <div class="grid-col-8">
        <p class="align-with-heading-copy">
          What counts as 1 text message part?<br />
          See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
        </p>
      </div>
    </div>

{% endblock %}