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

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

{% block content %}
<div class="max-w-lg mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
        <div class="p-8 text-center">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i data-lucide="alert-triangle" class="w-8 h-8 text-red-500"></i>
            </div>
            
            <h1 class="text-2xl font-bold text-gray-800 mb-2">{% trans "Delete Subsection" %}</h1>
            <p class="text-gray-500 mb-6">
                {% blocktrans %}Are you sure you want to delete <strong>{{ subsection.name }}</strong>? This action cannot be undone.{% endblocktrans %}
            </p>
            
            <div class="bg-gray-50 rounded-xl p-4 mb-6 text-left">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-400 block text-xs uppercase font-semibold mb-1">{% trans "Name" %}</span>
                        <span class="text-gray-800 font-medium">{{ subsection.name }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 block text-xs uppercase font-semibold mb-1">{% trans "Code" %}</span>
                        <span class="text-gray-800 font-medium">{{ subsection.code|default:"-" }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 block text-xs uppercase font-semibold mb-1">{% trans "Section" %}</span>
                        <span class="text-gray-800 font-medium">{{ subsection.section.name }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 block text-xs uppercase font-semibold mb-1">{% trans "Status" %}</span>
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold {% if subsection.status == 'active' %}bg-green-100 text-green-600{% else %}bg-gray-100 text-gray-600{% endif %}">
                            {% if subsection.status == 'active' %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
                        </span>
                    </div>
                </div>
            </div>
            
            <form method="post">
                {% csrf_token %}
                <div class="flex gap-3">
                    <a href="{% url 'organizations:subsection_list' %}" class="flex-1 px-6 py-3 bg-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-300 transition">
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="flex-1 px-6 py-3 bg-red-500 text-white rounded-xl font-bold hover:bg-red-600 transition shadow-lg shadow-red-200">
                        {% trans "Delete" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}