{% load i18n %}
<div class="space-y-4">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h3 class="text-sm font-bold text-navy">{% trans "Root Cause Analysis" %}</h3>
            <p class="text-xs text-slate mt-1">{% trans "Structured analysis to identify underlying causes and prevent recurrence." %}</p>
        </div>
        <a href="{% url 'rca:rca_create' %}?related_model=complaint&related_id={{ complaint.pk }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white text-xs font-bold rounded-xl hover:bg-purple-700 transition">
            <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Initiate RCA" %}
        </a>
    </div>

    {% 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 items-center gap-3 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">
                                <i data-lucide="user" class="w-3 h-3 inline"></i> {{ rca.assigned_to.get_full_name }}
                            </span>
                            {% endif %}
                        </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 class="mt-1 text-[10px] text-slate">
                            {% trans "Root Causes" %}: {{ rca.root_causes.count }} &middot;
                            {% trans "Actions" %}: {{ rca.corrective_actions.count }}
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-12 bg-slate-50 rounded-xl border border-dashed border-slate-200">
            <i data-lucide="search" class="w-10 h-10 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 "Initiate an RCA to investigate the root causes of this complaint." %}</p>
            <a href="{% url 'rca:rca_create' %}?related_model=complaint&related_id={{ complaint.pk }}"
               class="inline-flex items-center gap-2 mt-4 px-4 py-2 bg-purple-600 text-white text-xs font-bold rounded-xl hover:bg-purple-700 transition">
                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Initiate RCA" %}
            </a>
        </div>
    {% endif %}
</div>