{% comment %} Foundation's callout variants carry no `is-` prefix, and there is no `info`
   — `primary` is the stand-in. The public prop vocabulary does not change.

   `.close-button` is CSS-only styling; `data-closable` needs the Toggler
   plugin, so the dismiss is Alpine's. `.callout` is `position: relative`
precisely so the absolutely-positioned close button anchors to it. {% endcomment %}
<div
  role="alert"
  class="callout {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %} {{ class }}"
  x-data="{ visible: true }"
  x-show="visible"
>
  {% comment %} Body content wins over the scalar `message` — a caller who wrote children
  meant them. `message` stays for the existing call form (#65).

  The `
<p>
` wraps only `message`. A body is arbitrary markup, and the HTML
  parser closes an open `
<p>
` on encountering block content: `
<p>
<ul>
…
</ul>
</p>
`
  parses to `
<p>
</p>
<ul>
…
</ul>
<p>
</p>
`, reparenting the body onto `.callout` and
  leaving two empty paragraphs behind for `.callout > :last-child` to match.
  `message` is text, so its wrapper renders byte-identically to before. {% endcomment %}
  {% if slot.strip %}{{ slot }}{% else %}<p>{{ message }}</p>{% endif %}
  {% if dismissible == "true" %}
    <button
      type="button"
      class="close-button"
      aria-label="dismiss"
      @click="visible = false"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  {% endif %}
</div>