{% extends 'auth/dashboard.html' %}
{% load static %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 py-12">
    <div class="bg-white rounded-xl shadow-lg p-8">
        <!-- Warning Icon -->
        <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-100 mb-4">
                <i class="fas fa-exclamation-triangle text-red-600 text-4xl"></i>
            </div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">
                Delete Group
            </h1>
            <p class="text-gray-600">
                This action cannot be undone
            </p>
        </div>

        <!-- Group Info -->
        <div class="bg-gray-50 rounded-lg p-6 mb-6 border border-gray-200">
            <h2 class="text-lg font-bold text-gray-800 mb-4">
                Group Details
            </h2>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Name:</span>
                    <span class="font-medium text-gray-800">{{ group.name }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Registration No:</span>
                    <span class="font-medium text-gray-800">{{ group.registration_number }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Location:</span>
                    <span class="font-medium text-gray-800">{{ group.location }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Members:</span>
                    <span class="font-medium text-gray-800">{{ group.memberships.count }}</span>
                </div>
            </div>
        </div>

        <!-- Warning Message -->
        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <h3 class="font-bold text-red-800 mb-2 flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                Warning
            </h3>
            <ul class="text-sm text-red-700 space-y-1 ml-6 list-disc">
                <li>This will permanently delete the group <strong>{{ group.name }}</strong></li>
                <li>All {{ group.memberships.count }} member(s) will be removed from this group</li>
                <li>Group history and data will be preserved but marked as inactive</li>
                <li>This action cannot be undone</li>
            </ul>
        </div>

        <!-- Confirmation Form -->
        <form method="post" class="space-y-6">
            {% csrf_token %}
            
            <div class="flex gap-3 justify-center">
                <a href="{% url 'contract_market_place:manage_group' group.id %}"
                   class="px-6 py-3 rounded-lg bg-gray-500 text-white hover:bg-gray-600 transition font-medium shadow-md">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Cancel
                </a>
                <button type="submit"
                        class="px-6 py-3 rounded-lg bg-red-600 text-white hover:bg-red-700 transition font-bold shadow-md">
                    <i class="fas fa-trash mr-2"></i>
                    Yes, Delete Group
                </button>
            </div>
        </form>

        <p class="text-xs text-center text-gray-500 mt-6">
            <i class="fas fa-shield-alt mr-1"></i>
            This is a secure operation and requires administrative privileges
        </p>
    </div>
</div>
{% endblock %}