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

{% block title %}Access Forbidden - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
    <div class="row w-100">
        <div class="col-lg-6 mx-auto">
            <div class="text-center">
                <!-- 403 Animation -->
                <div class="error-animation mb-4">
                    <div class="error-number">
                        <span class="four">4</span>
                        <span class="zero">0</span>
                        <span class="three">3</span>
                    </div>
                    <div class="error-icon mt-3">
                        <i class="fas fa-shield-alt fa-3x text-danger"></i>
                    </div>
                </div>
                
                <!-- Error Message -->
                <div class="error-content">
                    <h1 class="display-4 fw-bold text-danger mb-3">Access Forbidden</h1>
                    <p class="lead text-muted mb-4">
                        You don't have permission to access this resource. This could be due to insufficient privileges 
                        or the resource being restricted to certain user groups.
                    </p>
                    
                    <!-- Permission Information -->
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-exclamation-triangle me-3"></i>
                            <div class="text-start">
                                <strong>Access Denied</strong><br>
                                <small>You need appropriate permissions to view this content.</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- User Status -->
                    {% if user.is_authenticated %}
                        <div class="card border-warning mb-4">
                            <div class="card-header bg-warning text-dark">
                                <h6 class="mb-0">
                                    <i class="fas fa-user me-2"></i>Current User Status
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <strong>Username:</strong> {{ user.username }}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Email:</strong> {{ user.email }}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Account Type:</strong> 
                                        {% if user.is_superuser %}
                                            <span class="badge bg-danger">Administrator</span>
                                        {% elif user.is_staff %}
                                            <span class="badge bg-warning">Staff</span>
                                        {% else %}
                                            <span class="badge bg-primary">Regular User</span>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Status:</strong> 
                                        {% if user.is_active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-danger">Inactive</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="alert alert-info" role="alert">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle me-3"></i>
                                <div class="text-start">
                                    <strong>Not Logged In</strong><br>
                                    <small>You may need to log in to access this resource.</small>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Quick Actions -->
                    <div class="row g-3 mb-4">
                        {% if not user.is_authenticated %}
                            <div class="col-md-4 col-6">
                                <a href="{% url 'accounts:login' %}" class="btn btn-primary w-100">
                                    <i class="fas fa-sign-in-alt d-block mb-1"></i>
                                    <small>Login</small>
                                </a>
                            </div>
                            <div class="col-md-4 col-6">
                                <a href="{% url 'accounts:register' %}" class="btn btn-outline-primary w-100">
                                    <i class="fas fa-user-plus d-block mb-1"></i>
                                    <small>Register</small>
                                </a>
                            </div>
                        {% else %}
                            <div class="col-md-4 col-6">
                                <a href="{% url 'accounts:dashboard' %}" class="btn btn-primary w-100">
                                    <i class="fas fa-tachometer-alt d-block mb-1"></i>
                                    <small>Dashboard</small>
                                </a>
                            </div>
                            <div class="col-md-4 col-6">
                                <a href="{% url 'accounts:profile' user.username %}" class="btn btn-outline-primary w-100">
                                    <i class="fas fa-user d-block mb-1"></i>
                                    <small>Profile</small>
                                </a>
                            </div>
                        {% endif %}
                        <div class="col-md-4 col-6">
                            <a href="/" class="btn btn-outline-success w-100">
                                <i class="fas fa-home d-block mb-1"></i>
                                <small>Home</small>
                            </a>
                        </div>
                        <div class="col-md-4 col-6">
                            <button class="btn btn-outline-info w-100" onclick="history.back()">
                                <i class="fas fa-arrow-left d-block mb-1"></i>
                                <small>Go Back</small>
                            </button>
                        </div>
                        <div class="col-md-4 col-6">
                            <a href="{% url 'accounts:contact' %}" class="btn btn-outline-warning w-100">
                                <i class="fas fa-envelope d-block mb-1"></i>
                                <small>Contact</small>
                            </a>
                        </div>
                        <div class="col-md-4 col-6">
                            <button class="btn btn-outline-secondary w-100" id="requestAccessBtn">
                                <i class="fas fa-key d-block mb-1"></i>
                                <small>Request Access</small>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Common Reasons -->
                    <div class="card border-0 bg-light mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-question-circle me-2 text-info"></i>Why am I seeing this?
                            </h5>
                            <div class="accordion" id="reasonsAccordion">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="reason1">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                            <i class="fas fa-lock me-2"></i>Insufficient Permissions
                                        </button>
                                    </h2>
                                    <div id="collapse1" class="accordion-collapse collapse" data-bs-parent="#reasonsAccordion">
                                        <div class="accordion-body">
                                            Your account doesn't have the required permissions to access this resource. 
                                            Contact your administrator to request the necessary permissions.
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="reason2">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                            <i class="fas fa-users me-2"></i>Group Restrictions
                                        </button>
                                    </h2>
                                    <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#reasonsAccordion">
                                        <div class="accordion-body">
                                            This resource is restricted to specific user groups or roles. 
                                            You may need to be added to the appropriate group to gain access.
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="reason3">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                            <i class="fas fa-clock me-2"></i>Time-based Access
                                        </button>
                                    </h2>
                                    <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#reasonsAccordion">
                                        <div class="accordion-body">
                                            Access to this resource may be time-restricted. 
                                            Check if there are specific hours when this content is available.
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="reason4">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
                                            <i class="fas fa-credit-card me-2"></i>Subscription Required
                                        </button>
                                    </h2>
                                    <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#reasonsAccordion">
                                        <div class="accordion-body">
                                            This content may require a premium subscription or specific plan. 
                                            Check your account status or upgrade your plan if necessary.
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="reason5">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
                                            <i class="fas fa-shield-alt me-2"></i>Security Restrictions
                                        </button>
                                    </h2>
                                    <div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#reasonsAccordion">
                                        <div class="accordion-body">
                                            Your access may be restricted due to security policies, 
                                            such as IP restrictions, device limitations, or security violations.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Help Section -->
                    <div class="card border-info">
                        <div class="card-header bg-info text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-life-ring me-2"></i>Need Help?
                            </h6>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                If you believe you should have access to this resource, please contact support 
                                with the following information:
                            </p>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i>The URL you were trying to access</li>
                                <li><i class="fas fa-check text-success me-2"></i>What you were trying to do</li>
                                <li><i class="fas fa-check text-success me-2"></i>Your username (if logged in)</li>
                                <li><i class="fas fa-check text-success me-2"></i>The time this error occurred</li>
                            </ul>
                            <div class="d-flex gap-2 justify-content-center flex-wrap">
                                <a href="{% url 'accounts:contact' %}" class="btn btn-info">
                                    <i class="fas fa-envelope me-1"></i>Contact Support
                                </a>
                                <button class="btn btn-outline-info" id="copyInfoBtn">
                                    <i class="fas fa-copy me-1"></i>Copy Error Info
                                </button>
                                <button class="btn btn-outline-info" id="helpChatBtn">
                                    <i class="fas fa-comments me-1"></i>Live Chat
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Security Notice -->
                    <div class="mt-4">
                        <div class="alert alert-warning" role="alert">
                            <i class="fas fa-shield-alt me-2"></i>
                            <strong>Security Notice:</strong> 
                            Repeated unauthorized access attempts may result in account restrictions. 
                            Please ensure you have the proper permissions before accessing restricted resources.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating Help Widget -->
<div class="floating-help" id="floatingHelp">
    <button class="btn btn-info rounded-circle" data-bs-toggle="tooltip" title="Get Help">
        <i class="fas fa-question"></i>
    </button>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 403 Animation Styles */
.error-animation {
    animation: fadeInDown 1s ease-out;
}

.error-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-number span {
    display: inline-block;
    animation: bounce 2s infinite;
}

.error-number .four {
    animation-delay: 0.1s;
    color: var(--bs-danger);
}

.error-number .zero {
    animation-delay: 0.2s;
    color: var(--bs-warning);
}

.error-number .three {
    animation-delay: 0.3s;
    color: var(--bs-danger);
}

.error-icon {
    animation: shake 3s ease-in-out infinite;
}

.error-content {
    animation: fadeInUp 1s ease-out 0.5s both;
}

/* Floating Help Widget */
.floating-help {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    animation: pulse 2s infinite;
}

.floating-help button {
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Hover Effects */
.btn:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.accordion-button {
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary);
    color: white;
}

.accordion-button:hover {
    background-color: var(--bs-light);
}

/* Badge animations */
.badge {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Alert animations */
.alert {
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .error-number {
        font-size: 5rem;
    }
    
    .floating-help {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-help button {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .error-number {
        font-size: 4rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bg-light {
        background-color: var(--bs-dark) !important;
        color: var(--bs-light);
    }
    
    .text-muted {
        color: var(--bs-secondary) !important;
    }
    
    .accordion-button {
        background-color: var(--bs-dark);
        color: var(--bs-light);
    }
}

/* Loading states */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Success feedback */
.success-feedback {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        background-color: var(--bs-success);
    }
    50% {
        transform: scale(1.05);
        background-color: var(--bs-success);
    }
    100% {
        transform: scale(1);
        background-color: var(--bs-success);
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Request Access functionality
    const requestAccessBtn = document.getElementById('requestAccessBtn');
    requestAccessBtn.addEventListener('click', function() {
        showRequestAccessModal();
    });
    
    // Copy error info functionality
    const copyInfoBtn = document.getElementById('copyInfoBtn');
    copyInfoBtn.addEventListener('click', function() {
        copyErrorInfo();
    });
    
    // Help chat functionality
    const helpChatBtn = document.getElementById('helpChatBtn');
    helpChatBtn.addEventListener('click', function() {
        startHelpChat();
    });
    
    // Floating help widget
    const floatingHelp = document.getElementById('floatingHelp');
    floatingHelp.addEventListener('click', function() {
        showHelpModal();
    });
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Request Access Modal
    function showRequestAccessModal() {
        const modalHtml = `
            <div class="modal fade" id="requestAccessModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-key me-2"></i>Request Access
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="accessRequestForm">
                                <div class="mb-3">
                                    <label for="resourceUrl" class="form-label">Resource URL</label>
                                    <input type="text" class="form-control" id="resourceUrl" value="${window.location.href}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="accessReason" class="form-label">Reason for Access</label>
                                    <textarea class="form-control" id="accessReason" rows="3" placeholder="Please explain why you need access to this resource..."></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="urgencyLevel" class="form-label">Urgency Level</label>
                                    <select class="form-select" id="urgencyLevel">
                                        <option value="low">Low - Can wait a few days</option>
                                        <option value="medium" selected>Medium - Needed within 24 hours</option>
                                        <option value="high">High - Urgent, needed ASAP</option>
                                        <option value="critical">Critical - Blocking important work</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="managerEmail" class="form-label">Manager/Supervisor Email (Optional)</label>
                                    <input type="email" class="form-control" id="managerEmail" placeholder="manager@company.com">
                                </div>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Your request will be reviewed by the system administrators. 
                                    You'll receive an email notification once your request is processed.
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary" id="submitAccessRequest">
                                <i class="fas fa-paper-plane me-1"></i>Submit Request
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        const existingModal = document.getElementById('requestAccessModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('requestAccessModal'));
        modal.show();
        
        // Handle form submission
        document.getElementById('submitAccessRequest').addEventListener('click', function() {
            submitAccessRequest();
        });
        
        // Clean up modal after it's hidden
        document.getElementById('requestAccessModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
    
    // Submit access request
    function submitAccessRequest() {
        const submitBtn = document.getElementById('submitAccessRequest');
        const originalText = submitBtn.innerHTML;
        
        // Show loading state
        submitBtn.classList.add('btn-loading');
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Submitting...';
        submitBtn.disabled = true;
        
        // Simulate API call
        setTimeout(() => {
            // Reset button
            submitBtn.classList.remove('btn-loading');
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
            
            // Show success message
            const modalBody = document.querySelector('#requestAccessModal .modal-body');
            modalBody.innerHTML = `
                <div class="text-center">
                    <div class="mb-3">
                        <i class="fas fa-check-circle fa-3x text-success"></i>
                    </div>
                    <h5 class="text-success">Request Submitted Successfully!</h5>
                    <p class="text-muted">
                        Your access request has been submitted and will be reviewed by our administrators. 
                        You'll receive an email notification once your request is processed.
                    </p>
                    <div class="alert alert-info">
                        <strong>Request ID:</strong> <code>REQ-${Date.now()}</code><br>
                        <strong>Estimated Response Time:</strong> 1-2 business days
                    </div>
                </div>
            `;
            
            // Update modal footer
            const modalFooter = document.querySelector('#requestAccessModal .modal-footer');
            modalFooter.innerHTML = `
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">
                    <i class="fas fa-check me-1"></i>Close
                </button>
            `;
        }, 2000);
    }
    
    // Copy error information
    function copyErrorInfo() {
        const errorInfo = {
            error: '403 Forbidden',
            url: window.location.href,
            timestamp: new Date().toISOString(),
            userAgent: navigator.userAgent,
            referrer: document.referrer || 'Direct access'
        };
        
        const infoText = `Error Information:
${Object.entries(errorInfo).map(([key, value]) => `${key}: ${value}`).join('\n')}`;
        
        navigator.clipboard.writeText(infoText).then(() => {
            // Show success feedback
            const btn = document.getElementById('copyInfoBtn');
            const originalText = btn.innerHTML;
            
            btn.classList.add('success-feedback');
            btn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
            
            setTimeout(() => {
                btn.classList.remove('success-feedback');
                btn.innerHTML = originalText;
            }, 2000);
        }).catch(() => {
            alert('Failed to copy to clipboard. Please manually copy the error information.');
        });
    }
    
    // Start help chat (placeholder)
    function startHelpChat() {
        showHelpModal();
    }
    
    // Help modal
    function showHelpModal() {
        const modalHtml = `
            <div class="modal fade" id="helpModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-life-ring me-2"></i>Access Forbidden Help
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-warning">
                                <i class="fas fa-shield-alt me-2"></i>
                                <strong>403 Forbidden</strong> - You don't have permission to access this resource.
                            </div>
                            
                            <h6>Quick Solutions:</h6>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-sign-in-alt fa-2x text-primary mb-2"></i>
                                            <h6>Login Required</h6>
                                            <p class="small text-muted">You may need to log in first</p>
                                            <a href="{% url 'accounts:login' %}" class="btn btn-outline-primary btn-sm">Login</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-key fa-2x text-warning mb-2"></i>
                                            <h6>Request Access</h6>
                                            <p class="small text-muted">Ask for permission to access</p>
                                            <button class="btn btn-outline-warning btn-sm" onclick="showRequestAccessModal()">Request</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-envelope fa-2x text-info mb-2"></i>
                                            <h6>Contact Support</h6>
                                            <p class="small text-muted">Get help from our team</p>
                                            <a href="{% url 'accounts:contact' %}" class="btn btn-outline-info btn-sm">Contact</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <i class="fas fa-home fa-2x text-success mb-2"></i>
                                            <h6>Go Home</h6>
                                            <p class="small text-muted">Return to the homepage</p>
                                            <a href="/" class="btn btn-outline-success btn-sm">Home</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <h6>Common Causes:</h6>
                            <ul>
                                <li>You're not logged in to your account</li>
                                <li>Your account doesn't have the required permissions</li>
                                <li>The resource is restricted to certain user groups</li>
                                <li>Your account may be inactive or suspended</li>
                                <li>The resource requires a premium subscription</li>
                            </ul>
                            
                            <div class="mt-3">
                                <h6>Need More Help?</h6>
                                <p>If none of the above solutions work, please contact our support team with:</p>
                                <ul>
                                    <li>The URL you were trying to access</li>
                                    <li>What you were trying to do</li>
                                    <li>Your username (if you have an account)</li>
                                    <li>When this error started occurring</li>
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Remove existing modal if any
        const existingModal = document.getElementById('helpModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('helpModal'));
        modal.show();
        
        // Clean up modal after it's hidden
        document.getElementById('helpModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Press 'h' for help
        if (e.key === 'h' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
                e.preventDefault();
                showHelpModal();
            }
        }
        
        // Press 'r' to request access
        if (e.key === 'r' && !e.ctrlKey && !e.altKey && !e.metaKey) {
            if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
                e.preventDefault();
                showRequestAccessModal();
            }
        }
        
        // Press 'c' to copy error info
        if (e.key === 'c' && e.ctrlKey && e.shiftKey) {
            e.preventDefault();
            copyErrorInfo();
        }
    });
    
    // Track 403 errors for analytics (placeholder)
    if (typeof gtag !== 'undefined') {
        gtag('event', 'access_denied', {
            'error_type': '403',
            'page_location': window.location.href,
            'page_referrer': document.referrer
        });
    }
    
    // Auto-hide floating help after some time
    setTimeout(() => {
        floatingHelp.style.opacity = '0.7';
    }, 10000);
    
    floatingHelp.addEventListener('mouseenter', function() {
        this.style.opacity = '1';
    });
    
    floatingHelp.addEventListener('mouseleave', function() {
        this.style.opacity = '0.7';
    });
    
    // Add smooth scrolling to accordion
    const accordionButtons = document.querySelectorAll('.accordion-button');
    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            setTimeout(() => {
                this.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 350);
        });
    });
    
    // Add loading states to action buttons
    const actionButtons = document.querySelectorAll('.btn[href]');
    actionButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            if (!this.href.startsWith('javascript:') && !this.href.includes('#')) {
                this.classList.add('btn-loading');
                const originalText = this.innerHTML;
                this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Loading...';
                
                // Reset after a delay (in case navigation fails)
                setTimeout(() => {
                    this.classList.remove('btn-loading');
                    this.innerHTML = originalText;
                }, 5000);
            }
        });
    });
});
</script>
{% endblock %}