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

{% macro Alert(title, message=None, actions=None, level='info', fragment=None) -%}
  {% 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='alert alert--{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>
    {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }}

    <div class='alert__content'>
      <h2 class='alert__title'>{{title}}</h2>

      {% if message %}
        <div class='alert__message'>{{ message | safe }}</div>
      {% endif %}

      {% if caller %}
        <div class='alert__message'>{{ caller() }}</div>
      {% endif %}

      {% if fragment %}
        <div class='alert__message'>
          {% 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 %}