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

<div class='dashboard-table'>
  {% call(item, row_number) list_table(
    template_statistics,
    caption="Templates used",
    caption_visible=False,
    empty_message='',
    field_headings=[
      'Template',
      'Messages sent'
    ],
    field_headings_visible=True
  ) %}
    {% call row_heading() %}
      <span class="spark-bar-label">
        <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
        <span class="file-list-hint">
          {{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
        </span>
      </span>
    {% endcall %}
    {% call field() %}
      {% if template_statistics|length > 1 %}
        <span class="spark-bar">
          <span style="width: {{ item.count / most_used_template_count * 100 }}%">
            {{ big_number(
              item.count,
              smallest=True
            ) }}
          </span>
        </span>
      {% else %}
        <span class="heading-small">
          {{ big_number(
            item.count,
            smallest=True
          ) }}
        </span>
      {% endif %}
    {% endcall %}
  {% endcall %}
</div>