{% from "components/big-number.html" import big_number %}
{% from "components/pill.html" import pill %}
{% extends "org_template.html" %}

{% block org_page_title %}
  Usage
{% endblock %}

{% block maincolumn_content %}

  <h1 class="heading-medium">
    Usage
  </h1>

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

  <div class="govuk-grid-row bottom-gutter">
    <div class="govuk-grid-column-one-third">
      <h2 class="heading-small">Emails</h2>
      <div class="keyline-block">
        {{ big_number(
          total_emails_sent,
          label='sent',
          smaller=True
        ) }}
      </div>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="heading-small">Text messages</h2>
      <div class="keyline-block">
        {{ big_number(
          total_sms_cost,
          'spent',
          currency="£",
          smaller=True
        ) }}
      </div>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="heading-small">Letters</h2>
      <div class="keyline-block">
        {{ big_number(
          total_letter_cost,
          'spent',
          currency="£",
          smaller=True
        ) }}
      </div>
    </div>
  </div>
  <h2 class="heading-small">By service</h2>
  {% for service in services %}
    <div class="keyline-block govuk-!-margin-top-2">
      <h3 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-3 govuk-!-margin-top-1">
        <a href="{{ url_for('main.usage', service_id=service.service_id) }}" class="govuk-link govuk-link--no-visited-state browse-list-link">{{ service.service_name  }}</a>
      </h3>
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-third">
          {{ big_number(
            service.emails_sent,
            label='emails sent',
            smallest=True
          ) }}
        </div>
        <div class="govuk-grid-column-one-third">
          {% if service.sms_cost %}
            {{ big_number(
              service.sms_cost,
              'spent on text messages',
              currency="£",
              smallest=True
            ) }}
          {% else %}
            {{ big_number(
              service.free_sms_limit - service.sms_remainder,
              'free text messages sent',
              smallest=True
            ) }}
          {% endif %}
        </div>
        <div class="govuk-grid-column-one-third">
          {{ big_number(
            service.letter_cost,
            'spent on letters',
            currency="£",
            smallest=True
          ) }}
        </div>
      </div>
    </div>
  {% endfor %}
  <div class="keyline-block govuk-!-margin-top-2"></div>

{% endblock %}