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

{% load static %}

{% block title %}Delete Role - {{ role.name }}{% 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;
    }
    
    .role-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;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Delete Role</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:role_list' %}">Roles</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:role_detail' role.id %}">{{ role.name }}</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 Role</h4>
                        <p class="mb-0 opacity-75">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- Role Information -->
                <div class="role-info">
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <i class="fe fe-shield fe-3x text-primary"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">
                                <i class="fe fe-shield me-2 text-primary"></i>
                                {{ role.name }}
                            </h5>
                            {% if role.description %}
                                <p class="text-muted mb-0">{{ role.description }}</p>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <small class="text-muted d-block">Role Name</small>
                            <strong>{{ role.name }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Users with this Role</small>
                            <strong>{{ role.user_set.count }} user{{ role.user_set.count|pluralize }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Permissions</small>
                            <strong>{{ role.permissions.count }} permission{{ role.permissions.count|pluralize }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Created</small>
                            <strong>{{ role.date_created|date:"M d, Y"|default:"Unknown" }}</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 role. This action will affect all users assigned to this role 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-shield"></i>
                                    Role definition and configuration
                                </li>
                                <li>
                                    <i class="fe fe-users"></i>
                                    Role assignments from all users ({{ role.user_set.count }} affected user{{ role.user_set.count|pluralize }})
                                </li>
                                <li>
                                    <i class="fe fe-key"></i>
                                    All permissions associated with this role
                                </li>
                                <li>
                                    <i class="fe fe-settings"></i>
                                    Role-based access controls and restrictions
                                </li>
                            </ul>
                            
                            {% if role.user_set.count > 0 %}
                            <div class="alert alert-danger mt-3">
                                <i class="fe fe-alert-circle me-2"></i>
                                <strong>Impact Warning:</strong> {{ role.user_set.count }} user{{ role.user_set.count|pluralize }} currently have{{ role.user_set.count|pluralize:",s" }} this role. They will lose all permissions associated with this role.
                            </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:role_detail' role.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 Role 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 role? This action cannot be undone and will affect all users with this role.')) {
            e.preventDefault();
            const deleteBtn = $('#deleteBtn');
            deleteBtn.prop('disabled', false);
            deleteBtn.html('<i class="fe fe-trash-2 me-2"></i>Delete Role Permanently');
        }
    });
});
</script>
{% endblock extra_js %}