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

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

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'projects:project_detail' pk=task.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 Task" %}
        </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 task" %}
            </p>
            <p class="text-lg font-bold text-navy">"{{ task.title }}"</p>
            <p class="text-sm text-slate mt-2">
                {% trans "from project" %} <strong>{{ task.project.name }}</strong>
            </p>
        </div>
        
        <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 Task" %}
            </button>
            <a href="{% url 'projects:project_detail' pk=task.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 %}