{%load i18n%}
<div class="bg-red-50 border border-red-200 rounded-lg p-4 animate-fade-in">
  <div class="flex items-start gap-3">
    <i data-lucide="alert-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
    <div>
      <p class="text-sm text-red-800 font-medium">{% trans "Error Generating Report" %}</p>
      <p class="text-sm text-red-700 mt-1">{{ error }}</p>
    </div>
  </div>
</div>
<script>lucide.createIcons();</script>