{% if success %}
  <div class="p-4 bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-600 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
      </svg>
      <span class="text-green-800 dark:text-green-200 text-sm font-medium">{{ success }}</span>
    </div>
  </div>
{% endif %}
{% if error %}
  <div class="p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 rounded-md">
    <div class="flex items-center">
      <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
        </path>
      </svg>
      <span class="text-red-800 dark:text-red-200 text-sm font-medium">{{ error }}</span>
    </div>
  </div>
{% endif %}