notifications-admin/app/templates/components/pill.html

{% from 'components/big-number.html' import big_number %}

{% macro pill(
  items=[],
  current_value=None,
  big_number_args={'smaller': True},
  show_count=True
) %}
  <nav aria-labelledby='page-header'>
    <ul class='pill'>
      {% for label, option, link, count in items %}
        <li class="pill-item__container">
        {% if current_value == option %}
          <a id="pill-item-selected" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" aria-disabled="true" aria-current="page">
        {% else %}
          <a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
        {% endif %}
          {% if show_count %}
            {{ big_number(count, **big_number_args) }}
          {% endif %}
            <div class="pill-item__label{% if not show_count %} pill-item--centered{% endif %}">{{ label | safe }}</div>
          </a>
        </li>
      {% endfor %}
    </ul>
  </nav>
{% endmacro %}