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

      {% if actions %}
        <div class='alert__actions'>{{ actions | safe }}</div>
      {% endif %}
    </div>
  </div>
{%- endmacro %}
