{% from "components/icon.html" import Icon %}

{% macro Alert(title=None, message=None, actions=None, level='info', fragment=None, vue_template=False) -%}
  {% set role = 'alertdialog' if actions else 'alert' %}
  {% set levels = {
    'warning': {
      'icon': 'alert',
      'tone': 'assertive'
    },
    'error': {
      'icon': 'alert',
      'tone': 'assertive'
    },
    'info': {
      'icon': 'info',
      'tone': 'polite'
    },
    'success': {
      'icon': 'ok',
      'tone': 'polite'
    }
  } %}

  <div class='usa-alert usa-alert-{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>

    <div class='usa-alert-body'>
      {% if vue_template %}
        <h3 class='usa-alert-heading' v-html='title'></h3>
      {% elif title %}
        <h3 class='usa-alert-heading'>{{title}}</h3>
      {% endif %}

      {% if message %}
        <div class='usa-alert-text'>{{ message | safe }}</div>
      {% endif %}

      {% if caller %}
        <div class='usa-alert-text'>{{ caller() }}</div>
      {% endif %}

      {% if fragment %}
        <div class='usa-alert-text'>
          {% include fragment %}
        </div>
      {% endif %}

      {% if actions %}
        <div class='alert__actions'>
          {% if actions is string %}

            {{ actions | safe }}

          {% elif actions is iterable %}

            {% for action in actions %}
              <a href='{{ action["href"] }}' class='icon-link'>
                {% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %}
                <span>{{ action["label"] }}</span>
              </a>
            {% endfor %}

          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{%- endmacro %}