{% set tag_name = tag_name|default('div') %}

{% set _icon_block %}
  {% block icon %}
    {% if icon %}
      {% include '@cloudfour/components/icon/icon.twig' with {
        name: icon,
      } only %}
    {% endif %}
  {% endblock %}
{% endset %}

<{{ tag_name }}
  {% if id %}id="{{id}}"{% endif %}
  class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}"
  {% if hidden %}hidden{% endif %}
  {% if role %}role="{{ role }}"{% endif %}
>
  <div class="c-alert__inner">
    {% if _icon_block|trim is not empty %}
      <span class="c-alert__extra">
        {{_icon_block}}
      </span>
    {% endif %}
    <div class="c-alert__content">
      {% block content %}
        <p>
          {{message|default('Hello world!')}}
        </p>
      {% endblock %}
    </div>
    {% if dismissable %}
      <button class="c-alert__dismiss" type="button">
        {% include '@cloudfour/components/icon/icon.twig' with {
          class: 'c-alert__dismiss-icon',
          name: 'x',
        } %}
        <span class="u-hidden-visually">Dismiss alert</span>
      </button>
    {% endif %}
  </div>
</{{ tag_name }}>