{% load i18n %}
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
    <h3 class="text-xl font-bold text-navy mb-6">{% trans "Related PX Actions" %}</h3>
    
    {% if px_actions %}
    <div class="space-y-4">
        {% 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>
                    <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">
                    {% trans "View" %} <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i data-lucide="zap" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
        <p class="text-slate mb-4">{% trans "No PX actions created yet" %}</p>
        {% if can_edit and complaint.is_active_status %}
        <button onclick="createAction()" class="px-4 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">
            <i data-lucide="plus" class="w-4 h-4"></i> {% trans "Create Action" %}
        </button>
        <a href="{% url 'projects:project_create' %}?related_model=complaint&related_id={{ complaint.pk }}"
           class="px-4 py-2 bg-teal-600 text-white rounded-xl font-semibold hover:bg-teal-700 transition inline-flex items-center gap-2">
            <i data-lucide="folder-plus" class="w-4 h-4"></i> {% trans "Create QI Project" %}
        </a>
        {% endif %}
    </div>
    {% endif %}
</section>

<script>
function createAction() {
    // Redirect to action create page with complaint reference
    window.location.href = "{% url 'actions:action_create' %}?source_type=complaint&complaint_id={{ complaint.id }}";
}
</script>
