{% load i18n %}
{% translate "Hide message" as hide_message %}
<div role="alert"
     class="village-alert village-alert--{{ self.type }}{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}">
  {% if self.title %}
    <{{ self.heading_tag | default:"p" }} class="village-alert__title">{{ self.title }}</{{ self.heading_tag | default:"p" }}>
  {% endif %}
  {% if self.content %}
    <p>
      {{ self.content | safe }}
    </p>
  {% endif %}
  {% if self.is_collapsible %}
    <button class="village-btn--close village-btn"
            title="{{ hide_message }}"
            onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
      {{ hide_message }}
    </button>
  {% endif %}
</div>
