{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Delete Project" %} - PX360{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
        <i data-lucide="arrow-left" class="w-4 h-4"></i>
        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
    </a>
</div>

<!-- Delete Confirmation Card -->
<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-xl mx-auto">
    <div class="px-6 py-4 border-b bg-red-50">
        <h1 class="text-lg font-bold text-red-600 flex items-center gap-2">
            <i data-lucide="alert-triangle" class="w-5 h-5"></i>
            {% trans "Delete Project" %}
        </h1>
    </div>
    <div class="p-6">
        <div class="text-center mb-6">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="trash-2" class="w-8 h-8 text-red-600"></i>
            </div>
            <p class="text-slate mb-2">
                {% trans "Are you sure you want to delete the project" %}
            </p>
            <p class="text-lg font-bold text-navy">"{{ project.name }}"</p>
        </div>
        
        {% if project.tasks.count > 0 %}
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
            <div class="flex items-start gap-3">
                <i data-lucide="alert-circle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
                <div>
                    <p class="text-sm font-semibold text-yellow-800">{% trans "Warning" %}</p>
                    <p class="text-xs text-yellow-700 mt-1">
                        {% blocktrans count counter=project.tasks.count %}
                            This project has {{ counter }} task that will also be deleted.
                        {% plural %}
                            This project has {{ counter }} tasks that will also be deleted.
                        {% endblocktrans %}
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        
        <form method="post" class="flex items-center justify-center gap-3">
            {% csrf_token %}
            <button type="submit" class="bg-red-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-red-700 flex items-center gap-2 transition">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
                {% trans "Yes, Delete Project" %}
            </button>
            <a href="{% url 'projects:project_detail' pk=project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
                {% trans "Cancel" %}
            </a>
        </form>
    </div>
</div>
{% endblock %}