{% 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-3-2">
    {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
  </div>

  <div class="govuk-grid-row bottom-gutter">
    <div class="govuk-grid-column-one-third">
      <div class="keyline-block">
        {{ big_number(
          total_emails_sent,
          label='emails sent',
          smaller=True
        ) }}
      </div>
    </div>
    <div class="govuk-grid-column-one-third">
      <div class="keyline-block">
        {{ big_number(
          total_sms_cost,
          'spent on text messages',
          currency="£",
          smaller=True
        ) }}
      </div>
    </div>
    <div class="govuk-grid-column-one-third">
      <div class="keyline-block">
        {{ big_number(
          total_letter_cost,
          'spent on letters',
          currency="£",
          smaller=True
        ) }}
      </div>
    </div>
  </div>
  <ul>
  {% for service in services %}
    <div class="keyline-block govuk-!-margin-top-2">
      <li class="browse-list-item govuk-!-margin-bottom-1 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>
      </li>
      <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>
  </ul>

{% endblock %}