{% load i18n %}
<section class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
    <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
        <h3 class="text-lg font-bold text-navy">{% trans "Related PX Actions" %}</h3>
        {% if can_admin and complaint.is_active_status %}
        <div class="flex flex-wrap items-center gap-2">
            <a href="{% url 'actions:action_create' %}?complaint_id={{ complaint.id }}"
               class="px-3 py-2 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:opacity-90 transition inline-flex items-center gap-2 text-sm">
                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create Action" %}
            </a>
            <a href="{% url 'projects:project_create' %}?related_model=complaint&related_id={{ complaint.pk }}"
               class="px-3 py-2 bg-teal-600 text-white rounded-xl font-semibold hover:bg-teal-700 transition inline-flex items-center gap-2 text-sm">
                <i data-lucide="folder-plus" class="w-4 h-4"></i> {% trans "QI Project" %}
            </a>
            <a href="{% url 'rca:rca_create' %}?related_model=complaint&related_id={{ complaint.pk }}"
               class="px-3 py-2 bg-purple-600 text-white rounded-xl font-semibold hover:bg-purple-700 transition inline-flex items-center gap-2 text-sm">
                <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Initiate RCA" %}
            </a>
        </div>
        {% endif %}
    </div>

    {% if px_actions %}
    <div class="space-y-3">
        {% for action in px_actions %}
        <div class="bg-white border border-slate-200 rounded-xl p-4 hover:shadow-md transition">
            <div class="flex justify-between items-start">
                <div class="flex-1 min-w-0">
                    <h4 class="font-bold text-navy mb-1">{{ action.title }}</h4>
                    <p class="text-slate text-sm">{{ action.description|truncatewords:20 }}</p>
                    <div class="flex gap-2 mt-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-lg text-xs font-bold">{{ action.get_status_display }}</span>
                        <span class="px-2 py-1 bg-slate-100 text-slate-600 rounded-lg text-xs font-bold">{{ action.get_priority_display }}</span>
                    </div>
                </div>
                <a href="{% url 'actions:action_detail' action.id %}" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2 text-sm shrink-0 ml-3">
                    {% trans "View" %} <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-8 bg-slate-50 rounded-xl border border-dashed border-slate-200">
        <i data-lucide="zap" class="w-12 h-12 mx-auto text-slate-300 mb-3"></i>
        <p class="text-slate text-sm">{% trans "No PX actions created yet" %}</p>
        <p class="text-slate text-xs mt-1">{% trans "Use the buttons above to create an action, QI project, or RCA." %}</p>
    </div>
    {% endif %}
</section>