<div class="space-y-4 mb-2">

{% set classes = [
    type == 'error' ? 'bg-error text-body-bg' : 'bg-' ~ variant,
    type == 'warning' ? 'bg-warning text-body-bg' : 'bg-' ~ variant,
    type == 'success' ? 'bg-success text-body-bg' : 'bg-' ~ variant,
    type == 'info' ? 'bg-primary text-body-bg' : 'bg-' ~ variant,

    ' p-4 rounded-lg flex items-center justify-between'
  ] %}

  <div role="contentinfo" aria-label="{{ status_headings[type] }}">
    <div
    x-data="{ show: true }"
    x-show="show"
    x-init="setTimeout(() => show = false, 4555000)"
    x-transition:enter="transition transform ease-out duration-500"
    x-transition:enter-start="opacity-0 translate-y-4"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition transform ease-in duration-500"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-4"
    class="{{ classes|join(' ') }}"
    >
     <div class="flex items-center">
     {% if type == 'success' %}
      <svg
        class="w-5 h-5 text-body-bg mr-3"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        >
        <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 13l4 4L19 7"
        ></path>
      </svg>
      {% elseif  type == 'error' %}
       <svg
            class="w-5 h-5 text-body-bg mr-3"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18 6L6 18M6 6l12 12"
            ></path>
          </svg>
      {% else %}
          <svg
            class="w-5 h-5 text-body mr-3"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M11 7h2v6h-2zm0 4h2v2h-2z"
            ></path>
          </svg>
      {% endif %}
          <ul>
              <li>{{ variant|capitalize ~ '!' }} {{ messages }}</li>
          </ul>
      </div>

      <button @click="show = false">
        <svg
          class="w-5 h-5 text-red-800"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M18 6L6 18M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>
