{% extends "module_base.html" %}
{% load static %}

{% block title %}Delete User - {{ user.username }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Delete User: {{ user.username }}
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger">
                        <h6><i class="fas fa-warning me-2"></i>Warning!</h6>
                        <p>You are about to delete the user <strong>{{ user.username }}</strong>. This action cannot be undone.</p>

                        <p>The following data will be permanently deleted:</p>
                        <ul class="mb-0">
                            <li>User account and profile information</li>
                            <li>All role assignments</li>
                            <li>All permission assignments</li>
                            <li>Any data associated with this user</li>
                        </ul>
                    </div>

                    <div class="card mt-3">
                        <div class="card-body">
                            <h6>User Information:</h6>
                            <table class="table table-sm">
                                <tr>
                                    <th>Username:</th>
                                    <td>{{ user.username }}</td>
                                </tr>
                                <tr>
                                    <th>Full Name:</th>
                                    <td>{{ user.first_name }} {{ user.last_name }}</td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td>{{ user.email|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Status:</th>
                                    <td>
                                        {% if user.is_active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Inactive</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Roles:</th>
                                    <td>
                                        {% for user_role in user.userrole_set.all %}
                                            <span class="badge bg-info">{{ user_role.role.name }}</span>
                                        {% empty %}
                                            <span class="text-muted">No roles assigned</span>
                                        {% endfor %}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="mt-4 d-flex justify-content-between">
                        <a href="{% url 'accounts:user_detail' user.id %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Cancel
                        </a>

                        <form method="post" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-danger"
                                    onclick="return confirm('Are you sure you want to delete this user? This action cannot be undone.')">
                                <i class="fas fa-trash me-2"></i>Yes, Delete User
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}