{% block content %}
<div
  {{ attributes }}
  class="animate-toast flex w-full max-w-xs items-center rounded-lg bg-gray-800 p-4 text-gray-400 shadow dark:bg-gray-950 dark:text-gray-400"
  role="alert"
  data-controller="alert"
  data-turbo-cache="false"
  data-alert-dismiss-after-value="5000">
  <div
    {{ attributes.nested('wrapper') }}
    class="inline-flex items-center justify-center flex-shrink-0 text-{{ level }} rounded-lg icon-{{ level }}"></div>
  <div {{ attributes.nested('message') }} class="ml-3 text-sm font-normal">{{ message | raw }}</div>
  <button
    type="button"
    {{ attributes.nested('close') }}
    class="hover:text-dark -mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 cursor-pointer p-1.5 text-white"
    data-action="alert#close"
    aria-label="Close">
    <span class="sr-only">Close</span>
    {% block svg %}
    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
    </svg>
    {% endblock svg %}
  </button>
</div>
{% endblock %}
