{#
  Inline status blocks — Penguin UI's "alert" component
  (https://www.penguinui.com/components/alert, modern style, with icon), minus
  the dark variants because the app has no dark theme. The colours come from
  the @theme block in ui/base.html.

  Failures only: a success is ui/toast.html, which says its piece and then
  removes itself rather than staying in the layout. An error has to stay until
  it is read, so it is this.

  Imported wherever a form reports a failure:

    {% import "ui/alert.html" as alert %}
    {% call alert::error("Could not create the table", message) %}{% endcall %}

  An error is normally paired with ui/dialog.html, which is what actually puts
  the message in front of someone who has scrolled away from the top of a form.
#}
{% macro error(title, message) %}
<div class="relative mt-4 w-full overflow-hidden rounded-md border border-danger bg-surface text-onSurface" role="alert">
  <div class="flex items-center gap-2 bg-danger/10 p-4">
    <div class="shrink-0 rounded-full bg-danger/15 p-1 text-danger">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
        <path fill-rule="evenodd" clip-rule="evenodd"
              d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
      </svg>
    </div>
    <div class="ml-2">
      <h3 class="text-sm font-semibold text-danger">{{ title }}</h3>
      <p class="text-sm font-medium whitespace-pre-wrap">{{ message }}</p>
    </div>
  </div>
</div>
{% endmacro %}