{%load i18n%}
<div class="bg-green-50 border border-green-200 rounded-lg p-4 animate-fade-in">
  <div class="flex items-start gap-3">
    <i data-lucide="check-circle" class="w-5 h-5 text-green-600 mt-0.5"></i>
    <div>
      <p class="text-sm text-green-800 font-medium">{{ message }}</p>
      {% if report %}
      <p class="text-sm text-green-700 mt-1">
        {% trans "You can now view the report or generate another one." %}
      </p>
      <div class="flex gap-2 mt-3">
        <a href="{% url 'analytics:kpi_report_detail' report.id %}" class="btn-primary text-sm py-1.5 px-3">
          {% trans "View Report" %}
        </a>
        <a href="{% url 'analytics:kpi_report_list' %}" class="btn-secondary text-sm py-1.5 px-3">
          {% trans "All Reports" %}
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</div>
<script>lucide.createIcons();</script>