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

{% load static %}

{% block title %}Delete Profile - {{ profile.user.get_full_name|default:profile.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;
    }
    
    .profile-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;
    }
    
    .profile-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 Profile</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:profile_list' %}">Profiles</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:profile_detail' profile.id %}">{{ profile.user.get_full_name|default:profile.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 Profile</h4>
                        <p class="mb-0 opacity-75">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            
            <div class="card-body p-4">
                <!-- Profile Information -->
                <div class="profile-info">
                    <div class="d-flex align-items-center mb-3">
                        {% if profile.avatar %}
                            <img src="{{ profile.avatar.url }}" alt="{{ profile.user.get_full_name|default:profile.user.username }}" class="profile-avatar me-3">
                        {% else %}
                            <div class="profile-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>
                                {{ profile.user.get_full_name|default:profile.user.username }}
                            </h5>
                            <p class="text-muted mb-0">{{ profile.user.email }}</p>
                        </div>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col-md-6">
                            <small class="text-muted d-block">User</small>
                            <strong>{{ profile.user.username }}</strong>
                        </div>
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Email</small>
                            <strong>{{ profile.user.email }}</strong>
                        </div>
                        
                        {% if profile.phone_number %}
                        <div class="col-md-6">
                            <small class="text-muted d-block">Phone</small>
                            <strong>{{ profile.phone_number }}</strong>
                        </div>
                        {% endif %}
                        
                        {% if profile.timezone %}
                        <div class="col-md-6">
                            <small class="text-muted d-block">Timezone</small>
                            <strong>{{ profile.get_timezone_display|default:profile.timezone }}</strong>
                        </div>
                        {% endif %}
                        
                        {% if profile.language %}
                        <div class="col-md-6">
                            <small class="text-muted d-block">Language</small>
                            <strong>{{ profile.get_language_display|default:profile.language }}</strong>
                        </div>
                        {% endif %}
                        
                        <div class="col-md-6">
                            <small class="text-muted d-block">Created</small>
                            <strong>{{ profile.created_at|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 user profile. This action will remove all profile-specific data and preferences.</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>
                                    Profile information and personal details
                                </li>
                                <li>
                                    <i class="fe fe-image"></i>
                                    Profile avatar and uploaded images
                                </li>
                                <li>
                                    <i class="fe fe-settings"></i>
                                    User preferences and customizations
                                </li>
                                <li>
                                    <i class="fe fe-globe"></i>
                                    Timezone and language settings
                                </li>
                                <li>
                                    <i class="fe fe-phone"></i>
                                    Contact information and phone numbers
                                </li>
                            </ul>
                            
                            <div class="alert alert-info mt-3">
                                <i class="fe fe-info me-2"></i>
                                <strong>Note:</strong> The associated user account will remain active. Only the profile data will be deleted.
                            </div>
                        </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:profile_detail' profile.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 Profile 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 profile? 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 Profile Permanently');
        }
    });
});
</script>
{% endblock extra_js %}