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

{% load static %}

{% block title %}Delete User - {{ user.get_full_name|default:user.username }}{% endblock %}

{% block extra_css %}
<style>
    .delete-card {
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 8px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .delete-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-radius: 8px 8px 0 0;
        padding: 20px;
    }
    
    .warning-section {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .user-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .danger-list {
        list-style: none;
        padding: 0;
    }
    
    .danger-list li {
        padding: 8px 0;
        border-bottom: 1px solid #dee2e6;
    }
    
    .danger-list li:last-child {
        border-bottom: none;
    }
    
    .danger-list li i {
        color: #dc3545;
        margin-right: 10px;
    }
    
    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #dee2e6;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Delete User</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:user_detail' user.id %}">{{ user.get_full_name|default:user.username }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card delete-card">
            <div class="delete-header">
                <div class="d-flex align-items-center">
                    <i class="fe fe-alert-triangle fe-2x me-3"></i>
                    <div>
                        <h4 class="mb-1">Delete User</h4>
                        <p class="mb-0 opacity-75">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- User Information -->
                <div class="user-info">
                    <div class="d-flex align-items-center mb-3">
                        {% if user.profile.avatar %}
                            <img src="{{ user.profile.avatar.url }}" alt="{{ user.get_full_name|default:user.username }}" class="user-avatar me-3">
                        {% else %}
                            <div class="user-avatar me-3 d-flex align-items-center justify-content-center bg-light">
                                <i class="fe fe-user text-muted"></i>
                            </div>
                        {% endif %}
                        <div>
                            <h5 class="mb-1">
                                <i class="fe fe-user me-2 text-primary"></i>
                                {{ user.get_full_name|default:user.username }}
                            </h5>
                            <p class="text-muted mb-0">{{ user.email }}</p>
                        </div>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <small class="text-muted d-block">Username</small>
                            <strong>{{ user.username }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Email</small>
                            <strong>{{ user.email }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge {% if user.is_active %}bg-success{% else %}bg-danger{% endif %}">
                                {% if user.is_active %}Active{% else %}Inactive{% endif %}
                            </span>
                            {% if user.is_staff %}
                                <span class="badge bg-info">Staff</span>
                            {% endif %}
                            {% if user.is_superuser %}
                                <span class="badge bg-danger">Superuser</span>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Groups</small>
                            <strong>{{ user.groups.count }} group{{ user.groups.count|pluralize }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Date Joined</small>
                            <strong>{{ user.date_joined|date:"M d, Y" }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Last Login</small>
                            <strong>{% if user.last_login %}{{ user.last_login|date:"M d, Y" }}{% else %}Never{% endif %}</strong>
                        </div>
                    </div>
                </div>
                
                <!-- Warning Section -->
                <div class="warning-section">
                    <div class="d-flex align-items-start">
                        <i class="fe fe-alert-triangle fe-2x text-warning me-3 mt-1"></i>
                        <div>
                            <h6 class="text-warning mb-2">Warning: Permanent Deletion</h6>
                            <p class="mb-3">You are about to permanently delete this user account. This action will also remove all associated data and cannot be undone.</p>
                            
                            <h6 class="text-danger mb-2">The following will be permanently deleted:</h6>
                            <ul class="danger-list">
                                <li>
                                    <i class="fe fe-user"></i>
                                    User account and profile information
                                </li>
                                <li>
                                    <i class="fe fe-shield"></i>
                                    All permissions and group memberships
                                </li>
                                <li>
                                    <i class="fe fe-activity"></i>
                                    User activity logs and session data
                                </li>
                                <li>
                                    <i class="fe fe-file-text"></i>
                                    Any content created by this user
                                </li>
                                <li>
                                    <i class="fe fe-settings"></i>
                                    User preferences and settings
                                </li>
                            </ul>
                            
                            {% if user.is_superuser %}
                            <div class="alert alert-danger mt-3">
                                <i class="fe fe-alert-circle me-2"></i>
                                <strong>Critical Warning:</strong> This user has superuser privileges. Deleting this account may affect system administration capabilities.
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Confirmation Form -->
                <form method="post" id="deleteForm">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                            <label class="form-check-label text-danger" for="confirmDelete">
                                <strong>I understand that this action is permanent and cannot be undone</strong>
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{% url 'accounts:user_detail' user.id %}" class="btn btn-outline-secondary">
                            <i class="fe fe-arrow-left me-2"></i>Cancel
                        </a>
                        
                        <button type="submit" class="btn btn-danger" id="deleteBtn" disabled>
                            <i class="fe fe-trash-2 me-2"></i>Delete User Permanently
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Enable/disable delete button based on confirmation checkbox
    $('#confirmDelete').on('change', function() {
        $('#deleteBtn').prop('disabled', !this.checked);
    });
    
    // Add loading state to delete button on form submission
    $('#deleteForm').on('submit', function(e) {
        const deleteBtn = $('#deleteBtn');
        deleteBtn.prop('disabled', true);
        deleteBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Deleting...');
    });
    
    // Add confirmation dialog
    $('#deleteForm').on('submit', function(e) {
        if (!confirm('Are you absolutely sure you want to delete this user? This action cannot be undone.')) {
            e.preventDefault();
            const deleteBtn = $('#deleteBtn');
            deleteBtn.prop('disabled', false);
            deleteBtn.html('<i class="fe fe-trash-2 me-2"></i>Delete User Permanently');
        }
    });
});
</script>
{% endblock extra_js %}