<div {% if type == 'error' %} role="alert" {% else %} role="contentinfo" {% endif %} {% if heading %}aria-label="{{ heading }}"{% endif %} {{ attributes }}>

  {% block heading %}
    {% if heading %}
      <h2 class="visually-hidden">{{ heading }}</h2>
    {% endif %}
  {% endblock heading %}

  {% block icon %}
    <div class="messages__icon">
      {% if type == 'error' %}
        <i class="icon icon-frown-o"></i>
      {% elseif type == 'warning' %}
          <i class="icon icon-meh-o"></i>
      {% else %}
          <i class="icon icon-smile-o"></i>
      {% endif %}
    </div>
  {% endblock icon %}

  {% block content %}
    {% if messages|length > 1 %}
      <ul class="messages__list">
        {% for message in messages %}
          <li class="messages__item">{{ message }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <div class="messages__list">
        {{ messages|first }}
      </div>
    {% endif %}
  {% endblock content %}
</div>
