{% load i18n %}
<section class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
    <h3 class="text-lg font-bold text-navy mb-1">{% trans "Root Cause Analysis" %}</h3>
    <p class="text-xs text-slate mb-4">{% trans "Structured analysis to identify underlying causes and prevent recurrence." %}</p>

    {% if linked_rcas %}
    <div class="space-y-3">
        {% for rca in linked_rcas %}
        <a href="{% url 'rca:rca_detail' pk=rca.pk %}" class="block bg-white border border-slate-200 rounded-xl p-4 hover:border-purple-300 hover:shadow-sm transition group">
            <div class="flex items-start justify-between">
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-navy group-hover:text-purple-700 truncate">{{ rca.title }}</h4>
                    <p class="text-xs text-slate mt-1 line-clamp-2">{{ rca.description|truncatewords:20 }}</p>
                    <div class="flex flex-wrap items-center gap-2 mt-2">
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase
                            {% if rca.status == 'draft' %}bg-slate-100 text-slate-600
                            {% elif rca.status == 'in_progress' %}bg-blue-100 text-blue-700
                            {% elif rca.status == 'review' %}bg-yellow-100 text-yellow-700
                            {% elif rca.status == 'approved' %}bg-green-100 text-green-700
                            {% elif rca.status == 'closed' %}bg-gray-100 text-gray-600{% endif %}">
                            {{ rca.get_status_display }}
                        </span>
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase
                            {% if rca.severity == 'low' %}bg-green-50 text-green-600
                            {% elif rca.severity == 'medium' %}bg-yellow-50 text-yellow-600
                            {% elif rca.severity == 'high' %}bg-orange-50 text-orange-600
                            {% elif rca.severity == 'critical' %}bg-red-50 text-red-600{% endif %}">
                            {{ rca.get_severity_display }}
                        </span>
                        {% if rca.assigned_to %}
                        <span class="text-[10px] text-slate inline-flex items-center gap-0.5">
                            <i data-lucide="user" class="w-3 h-3"></i> {{ rca.assigned_to.get_full_name }}
                        </span>
                        {% endif %}
                        <span class="text-[10px] text-slate">
                            {% trans "Root Causes" %}: {{ rca.root_causes.count }} &middot;
                            {% trans "Actions" %}: {{ rca.corrective_actions.count }}
                        </span>
                    </div>
                </div>
                <div class="flex-shrink-0 ml-3 text-right">
                    <p class="text-[10px] text-slate">{{ rca.created_at|date:"M d, Y" }}</p>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-8 bg-slate-50 rounded-xl border border-dashed border-slate-200">
        <i data-lucide="search" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
        <p class="text-sm text-slate font-medium">{% trans "No Root Cause Analyses yet" %}</p>
        <p class="text-xs text-slate mt-1">{% trans "Use the Initiate RCA button above to start investigating." %}</p>
    </div>
    {% endif %}
</section>