{% extends "admin/base.html" %}
{% load static %}

{% block title %}Hapus WhatsApp Template - {{ event.judul }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-xl p-4 sm:p-6 mb-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl sm:text-2xl md:text-3xl font-bold mb-2">
                    <i class="fas fa-trash mr-2"></i>Hapus WhatsApp Template
                </h1>
                <p class="text-red-100 text-sm sm:text-base">{{ event.judul }}</p>
            </div>
            <a href="{% url 'event_admin:whatsapp_templates_list' event.id %}" 
               class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-sm font-medium transition-all">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
    </div>

    <!-- Confirmation -->
    <div class="bg-white rounded-xl shadow-md p-6 sm:p-8">
        <div class="text-center mb-6">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">Konfirmasi Hapus Template</h2>
            <p class="text-gray-600">Apakah Anda yakin ingin menghapus template ini?</p>
        </div>

        <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <h3 class="font-semibold text-gray-900 mb-2">{{ template.nama }}</h3>
            <p class="text-sm text-gray-600 mb-2">
                <span class="font-medium">Tipe:</span> {{ template.get_tipe_pesan_display }}
            </p>
            <p class="text-sm text-gray-600 mb-2">
                <span class="font-medium">Status:</span> 
                {% if template.aktif %}
                <span class="text-green-600">Aktif</span>
                {% else %}
                <span class="text-gray-600">Nonaktif</span>
                {% endif %}
            </p>
            {% if template.is_default %}
            <p class="text-sm text-yellow-600 font-medium">
                <i class="fas fa-exclamation-circle mr-1"></i>Template ini adalah template default
            </p>
            {% endif %}
        </div>

        <form method="POST" class="space-y-4">
            {% csrf_token %}
            <div class="flex flex-col sm:flex-row gap-3">
                <button type="submit" 
                        class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
                    <i class="fas fa-trash mr-2"></i>Ya, Hapus Template
                </button>
                <a href="{% url 'event_admin:whatsapp_templates_list' event.id %}" 
                   class="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium text-center">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}