{{#messages.error}}
<div class="mb-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 dark:bg-red-800 dark:text-red-200">
  <div class="flex justify-between items-center">
    <div>
      {{content}}
    </div>
    <button type="button" class="text-red-700 hover:text-red-900 dark:text-red-200 dark:hover:text-red-100" onclick="this.parentElement.parentElement.remove()">
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"  width="20" height="20">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>
{{/messages.error}}

{{#messages.info}}
<div class="mb-4 p-4 bg-gray-100 border-l-4 border-brand-500 text-gray-700 dark:bg-gray-800 dark:text-gray-200">
  <div class="flex justify-between items-center">
    <div>{{content}}</div>
    <button type="button" class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100" onclick="this.parentElement.parentElement.remove()">
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"  width="20" height="20">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>
{{/messages.info}}