{% from "components/page-header.html" import page_header %}
{% from "components/pill.html" import pill %}
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, spark_bar_field %}

{% extends "withnav_template.html" %}

{% block service_page_title %}
  Templates used
{% endblock %}

{% block maincolumn_content %}

  {{ page_header("Templates used") }}

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

  <div class="dashboard">
    {% for month in months %}
      <h2>{{ month.name }}</h2>
      {% if not month.templates_used %}
        <p class="table-no-data">
          No messages sent
        </p>
      {% else %}
        <div class='template-statistics-table table-overflow-x-auto'>
          {% call(item, row_number) list_table(
            month.templates_used,
            caption=month.name,
            caption_visible=False,
            empty_message='',
            field_headings=[
              'Template',
              'Messages sent'
            ],
            field_headings_visible=False
          ) %}
            {% call row_heading() %}
              <a class="usa-link template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
              <span class="template-statistics-table-hint">
                {{ 1|message_count_label(item.type, suffix='template')|capitalize }}
              </span>
            {% endcall %}
            {{ spark_bar_field(item.requested_count, most_used_template_count, id=item.id) }}
          {% endcall %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

{% endblock %}