{% extends "shared/base_dashboard.html" %}
{% block title %}Excluir Tarefa - Chaplin{% endblock %}

{% block content %}
<div class="p-8 max-w-2xl mx-auto">
    <div class="mb-8">
        <a href="{% url 'tasks:detail' task.pk %}" class="text-gray-500 hover:text-orange-500 font-medium mb-4 inline-block">&larr; Voltar para Detalhes</a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Excluir Tarefa</h1>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-red-200 dark:border-red-800 p-6">
        <div class="flex items-start gap-4 mb-6">
            <div class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Tem certeza que deseja excluir esta tarefa?</h2>
                <p class="text-gray-600 dark:text-gray-400">Esta ação é <strong class="text-red-600">irreversível</strong>. A tarefa, suas evidências, mensagens e notificações relacionadas serão removidas permanentemente.</p>
            </div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-6 border border-gray-200 dark:border-gray-700">
            <p class="text-sm text-gray-500 dark:text-gray-400">Tarefa a ser excluída:</p>
            <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ task.title }}</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Status: {{ task.get_status_display }} · Prioridade: {{ task.get_priority_display }}</p>
        </div>

        <div class="flex gap-4">
            <a href="{% url 'tasks:detail' task.pk %}" class="w-full text-center bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 font-semibold py-3 px-4 rounded-lg transition duration-200">
                Cancelar
            </a>
            <form method="POST" class="w-full">
                {% csrf_token %}
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-4 rounded-lg transition shadow-md flex justify-center items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                    Excluir Permanentemente
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}