{% extends 'accounts/base.html' %}
{% load static %}

{% block title %}Account Settings - {{ block.super }}{% endblock %}

{% block content %}
<div class="row">
    <!-- Settings Navigation -->
    <div class="col-lg-3">
        <div class="card shadow">
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <div class="list-group-item bg-primary text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-cog me-2"></i>Settings
                        </h6>
                    </div>
                    
                    <a href="#profile" class="list-group-item list-group-item-action settings-tab active" data-tab="profile">
                        <i class="fas fa-user me-2"></i>Profile Information
                    </a>
                    
                    <a href="#security" class="list-group-item list-group-item-action settings-tab" data-tab="security">
                        <i class="fas fa-shield-alt me-2"></i>Security & Privacy
                    </a>
                    
                    <a href="#notifications" class="list-group-item list-group-item-action settings-tab" data-tab="notifications">
                        <i class="fas fa-bell me-2"></i>Notifications
                    </a>
                    
                    <a href="#preferences" class="list-group-item list-group-item-action settings-tab" data-tab="preferences">
                        <i class="fas fa-sliders-h me-2"></i>Preferences
                    </a>
                    
                    <a href="#billing" class="list-group-item list-group-item-action settings-tab" data-tab="billing">
                        <i class="fas fa-credit-card me-2"></i>Billing & Plans
                    </a>
                    
                    <a href="#integrations" class="list-group-item list-group-item-action settings-tab" data-tab="integrations">
                        <i class="fas fa-plug me-2"></i>Integrations
                    </a>
                    
                    <a href="#data" class="list-group-item list-group-item-action settings-tab" data-tab="data">
                        <i class="fas fa-download me-2"></i>Data & Export
                    </a>
                    
                    <a href="#danger" class="list-group-item list-group-item-action settings-tab text-danger" data-tab="danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>Danger Zone
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Settings Content -->
    <div class="col-lg-9">
        <!-- Profile Information Tab -->
        <div class="settings-content" id="profile-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user me-2"></i>Profile Information
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="profileForm">
                        {% csrf_token %}
                        <input type="hidden" name="form_type" value="profile">
                        
                        <div class="row g-3">
                            <!-- Avatar Section -->
                            <div class="col-12">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-preview me-3">
                                        <img src="{% if user.userprofile.avatar %}{{ user.userprofile.avatar.url }}{% else %}{% static 'images/default-avatar.png' %}{% endif %}" 
                                             alt="Avatar" class="rounded-circle" width="80" height="80" id="avatarPreview">
                                    </div>
                                    <div>
                                        <input type="file" class="form-control" id="avatarInput" name="avatar" accept="image/*" style="display: none;">
                                        <button type="button" class="btn btn-outline-primary btn-sm me-2" onclick="document.getElementById('avatarInput').click()">
                                            <i class="fas fa-camera me-1"></i>Change Photo
                                        </button>
                                        {% if user.userprofile.avatar %}
                                            <button type="button" class="btn btn-outline-danger btn-sm" id="removeAvatar">
                                                <i class="fas fa-trash me-1"></i>Remove
                                            </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Basic Information -->
                            <div class="col-md-6">
                                <label class="form-label">First Name</label>
                                <input type="text" class="form-control" name="first_name" value="{{ user.first_name }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Last Name</label>
                                <input type="text" class="form-control" name="last_name" value="{{ user.last_name }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Username</label>
                                <input type="text" class="form-control" name="username" value="{{ user.username }}" readonly>
                                <div class="form-text">Username cannot be changed</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <div class="input-group">
                                    <input type="email" class="form-control" name="email" value="{{ user.email }}">
                                    {% if not user.is_email_verified %}
                                        <button type="button" class="btn btn-outline-warning" id="verifyEmail">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Verify
                                        </button>
                                    {% else %}
                                        <span class="input-group-text text-success">
                                            <i class="fas fa-check-circle"></i>
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" name="phone" value="{{ user.userprofile.phone|default:'' }}">
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Date of Birth</label>
                                <input type="date" class="form-control" name="date_of_birth" value="{{ user.userprofile.date_of_birth|date:'Y-m-d' }}">
                            </div>
                            
                            <div class="col-12">
                                <label class="form-label">Bio</label>
                                <textarea class="form-control" name="bio" rows="3" maxlength="500">{{ user.userprofile.bio|default:'' }}</textarea>
                                <div class="form-text">Tell us about yourself (max 500 characters)</div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Changes
                            </button>
                            <button type="button" class="btn btn-outline-secondary ms-2" onclick="location.reload()">
                                <i class="fas fa-undo me-1"></i>Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Security & Privacy Tab -->
        <div class="settings-content d-none" id="security-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-shield-alt me-2"></i>Security & Privacy
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Password Change -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Password</h6>
                        <p class="text-muted">Keep your account secure with a strong password</p>
                        <a href="{% url 'accounts:password_change' %}" class="btn btn-outline-primary">
                            <i class="fas fa-key me-1"></i>Change Password
                        </a>
                    </div>
                    
                    <hr>
                    
                    <!-- Two-Factor Authentication -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="fw-bold">Two-Factor Authentication</h6>
                                <p class="text-muted">Add an extra layer of security to your account</p>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="twoFactorToggle" 
                                       {% if user.userprofile.two_factor_enabled %}checked{% endif %}>
                                <label class="form-check-label" for="twoFactorToggle"></label>
                            </div>
                        </div>
                        {% if not user.userprofile.two_factor_enabled %}
                            <button type="button" class="btn btn-outline-success" id="enable2FA">
                                <i class="fas fa-mobile-alt me-1"></i>Enable 2FA
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-outline-danger" id="disable2FA">
                                <i class="fas fa-times me-1"></i>Disable 2FA
                            </button>
                        {% endif %}
                    </div>
                    
                    <hr>
                    
                    <!-- Login Sessions -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Active Sessions</h6>
                        <p class="text-muted">Manage your active login sessions</p>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Device</th>
                                        <th>Location</th>
                                        <th>Last Active</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <i class="fas fa-desktop me-2"></i>Current Session
                                            <span class="badge bg-success ms-2">Active</span>
                                        </td>
                                        <td>{{ request.META.REMOTE_ADDR|default:'Unknown' }}</td>
                                        <td>Now</td>
                                        <td>-</td>
                                    </tr>
                                    <!-- Additional sessions would be listed here -->
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-outline-warning" id="terminateOtherSessions">
                            <i class="fas fa-sign-out-alt me-1"></i>Terminate Other Sessions
                        </button>
                    </div>
                    
                    <hr>
                    
                    <!-- Privacy Settings -->
                    <div>
                        <h6 class="fw-bold">Privacy Settings</h6>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="profilePublic" 
                                   {% if user.userprofile.profile_public %}checked{% endif %}>
                            <label class="form-check-label" for="profilePublic">
                                Make my profile public
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="showEmail" 
                                   {% if user.userprofile.show_email %}checked{% endif %}>
                            <label class="form-check-label" for="showEmail">
                                Show my email address to other users
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="showOnlineStatus" 
                                   {% if user.userprofile.show_online_status %}checked{% endif %}>
                            <label class="form-check-label" for="showOnlineStatus">
                                Show my online status
                            </label>
                        </div>
                        <button type="button" class="btn btn-primary" id="savePrivacySettings">
                            <i class="fas fa-save me-1"></i>Save Privacy Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Notifications Tab -->
        <div class="settings-content d-none" id="notifications-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bell me-2"></i>Notification Preferences
                    </h5>
                </div>
                <div class="card-body">
                    <form id="notificationForm">
                        {% csrf_token %}
                        
                        <!-- Email Notifications -->
                        <div class="mb-4">
                            <h6 class="fw-bold">Email Notifications</h6>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="emailGeneral" checked>
                                <label class="form-check-label" for="emailGeneral">
                                    General updates and announcements
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="emailSecurity" checked>
                                <label class="form-check-label" for="emailSecurity">
                                    Security alerts and login notifications
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="emailMarketing">
                                <label class="form-check-label" for="emailMarketing">
                                    Marketing and promotional emails
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="emailWeekly">
                                <label class="form-check-label" for="emailWeekly">
                                    Weekly digest and reports
                                </label>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- Push Notifications -->
                        <div class="mb-4">
                            <h6 class="fw-bold">Push Notifications</h6>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="pushMessages">
                                <label class="form-check-label" for="pushMessages">
                                    New messages and mentions
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="pushUpdates">
                                <label class="form-check-label" for="pushUpdates">
                                    Important updates
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="pushReminders">
                                <label class="form-check-label" for="pushReminders">
                                    Reminders and deadlines
                                </label>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- Notification Frequency -->
                        <div class="mb-4">
                            <h6 class="fw-bold">Notification Frequency</h6>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="frequency" id="freqImmediate" value="immediate" checked>
                                <label class="form-check-label" for="freqImmediate">
                                    Immediate - Get notified right away
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="frequency" id="freqHourly" value="hourly">
                                <label class="form-check-label" for="freqHourly">
                                    Hourly - Receive notifications every hour
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="frequency" id="freqDaily" value="daily">
                                <label class="form-check-label" for="freqDaily">
                                    Daily - Get a daily summary
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="frequency" id="freqWeekly" value="weekly">
                                <label class="form-check-label" for="freqWeekly">
                                    Weekly - Receive weekly summaries only
                                </label>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Save Notification Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Preferences Tab -->
        <div class="settings-content d-none" id="preferences-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-sliders-h me-2"></i>Preferences
                    </h5>
                </div>
                <div class="card-body">
                    <form id="preferencesForm">
                        {% csrf_token %}
                        
                        <div class="row g-3">
                            <!-- Language -->
                            <div class="col-md-6">
                                <label class="form-label">Language</label>
                                <select class="form-select" name="language">
                                    <option value="en" {% if user.userprofile.language == 'en' %}selected{% endif %}>English</option>
                                    <option value="es" {% if user.userprofile.language == 'es' %}selected{% endif %}>Español</option>
                                    <option value="fr" {% if user.userprofile.language == 'fr' %}selected{% endif %}>Français</option>
                                    <option value="de" {% if user.userprofile.language == 'de' %}selected{% endif %}>Deutsch</option>
                                    <option value="it" {% if user.userprofile.language == 'it' %}selected{% endif %}>Italiano</option>
                                    <option value="pt" {% if user.userprofile.language == 'pt' %}selected{% endif %}>Português</option>
                                </select>
                            </div>
                            
                            <!-- Timezone -->
                            <div class="col-md-6">
                                <label class="form-label">Timezone</label>
                                <select class="form-select" name="timezone">
                                    <option value="UTC" {% if user.userprofile.timezone == 'UTC' %}selected{% endif %}>UTC</option>
                                    <option value="America/New_York" {% if user.userprofile.timezone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                                    <option value="America/Chicago" {% if user.userprofile.timezone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                                    <option value="America/Denver" {% if user.userprofile.timezone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                                    <option value="America/Los_Angeles" {% if user.userprofile.timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                                    <option value="Europe/London" {% if user.userprofile.timezone == 'Europe/London' %}selected{% endif %}>London</option>
                                    <option value="Europe/Paris" {% if user.userprofile.timezone == 'Europe/Paris' %}selected{% endif %}>Paris</option>
                                    <option value="Asia/Tokyo" {% if user.userprofile.timezone == 'Asia/Tokyo' %}selected{% endif %}>Tokyo</option>
                                </select>
                            </div>
                            
                            <!-- Date Format -->
                            <div class="col-md-6">
                                <label class="form-label">Date Format</label>
                                <select class="form-select" name="date_format">
                                    <option value="MM/DD/YYYY">MM/DD/YYYY (US)</option>
                                    <option value="DD/MM/YYYY">DD/MM/YYYY (EU)</option>
                                    <option value="YYYY-MM-DD">YYYY-MM-DD (ISO)</option>
                                </select>
                            </div>
                            
                            <!-- Time Format -->
                            <div class="col-md-6">
                                <label class="form-label">Time Format</label>
                                <select class="form-select" name="time_format">
                                    <option value="12">12-hour (AM/PM)</option>
                                    <option value="24">24-hour</option>
                                </select>
                            </div>
                            
                            <!-- Theme -->
                            <div class="col-md-6">
                                <label class="form-label">Theme</label>
                                <select class="form-select" name="theme">
                                    <option value="light">Light</option>
                                    <option value="dark">Dark</option>
                                    <option value="auto">Auto (System)</option>
                                </select>
                            </div>
                            
                            <!-- Items per page -->
                            <div class="col-md-6">
                                <label class="form-label">Items per page</label>
                                <select class="form-select" name="items_per_page">
                                    <option value="10">10</option>
                                    <option value="25" selected>25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Preferences
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Billing & Plans Tab -->
        <div class="settings-content d-none" id="billing-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>Billing & Plans
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Current Plan -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Current Plan</h6>
                        <div class="card border-primary">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="card-title text-primary">Free Plan</h5>
                                        <p class="card-text text-muted">Basic features for personal use</p>
                                        <ul class="list-unstyled">
                                            <li><i class="fas fa-check text-success me-2"></i>Up to 5 projects</li>
                                            <li><i class="fas fa-check text-success me-2"></i>1GB storage</li>
                                            <li><i class="fas fa-check text-success me-2"></i>Basic support</li>
                                        </ul>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="text-primary">$0<small class="text-muted">/month</small></h3>
                                        <button class="btn btn-outline-primary">
                                            <i class="fas fa-arrow-up me-1"></i>Upgrade
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Payment Method -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Payment Method</h6>
                        <p class="text-muted">No payment method on file</p>
                        <button class="btn btn-outline-primary">
                            <i class="fas fa-plus me-1"></i>Add Payment Method
                        </button>
                    </div>
                    
                    <!-- Billing History -->
                    <div>
                        <h6 class="fw-bold">Billing History</h6>
                        <div class="text-center py-4">
                            <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No billing history available</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Integrations Tab -->
        <div class="settings-content d-none" id="integrations-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-plug me-2"></i>Integrations
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <!-- Google Integration -->
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fab fa-google fa-3x text-danger mb-3"></i>
                                    <h6>Google</h6>
                                    <p class="text-muted small">Connect your Google account for easy sign-in</p>
                                    <button class="btn btn-outline-danger btn-sm">
                                        <i class="fas fa-link me-1"></i>Connect
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- GitHub Integration -->
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fab fa-github fa-3x text-dark mb-3"></i>
                                    <h6>GitHub</h6>
                                    <p class="text-muted small">Import projects from GitHub repositories</p>
                                    <button class="btn btn-outline-dark btn-sm">
                                        <i class="fas fa-link me-1"></i>Connect
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Slack Integration -->
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fab fa-slack fa-3x text-info mb-3"></i>
                                    <h6>Slack</h6>
                                    <p class="text-muted small">Get notifications in your Slack workspace</p>
                                    <button class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-link me-1"></i>Connect
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Discord Integration -->
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <i class="fab fa-discord fa-3x text-primary mb-3"></i>
                                    <h6>Discord</h6>
                                    <p class="text-muted small">Connect with your Discord community</p>
                                    <button class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-link me-1"></i>Connect
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Data & Export Tab -->
        <div class="settings-content d-none" id="data-content">
            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-download me-2"></i>Data & Export
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Export Data -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Export Your Data</h6>
                        <p class="text-muted">Download a copy of your data in various formats</p>
                        <div class="row g-2">
                            <div class="col-auto">
                                <button class="btn btn-outline-primary">
                                    <i class="fas fa-file-csv me-1"></i>Export as CSV
                                </button>
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-outline-success">
                                    <i class="fas fa-file-excel me-1"></i>Export as Excel
                                </button>
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-outline-info">
                                    <i class="fas fa-file-code me-1"></i>Export as JSON
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <!-- Data Usage -->
                    <div class="mb-4">
                        <h6 class="fw-bold">Data Usage</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="text-center">
                                    <i class="fas fa-database fa-2x text-primary mb-2"></i>
                                    <h5>1.2 GB</h5>
                                    <p class="text-muted small">Total Storage Used</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <i class="fas fa-file fa-2x text-success mb-2"></i>
                                    <h5>156</h5>
                                    <p class="text-muted small">Files Uploaded</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <i class="fas fa-clock fa-2x text-warning mb-2"></i>
                                    <h5>24h</h5>
                                    <p class="text-muted small">Time Spent</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <!-- Import Data -->
                    <div>
                        <h6 class="fw-bold">Import Data</h6>
                        <p class="text-muted">Import data from other platforms</p>
                        <div class="mb-3">
                            <input type="file" class="form-control" accept=".csv,.json,.xlsx" id="importFile">
                            <div class="form-text">Supported formats: CSV, JSON, Excel</div>
                        </div>
                        <button class="btn btn-outline-primary" id="importData">
                            <i class="fas fa-upload me-1"></i>Import Data
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Danger Zone Tab -->
        <div class="settings-content d-none" id="danger-content">
            <div class="card shadow border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Danger Zone
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Deactivate Account -->
                    <div class="mb-4">
                        <h6 class="fw-bold text-warning">Deactivate Account</h6>
                        <p class="text-muted">
                            Temporarily disable your account. You can reactivate it anytime by logging in.
                        </p>
                        <button class="btn btn-outline-warning" id="deactivateAccount">
                            <i class="fas fa-pause me-1"></i>Deactivate Account
                        </button>
                    </div>
                    
                    <hr>
                    
                    <!-- Delete Account -->
                    <div>
                        <h6 class="fw-bold text-danger">Delete Account</h6>
                        <p class="text-muted">
                            Permanently delete your account and all associated data. This action cannot be undone.
                        </p>
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Warning:</strong> This will permanently delete:
                            <ul class="mb-0 mt-2">
                                <li>Your profile and personal information</li>
                                <li>All your projects and files</li>
                                <li>Your billing history and subscriptions</li>
                                <li>All associated data and settings</li>
                            </ul>
                        </div>
                        <button class="btn btn-danger" id="deleteAccount">
                            <i class="fas fa-trash me-1"></i>Delete Account Permanently
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modals -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">Are you sure you want to proceed?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmAction">Confirm</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab switching
    const settingsTabs = document.querySelectorAll('.settings-tab');
    const settingsContents = document.querySelectorAll('.settings-content');
    
    settingsTabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all tabs
            settingsTabs.forEach(t => t.classList.remove('active'));
            // Add active class to clicked tab
            this.classList.add('active');
            
            // Hide all content
            settingsContents.forEach(content => content.classList.add('d-none'));
            // Show selected content
            const targetTab = this.dataset.tab;
            document.getElementById(targetTab + '-content').classList.remove('d-none');
            
            // Update URL hash
            window.location.hash = targetTab;
        });
    });
    
    // Load tab from URL hash
    if (window.location.hash) {
        const hash = window.location.hash.substring(1);
        const targetTab = document.querySelector(`[data-tab="${hash}"]`);
        if (targetTab) {
            targetTab.click();
        }
    }
    
    // Avatar preview
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');
    
    if (avatarInput) {
        avatarInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    }
    
    // Remove avatar
    const removeAvatarBtn = document.getElementById('removeAvatar');
    if (removeAvatarBtn) {
        removeAvatarBtn.addEventListener('click', function() {
            showConfirmModal('Remove Avatar', 'Are you sure you want to remove your profile picture?', function() {
                // Add logic to remove avatar
                avatarPreview.src = '{% static "images/default-avatar.png" %}';
                removeAvatarBtn.style.display = 'none';
            });
        });
    }
    
    // Email verification
    const verifyEmailBtn = document.getElementById('verifyEmail');
    if (verifyEmailBtn) {
        verifyEmailBtn.addEventListener('click', function() {
            this.innerHTML = '<span class="loading me-1"></span>Sending...';
            this.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check me-1"></i>Sent!';
                this.classList.remove('btn-outline-warning');
                this.classList.add('btn-outline-success');
                
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i>Verify';
                    this.classList.remove('btn-outline-success');
                    this.classList.add('btn-outline-warning');
                    this.disabled = false;
                }, 3000);
            }, 2000);
        });
    }
    
    // Two-Factor Authentication
    const twoFactorToggle = document.getElementById('twoFactorToggle');
    const enable2FABtn = document.getElementById('enable2FA');
    const disable2FABtn = document.getElementById('disable2FA');
    
    if (enable2FABtn) {
        enable2FABtn.addEventListener('click', function() {
            showConfirmModal('Enable 2FA', 'This will add an extra layer of security to your account. Continue?', function() {
                // Add logic to enable 2FA
                alert('2FA setup process would start here');
            });
        });
    }
    
    if (disable2FABtn) {
        disable2FABtn.addEventListener('click', function() {
            showConfirmModal('Disable 2FA', 'This will remove the extra security layer from your account. Are you sure?', function() {
                // Add logic to disable 2FA
                alert('2FA would be disabled');
            });
        });
    }
    
    // Terminate other sessions
    const terminateSessionsBtn = document.getElementById('terminateOtherSessions');
    if (terminateSessionsBtn) {
        terminateSessionsBtn.addEventListener('click', function() {
            showConfirmModal('Terminate Sessions', 'This will log you out from all other devices. Continue?', function() {
                // Add logic to terminate sessions
                alert('Other sessions would be terminated');
            });
        });
    }
    
    // Privacy settings
    const savePrivacyBtn = document.getElementById('savePrivacySettings');
    if (savePrivacyBtn) {
        savePrivacyBtn.addEventListener('click', function() {
            const profilePublic = document.getElementById('profilePublic').checked;
            const showEmail = document.getElementById('showEmail').checked;
            const showOnlineStatus = document.getElementById('showOnlineStatus').checked;
            
            // Add logic to save privacy settings
            this.innerHTML = '<span class="loading me-1"></span>Saving...';
            this.disabled = true;
            
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check me-1"></i>Saved!';
                this.classList.remove('btn-primary');
                this.classList.add('btn-success');
                
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-save me-1"></i>Save Privacy Settings';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-primary');
                    this.disabled = false;
                }, 2000);
            }, 1000);
        });
    }
    
    // Account deactivation
    const deactivateBtn = document.getElementById('deactivateAccount');
    if (deactivateBtn) {
        deactivateBtn.addEventListener('click', function() {
            showConfirmModal('Deactivate Account', 'Your account will be temporarily disabled. You can reactivate it by logging in. Continue?', function() {
                // Add logic to deactivate account
                alert('Account would be deactivated');
            });
        });
    }
    
    // Account deletion
    const deleteBtn = document.getElementById('deleteAccount');
    if (deleteBtn) {
        deleteBtn.addEventListener('click', function() {
            showConfirmModal('Delete Account', 'This action cannot be undone. All your data will be permanently deleted. Type "DELETE" to confirm:', function() {
                // Add logic to delete account
                alert('Account would be deleted');
            }, true);
        });
    }
    
    // Form submissions
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="loading me-1"></span>Saving...';
            submitBtn.disabled = true;
            
            // Simulate form submission
            setTimeout(() => {
                submitBtn.innerHTML = '<i class="fas fa-check me-1"></i>Saved!';
                submitBtn.classList.add('btn-success');
                submitBtn.classList.remove('btn-primary');
                
                setTimeout(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.classList.remove('btn-success');
                    submitBtn.classList.add('btn-primary');
                    submitBtn.disabled = false;
                }, 2000);
            }, 1500);
        });
    });
    
    // Import data
    const importBtn = document.getElementById('importData');
    const importFile = document.getElementById('importFile');
    
    if (importBtn) {
        importBtn.addEventListener('click', function() {
            if (!importFile.files.length) {
                alert('Please select a file to import');
                return;
            }
            
            this.innerHTML = '<span class="loading me-1"></span>Importing...';
            this.disabled = true;
            
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check me-1"></i>Imported!';
                this.classList.remove('btn-outline-primary');
                this.classList.add('btn-outline-success');
                
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-upload me-1"></i>Import Data';
                    this.classList.remove('btn-outline-success');
                    this.classList.add('btn-outline-primary');
                    this.disabled = false;
                    importFile.value = '';
                }, 3000);
            }, 2000);
        });
    }
    
    // Confirmation modal
    function showConfirmModal(title, message, callback, requiresTyping = false) {
        const modal = document.getElementById('confirmModal');
        const modalTitle = modal.querySelector('.modal-title');
        const modalMessage = modal.querySelector('#confirmMessage');
        const confirmBtn = modal.querySelector('#confirmAction');
        
        modalTitle.textContent = title;
        
        if (requiresTyping) {
            modalMessage.innerHTML = `
                ${message}
                <div class="mt-3">
                    <input type="text" class="form-control" id="confirmInput" placeholder="Type DELETE to confirm">
                </div>
            `;
            
            const confirmInput = modal.querySelector('#confirmInput');
            confirmBtn.disabled = true;
            
            confirmInput.addEventListener('input', function() {
                confirmBtn.disabled = this.value !== 'DELETE';
            });
        } else {
            modalMessage.textContent = message;
            confirmBtn.disabled = false;
        }
        
        confirmBtn.onclick = function() {
            callback();
            bootstrap.Modal.getInstance(modal).hide();
        };
        
        new bootstrap.Modal(modal).show();
    }
    
    // Add fade-in animation
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 * (index + 1));
    });
});
</script>
{% endblock %}