{{define "recent-errors"}}
{{if .}}
<div class="space-y-3">
    {{range .}}
    <div class="bg-red-900 bg-opacity-20 border border-red-800 rounded-lg p-4">
        <div class="flex items-start gap-2">
            <i class="bx bx-error-circle text-red-400 mt-0.5"></i>
            <div class="flex-1">
                <p class="font-semibold text-red-400">{{.Message}}</p>
                <p class="text-gray-400 text-sm mt-1">{{.Timestamp}}</p>
                {{if .Details}}
                <p class="text-gray-500 text-xs mt-2 font-mono">{{.Details}}</p>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}
</div>
{{else}}
<div class="text-center py-4">
    <i class="bx bx-check-circle text-4xl text-green-400"></i>
    <p class="text-gray-400 mt-2">No recent errors</p>
</div>
{{end}}
{{end}}