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

{% block title %}Password Change Details - Account Security{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>
                            <a href="{% url 'accounts:password_history_list' %}" class="me-3">
                                <i class="fas fa-arrow-left"></i>
                            </a>
                            Password Change Details
                        </h4>
                        <h6>Detailed information about this password change event</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-outline-primary me-2" onclick="generateSecurityReport()">
                            <i class="fas fa-file-alt me-1"></i>Security Report
                        </button>
                        <button class="btn btn-outline-secondary" onclick="printDetails()">
                            <i class="fas fa-print me-1"></i>Print
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Main Details -->
            <div class="col-lg-8 col-md-12">
                <!-- Change Summary -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            Change Summary
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="change-summary">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="summary-item mb-4">
                                        <div class="d-flex align-items-center">
                                            {% if object.change_type == 'user_initiated' %}
                                                <i class="fas fa-user fa-2x text-primary me-3"></i>
                                            {% elif object.change_type == 'admin_reset' %}
                                                <i class="fas fa-user-shield fa-2x text-info me-3"></i>
                                            {% elif object.change_type == 'forced_change' %}
                                                <i class="fas fa-exclamation-triangle fa-2x text-warning me-3"></i>
                                            {% elif object.change_type == 'security_breach' %}
                                                <i class="fas fa-shield-alt fa-2x text-danger me-3"></i>
                                            {% endif %}
                                            <div>
                                                <h6 class="mb-1">Change Type</h6>
                                                <span class="badge 
                                                    {% if object.change_type == 'user_initiated' %}bg-primary
                                                    {% elif object.change_type == 'admin_reset' %}bg-info
                                                    {% elif object.change_type == 'forced_change' %}bg-warning
                                                    {% elif object.change_type == 'security_breach' %}bg-danger
                                                    {% endif %}">
                                                    {{ object.change_type|default:"User Initiated"|title }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="summary-item mb-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-calendar-alt fa-2x text-success me-3"></i>
                                            <div>
                                                <h6 class="mb-1">Date & Time</h6>
                                                <div>
                                                    <strong>{{ object.created_at|default:"Mar 01, 2024 02:30 PM"|date:"M d, Y g:i A" }}</strong>
                                                    <small class="d-block text-muted">{{ object.created_at|default:"45 days ago"|timesince }} ago</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="summary-item mb-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-network-wired fa-2x text-info me-3"></i>
                                            <div>
                                                <h6 class="mb-1">IP Address</h6>
                                                <div>
                                                    <code>{{ object.ip_address|default:"192.168.1.100" }}</code>
                                                    <small class="d-block text-muted">{{ object.network_type|default:"Home Network" }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="summary-item mb-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-shield-alt fa-2x text-success me-3"></i>
                                            <div>
                                                <h6 class="mb-1">Security Score</h6>
                                                <div>
                                                    <div class="progress mb-1" style="height: 8px; width: 120px;">
                                                        <div class="progress-bar bg-success" style="width: {{ object.security_score|default:85 }}%"></div>
                                                    </div>
                                                    <strong class="text-success">{{ object.security_score|default:85 }}% Strong</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Location & Device Information -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-map-marker-alt me-2"></i>
                            Location & Device Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="location-details">
                                    <h6 class="mb-3">
                                        <i class="fas fa-globe me-2"></i>Geographic Location
                                    </h6>
                                    <div class="location-info">
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Country:</span>
                                                <strong>{{ object.country|default:"United States" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">State/Region:</span>
                                                <strong>{{ object.region|default:"New York" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">City:</span>
                                                <strong>{{ object.city|default:"New York" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">ISP:</span>
                                                <strong>{{ object.isp|default:"Verizon Communications" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Timezone:</span>
                                                <strong>{{ object.timezone|default:"EST (UTC-5)" }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="device-details">
                                    <h6 class="mb-3">
                                        <i class="fas fa-desktop me-2"></i>Device & Browser
                                    </h6>
                                    <div class="device-info">
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Device Type:</span>
                                                <strong>
                                                    <i class="fas fa-desktop text-primary me-1"></i>
                                                    {{ object.device_type|default:"Desktop" }}
                                                </strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Operating System:</span>
                                                <strong>{{ object.os|default:"Windows 11" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Browser:</span>
                                                <strong>{{ object.browser|default:"Chrome 122.0" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item mb-3">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">Screen Resolution:</span>
                                                <strong>{{ object.screen_resolution|default:"1920x1080" }}</strong>
                                            </div>
                                        </div>
                                        <div class="info-item">
                                            <div class="d-flex justify-content-between">
                                                <span class="text-muted">User Agent:</span>
                                                <small class="text-truncate" style="max-width: 200px;" title="{{ object.user_agent|default:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' }}">
                                                    {{ object.user_agent|default:"Mozilla/5.0 (Windows NT 10.0; Win64; x64)..." }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Password Security Analysis -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-lock me-2"></i>
                            Password Security Analysis
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="security-analysis">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="analysis-section">
                                        <h6 class="mb-3">
                                            <i class="fas fa-chart-bar me-2"></i>Strength Metrics
                                        </h6>
                                        <div class="metric-item mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span>Length</span>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress me-2" style="width: 100px; height: 6px;">
                                                        <div class="progress-bar bg-success" style="width: 90%"></div>
                                                    </div>
                                                    <span class="badge bg-success">Excellent</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="metric-item mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span>Complexity</span>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress me-2" style="width: 100px; height: 6px;">
                                                        <div class="progress-bar bg-success" style="width: 85%"></div>
                                                    </div>
                                                    <span class="badge bg-success">Strong</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="metric-item mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span>Uniqueness</span>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress me-2" style="width: 100px; height: 6px;">
                                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
                                                    </div>
                                                    <span class="badge bg-warning">Good</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="metric-item">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span>Dictionary Check</span>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress me-2" style="width: 100px; height: 6px;">
                                                        <div class="progress-bar bg-success" style="width: 95%"></div>
                                                    </div>
                                                    <span class="badge bg-success">Passed</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="analysis-section">
                                        <h6 class="mb-3">
                                            <i class="fas fa-shield-alt me-2"></i>Security Features
                                        </h6>
                                        <div class="feature-item mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-check-circle text-success me-2"></i>
                                                <span>Contains uppercase letters</span>
                                            </div>
                                        </div>
                                        <div class="feature-item mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-check-circle text-success me-2"></i>
                                                <span>Contains lowercase letters</span>
                                            </div>
                                        </div>
                                        <div class="feature-item mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-check-circle text-success me-2"></i>
                                                <span>Contains numbers</span>
                                            </div>
                                        </div>
                                        <div class="feature-item mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-check-circle text-success me-2"></i>
                                                <span>Contains special characters</span>
                                            </div>
                                        </div>
                                        <div class="feature-item mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-times-circle text-warning me-2"></i>
                                                <span>No common patterns detected</span>
                                            </div>
                                        </div>
                                        <div class="feature-item">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-check-circle text-success me-2"></i>
                                                <span>Not in breach databases</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Change Context -->
                {% if object.change_reason or object.notes %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-comment-alt me-2"></i>
                            Change Context
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if object.change_reason %}
                        <div class="context-item mb-3">
                            <h6>Reason for Change</h6>
                            <p class="text-muted">{{ object.change_reason|default:"User requested password update for enhanced security." }}</p>
                        </div>
                        {% endif %}
                        
                        {% if object.notes %}
                        <div class="context-item">
                            <h6>Additional Notes</h6>
                            <p class="text-muted">{{ object.notes|default:"Password changed successfully with no issues detected." }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4 col-md-12">
                <!-- Security Status -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Security Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="security-status">
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Risk Level</span>
                                    <span class="badge 
                                        {% if object.risk_level == 'low' %}bg-success
                                        {% elif object.risk_level == 'medium' %}bg-warning
                                        {% elif object.risk_level == 'high' %}bg-danger
                                        {% else %}bg-success
                                        {% endif %}">
                                        {{ object.risk_level|default:"Low"|title }}
                                    </span>
                                </div>
                            </div>
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Verification Status</span>
                                    <span class="badge bg-success">
                                        <i class="fas fa-check-circle me-1"></i>Verified
                                    </span>
                                </div>
                            </div>
                            <div class="status-item mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Location Trust</span>
                                    <span class="badge 
                                        {% if object.location_trusted %}bg-success
                                        {% else %}bg-warning
                                        {% endif %}">
                                        {% if object.location_trusted|default:True %}Trusted{% else %}Unknown{% endif %}
                                    </span>
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Device Trust</span>
                                    <span class="badge 
                                        {% if object.device_trusted %}bg-success
                                        {% else %}bg-warning
                                        {% endif %}">
                                        {% if object.device_trusted|default:True %}Trusted{% else %}Unknown{% endif %}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Related Events -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-history me-2"></i>
                            Related Events
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-marker bg-primary"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Password Changed</h6>
                                    <small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:30 PM"|date:"M d, Y g:i A" }}</small>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-marker bg-info"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Email Notification Sent</h6>
                                    <small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:31 PM"|date:"M d, Y g:i A" }}</small>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-marker bg-success"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Security Verification</h6>
                                    <small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:32 PM"|date:"M d, Y g:i A" }}</small>
                                </div>
                            </div>
                            {% if object.change_type == 'security_breach' %}
                            <div class="timeline-item">
                                <div class="timeline-marker bg-danger"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Security Alert Triggered</h6>
                                    <small class="text-muted">{{ object.created_at|default:"Mar 01, 2024 02:25 PM"|date:"M d, Y g:i A" }}</small>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-bolt me-2"></i>
                            Quick Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary" onclick="generateSecurityReport()">
                                <i class="fas fa-file-alt me-2"></i>Generate Security Report
                            </button>
                            <button class="btn btn-outline-info" onclick="checkSimilarEvents()">
                                <i class="fas fa-search me-2"></i>Find Similar Events
                            </button>
                            <button class="btn btn-outline-warning" onclick="flagForReview()">
                                <i class="fas fa-flag me-2"></i>Flag for Review
                            </button>
                            {% if object.change_type == 'security_breach' %}
                            <button class="btn btn-outline-danger" onclick="viewIncidentReport()">
                                <i class="fas fa-exclamation-triangle me-2"></i>View Incident Report
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Security Recommendations -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-lightbulb me-2"></i>
                            Security Recommendations
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="recommendations">
                            <div class="recommendation-item mb-3">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-shield-alt text-success me-2 mt-1"></i>
                                    <div>
                                        <small><strong>Enable 2FA</strong></small>
                                        <p class="text-muted small mb-0">Add an extra layer of security to your account.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="recommendation-item mb-3">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-clock text-warning me-2 mt-1"></i>
                                    <div>
                                        <small><strong>Regular Updates</strong></small>
                                        <p class="text-muted small mb-0">Change your password every 90 days.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="recommendation-item">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-key text-info me-2 mt-1"></i>
                                    <div>
                                        <small><strong>Password Manager</strong></small>
                                        <p class="text-muted small mb-0">Use a password manager for unique passwords.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function generateSecurityReport() {
    alert('Generating comprehensive security report for this password change...');
}

function checkSimilarEvents() {
    alert('Searching for similar password change events...');
}

function flagForReview() {
    if (confirm('Flag this password change event for security review?')) {
        alert('Event flagged for security team review.');
    }
}

function viewIncidentReport() {
    alert('Opening detailed security incident report...');
}

function printDetails() {
    window.print();
}
</script>

<style>
.change-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.summary-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    background: white;
}

.location-details,
.device-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.info-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.security-analysis {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.analysis-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
}

.metric-item,
.feature-item {
    padding: 8px 0;
}

.status-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.status-item:last-child {
    border-bottom: none;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.timeline-content h6 {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.recommendation-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.recommendation-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .change-summary .row {
        margin-bottom: 15px;
    }
    
    .summary-item {
        margin-bottom: 15px;
        text-align: center;
    }
    
    .location-details,
    .device-details {
        margin-bottom: 20px;
    }
    
    .analysis-section {
        margin-bottom: 20px;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }
}
</style>
{% endblock %}