{% macro Icon(name, classes="") -%}
    {% autoescape false %}
        <span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>
    {% endautoescape %}
{%- endmacro %}

{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
    <li>
    <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
        {% if icon %}
        {{ Icon(icon, classes="sidenav__link-icon") }}
        {% endif %}

        <span class="sidenav__link-label">{{label}}</span>
    </a>

    {% if subnav and active %}
        <ul>
        {% for item in subnav %}
        <li>
            <a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
            {% if "icon" in item %}
                {{ Icon(item["icon"], classes="sidenav__link-icon") }}
            {% endif %}
            <span class="sidenav__link-label">{{item["label"]}}</span>
            </a>
        </li>
        {% endfor %}
        </ul>
    {% endif %}
    </li>
{%- endmacro %}

{% macro EmptyState(self, message, actionLabel, actionHref, icon=None) -%}
<div class='empty-state'>
  <p>{{ message }}</p>

  {% if icon %}
    {{ Icon(icon) }}
  {% endif %}

  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
</div>
{%- endmacro %}