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

{% block title %}Security Events - Ad-tlas{% endblock %}

{% block page_title %}Security Events{% endblock %}
{% block page_description %}Monitor and manage security-related events and threats{% endblock %}

{% block extra_css %}
<style>
    .security-filters {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .security-item {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
        margin-bottom: 1rem;
    }
    
    .security-item:hover {
        background-color: #f8f9fa;
        border-left-color: #007bff;
        transform: translateX(5px);
    }
    
    .severity-critical {
        border-left-color: #dc3545;
        background-color: rgba(220, 53, 69, 0.05);
    }
    
    .severity-high {
        border-left-color: #fd7e14;
        background-color: rgba(253, 126, 20, 0.05);
    }
    
    .severity-medium {
        border-left-color: #ffc107;
        background-color: rgba(255, 193, 7, 0.05);
    }
    
    .severity-low {
        border-left-color: #20c997;
        background-color: rgba(32, 201, 151, 0.05);
    }
    
    .severity-info {
        border-left-color: #0dcaf0;
        background-color: rgba(13, 202, 240, 0.05);
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
    }
    
    .threat-indicator {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin-right: 1rem;
        flex-shrink: 0;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    .resolution-status {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
    }
    
    .status-open {
        background-color: #dc3545;
        color: white;
    }
    
    .status-investigating {
        background-color: #ffc107;
        color: #212529;
    }
    
    .status-resolved {
        background-color: #28a745;
        color: white;
    }
    
    .status-false-positive {
        background-color: #6c757d;
        color: white;
    }
    
    .security-alert {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        animation: blink 1s infinite;
    }
    
    @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0.7; }
    }
    
    .event-details {
        background: #f8f9fa;
        border-radius: 5px;
        padding: 1rem;
        margin-top: 1rem;
    }
    
    .ip-info {
        background: #e9ecef;
        border-radius: 3px;
        padding: 0.25rem 0.5rem;
        font-family: monospace;
        font-size: 0.9rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- Critical Security Alert -->
{% if critical_events_count > 0 %}
<div class="security-alert">
    <div class="row align-items-center">
        <div class="col-auto">
            <i class="fas fa-exclamation-triangle fa-2x"></i>
        </div>
        <div class="col">
            <h5 class="mb-1">Critical Security Alert</h5>
            <p class="mb-0">{{ critical_events_count }} critical security event{{ critical_events_count|pluralize }} require immediate attention!</p>
        </div>
        <div class="col-auto">
            <a href="?severity=critical" class="btn btn-light">
                <i class="fas fa-eye me-1"></i>View Critical Events
            </a>
        </div>
    </div>
</div>
{% endif %}

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100">
            <div class="card-body text-center">
                <i class="fas fa-shield-alt fa-2x mb-2"></i>
                <h4 class="mb-1">{{ total_events|default:0 }}</h4>
                <small>Total Events</small>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
            <div class="card-body text-center">
                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ critical_events|default:0 }}</h4>
                <small>Critical</small>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #fd7e14 0%, #e55a00 100%);">
            <div class="card-body text-center">
                <i class="fas fa-fire fa-2x mb-2"></i>
                <h4 class="mb-1">{{ high_events|default:0 }}</h4>
                <small>High</small>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);">
            <div class="card-body text-center">
                <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ medium_events|default:0 }}</h4>
                <small>Medium</small>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
            <div class="card-body text-center">
                <i class="fas fa-check-circle fa-2x mb-2"></i>
                <h4 class="mb-1">{{ resolved_events|default:0 }}</h4>
                <small>Resolved</small>
            </div>
        </div>
    </div>
    <div class="col-md-2 mb-3">
        <div class="card stats-card h-100" style="background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);">
            <div class="card-body text-center">
                <i class="fas fa-clock fa-2x mb-2"></i>
                <h4 class="mb-1">{{ open_events|default:0 }}</h4>
                <small>Open</small>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="security-filters">
    <form method="get" id="security-filter-form">
        <div class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request.GET.search }}" placeholder="Search security events...">
                </div>
            </div>
            <div class="col-md-2">
                <label for="severity" class="form-label">Severity</label>
                <select class="form-select" id="severity" name="severity">
                    <option value="">All Severities</option>
                    <option value="critical" {% if request.GET.severity == 'critical' %}selected{% endif %}>Critical</option>
                    <option value="high" {% if request.GET.severity == 'high' %}selected{% endif %}>High</option>
                    <option value="medium" {% if request.GET.severity == 'medium' %}selected{% endif %}>Medium</option>
                    <option value="low" {% if request.GET.severity == 'low' %}selected{% endif %}>Low</option>
                    <option value="info" {% if request.GET.severity == 'info' %}selected{% endif %}>Info</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="event_type" class="form-label">Event Type</label>
                <select class="form-select" id="event_type" name="event_type">
                    <option value="">All Types</option>
                    {% for event_type_option in event_types %}
                    <option value="{{ event_type_option }}" {% if request.GET.event_type == event_type_option %}selected{% endif %}>{{ event_type_option|title }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Status</option>
                    <option value="open" {% if request.GET.status == 'open' %}selected{% endif %}>Open</option>
                    <option value="investigating" {% if request.GET.status == 'investigating' %}selected{% endif %}>Investigating</option>
                    <option value="resolved" {% if request.GET.status == 'resolved' %}selected{% endif %}>Resolved</option>
                    <option value="false_positive" {% if request.GET.status == 'false_positive' %}selected{% endif %}>False Positive</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="date_from" class="form-label">Date From</label>
                <input type="date" class="form-control" id="date_from" name="date_from" 
                       value="{{ request.GET.date_from }}">
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-2">
                <label for="date_to" class="form-label">Date To</label>
                <input type="date" class="form-control" id="date_to" name="date_to" 
                       value="{{ request.GET.date_to }}">
            </div>
            <div class="col-md-2">
                <label for="user" class="form-label">User</label>
                <select class="form-select" id="user" name="user">
                    <option value="">All Users</option>
                    {% for user_option in users %}
                    <option value="{{ user_option.id }}" {% if request.GET.user == user_option.id|stringformat:'s' %}selected{% endif %}>
                        {{ user_option.get_full_name|default:user_option.email }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="ip_address" class="form-label">IP Address</label>
                <input type="text" class="form-control" id="ip_address" name="ip_address" 
                       value="{{ request.GET.ip_address }}" placeholder="IP Address">
            </div>
            <div class="col-md-4">
                <label class="form-label">Quick Filters</label>
                <div class="btn-group" role="group">
                    <input type="radio" class="btn-check" name="quick_filter" id="today" value="today" 
                           {% if request.GET.quick_filter == 'today' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="today">Today</label>
                    
                    <input type="radio" class="btn-check" name="quick_filter" id="unresolved" value="unresolved" 
                           {% if request.GET.quick_filter == 'unresolved' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="unresolved">Unresolved</label>
                    
                    <input type="radio" class="btn-check" name="quick_filter" id="critical_high" value="critical_high" 
                           {% if request.GET.quick_filter == 'critical_high' %}checked{% endif %}>
                    <label class="btn btn-outline-secondary" for="critical_high">Critical/High</label>
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <a href="{% url 'activities:security_events' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>Clear
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Export Options -->
<div class="row mb-3">
    <div class="col-md-6">
        <h5>Security Events ({{ page_obj.paginator.count }} total)</h5>
    </div>
    <div class="col-md-6 text-end">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary" onclick="exportEvents('csv')">
                <i class="fas fa-file-csv me-1"></i>Export CSV
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="exportEvents('excel')">
                <i class="fas fa-file-excel me-1"></i>Export Excel
            </button>
            <button type="button" class="btn btn-outline-danger" onclick="generateSecurityReport()">
                <i class="fas fa-file-pdf me-1"></i>Security Report
            </button>
        </div>
    </div>
</div>

<!-- Security Events List -->
<div class="row">
    <div class="col-12">
        {% if security_events %}
        <div class="security-list">
            {% for event in security_events %}
            <div class="card security-item severity-{{ event.severity }}">
                <div class="card-body">
                    <div class="row align-items-start">
                        <div class="col-auto">
                            <div class="threat-indicator 
                                {% if event.severity == 'critical' %}bg-danger text-white
                                {% elif event.severity == 'high' %}bg-warning text-dark
                                {% elif event.severity == 'medium' %}bg-info text-white
                                {% elif event.severity == 'low' %}bg-success text-white
                                {% else %}bg-secondary text-white{% endif %}">
                                {% if event.event_type == 'failed_login' %}
                                    <i class="fas fa-user-times"></i>
                                {% elif event.event_type == 'suspicious_activity' %}
                                    <i class="fas fa-user-secret"></i>
                                {% elif event.event_type == 'policy_violation' %}
                                    <i class="fas fa-ban"></i>
                                {% elif event.event_type == 'data_breach' %}
                                    <i class="fas fa-database"></i>
                                {% elif event.event_type == 'malware_detected' %}
                                    <i class="fas fa-virus"></i>
                                {% elif event.event_type == 'unauthorized_access' %}
                                    <i class="fas fa-lock"></i>
                                {% else %}
                                    <i class="fas fa-shield-alt"></i>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-md-8">
                                    <h6 class="mb-1">
                                        {{ event.get_event_type_display }}
                                        <span class="badge bg-{{ event.severity == 'critical' and 'danger' or event.severity == 'high' and 'warning' or event.severity == 'medium' and 'info' or event.severity == 'low' and 'success' or 'secondary' }} ms-2">
                                            {{ event.get_severity_display|upper }}
                                        </span>
                                    </h6>
                                    <p class="mb-1">{{ event.description }}</p>
                                    <small class="text-muted">
                                        <i class="fas fa-user me-1"></i>
                                        {{ event.user.get_full_name|default:event.user.email|default:'Unknown User' }}
                                        {% if event.ip_address %}
                                        <span class="ms-2">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            <span class="ip-info">{{ event.ip_address }}</span>
                                        </span>
                                        {% endif %}
                                        <span class="ms-2">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ event.detected_at|date:'M d, Y H:i' }}
                                        </span>
                                    </small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <div class="mb-2">
                                        <span class="resolution-status status-{{ event.resolution_status }}">
                                            {{ event.get_resolution_status_display }}
                                        </span>
                                    </div>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="viewEventDetails({{ event.id }})" 
                                                data-bs-toggle="tooltip" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {% if event.resolution_status == 'open' %}
                                        <button type="button" class="btn btn-outline-warning" 
                                                onclick="investigateEvent({{ event.id }})" 
                                                data-bs-toggle="tooltip" title="Start Investigation">
                                            <i class="fas fa-search"></i>
                                        </button>
                                        {% endif %}
                                        {% if event.resolution_status != 'resolved' %}
                                        <button type="button" class="btn btn-outline-success" 
                                                onclick="resolveEvent({{ event.id }})" 
                                                data-bs-toggle="tooltip" title="Mark as Resolved">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        {% endif %}
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-outline-secondary dropdown-toggle" 
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#" onclick="markFalsePositive({{ event.id }})">Mark as False Positive</a></li>
                                                <li><a class="dropdown-item" href="#" onclick="escalateEvent({{ event.id }})">Escalate</a></li>
                                                <li><a class="dropdown-item" href="#" onclick="addNote({{ event.id }})">Add Note</a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="#" onclick="deleteEvent({{ event.id }})">Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Event Details -->
                            {% if event.event_data %}
                            <div class="event-details mt-2">
                                <small>
                                    <strong>Additional Information:</strong>
                                    {% for key, value in event.event_data.items|slice:":3" %}
                                    <span class="badge bg-light text-dark ms-1">{{ key }}: {{ value|truncatechars:20 }}</span>
                                    {% endfor %}
                                    {% if event.event_data|length > 3 %}
                                    <span class="badge bg-light text-dark ms-1">+{{ event.event_data|length|add:"-3" }} more</span>
                                    {% endif %}
                                </small>
                            </div>
                            {% endif %}
                            
                            <!-- Resolution Notes -->
                            {% if event.resolution_notes %}
                            <div class="mt-2">
                                <small class="text-muted">
                                    <i class="fas fa-sticky-note me-1"></i>
                                    <strong>Resolution Notes:</strong> {{ event.resolution_notes|truncatechars:100 }}
                                </small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="Security events pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                </li>
                {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        
        {% else %}
        <!-- Empty State -->
        <div class="text-center py-5">
            <i class="fas fa-shield-alt fa-4x text-muted mb-3"></i>
            <h4 class="text-muted">No Security Events Found</h4>
            <p class="text-muted">No security events match your current filters.</p>
            <a href="{% url 'activities:security_events' %}" class="btn btn-primary">
                <i class="fas fa-refresh me-1"></i>Clear Filters
            </a>
        </div>
        {% endif %}
    </div>
</div>

<!-- Event Details Modal -->
<div class="modal fade" id="eventDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Security Event Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="eventDetailsContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Investigation Modal -->
<div class="modal fade" id="investigationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Start Investigation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="investigationForm">
                    <div class="mb-3">
                        <label for="investigationNotes" class="form-label">Investigation Notes</label>
                        <textarea class="form-control" id="investigationNotes" rows="3" 
                                  placeholder="Enter investigation notes..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="assignedTo" class="form-label">Assign To</label>
                        <select class="form-select" id="assignedTo">
                            <option value="">Select investigator...</option>
                            {% for user in investigators %}
                            <option value="{{ user.id }}">{{ user.get_full_name|default:user.email }}</option>
                            {% endfor %}
                        </select>
                    </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-warning" onclick="startInvestigation()">Start Investigation</button>
            </div>
        </div>
    </div>
</div>

<!-- Resolution Modal -->
<div class="modal fade" id="resolutionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Resolve Security Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="resolutionForm">
                    <div class="mb-3">
                        <label for="resolutionNotes" class="form-label">Resolution Notes</label>
                        <textarea class="form-control" id="resolutionNotes" rows="3" 
                                  placeholder="Describe how this event was resolved..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="resolutionAction" class="form-label">Action Taken</label>
                        <select class="form-select" id="resolutionAction">
                            <option value="">Select action...</option>
                            <option value="blocked_ip">Blocked IP Address</option>
                            <option value="disabled_account">Disabled User Account</option>
                            <option value="updated_policy">Updated Security Policy</option>
                            <option value="patched_vulnerability">Patched Vulnerability</option>
                            <option value="other">Other</option>
                        </select>
                    </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-success" onclick="resolveSecurityEvent()">Mark as Resolved</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentEventId = null;

// Auto-submit form on filter changes
$(document).ready(function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Auto-submit on quick filter change
    $('input[name="quick_filter"]').change(function() {
        $('#security-filter-form').submit();
    });
    
    // Auto-submit on select changes
    $('#severity, #event_type, #status, #user').change(function() {
        $('#security-filter-form').submit();
    });
});

// View event details
function viewEventDetails(eventId) {
    $.get(`/activities/api/security-event/${eventId}/`, function(data) {
        let content = `
            <div class="row">
                <div class="col-md-6">
                    <h6>Event Information</h6>
                    <table class="table table-sm">
                        <tr><td><strong>Type:</strong></td><td>${data.event_type_display}</td></tr>
                        <tr><td><strong>Severity:</strong></td><td><span class="badge bg-${data.severity === 'critical' ? 'danger' : data.severity === 'high' ? 'warning' : data.severity === 'medium' ? 'info' : 'success'}">${data.severity_display}</span></td></tr>
                        <tr><td><strong>Status:</strong></td><td><span class="resolution-status status-${data.resolution_status}">${data.resolution_status_display}</span></td></tr>
                        <tr><td><strong>Detected:</strong></td><td>${new Date(data.detected_at).toLocaleString()}</td></tr>
                        <tr><td><strong>User:</strong></td><td>${data.user || 'Unknown'}</td></tr>
                        <tr><td><strong>IP Address:</strong></td><td>${data.ip_address || 'N/A'}</td></tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6>Description</h6>
                    <p>${data.description}</p>
                    ${data.resolution_notes ? `<h6>Resolution Notes</h6><p>${data.resolution_notes}</p>` : ''}
                </div>
            </div>
            ${data.event_data ? `<hr><h6>Event Data</h6><pre class="bg-light p-3 rounded">${JSON.stringify(data.event_data, null, 2)}</pre>` : ''}
        `;
        $('#eventDetailsContent').html(content);
        $('#eventDetailsModal').modal('show');
    }).fail(function() {
        alert('Failed to load event details.');
    });
}

// Investigate event
function investigateEvent(eventId) {
    currentEventId = eventId;
    $('#investigationModal').modal('show');
}

// Start investigation
function startInvestigation() {
    const notes = $('#investigationNotes').val();
    const assignedTo = $('#assignedTo').val();
    
    $.ajax({
        url: `/activities/api/security-event/${currentEventId}/investigate/`,
        type: 'POST',
        headers: {
            'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
        },
        data: {
            notes: notes,
            assigned_to: assignedTo
        },
        success: function() {
            $('#investigationModal').modal('hide');
            location.reload();
        },
        error: function() {
            alert('Failed to start investigation.');
        }
    });
}

// Resolve event
function resolveEvent(eventId) {
    currentEventId = eventId;
    $('#resolutionModal').modal('show');
}

// Resolve security event
function resolveSecurityEvent() {
    const notes = $('#resolutionNotes').val();
    const action = $('#resolutionAction').val();
    
    $.ajax({
        url: `/activities/api/security-event/${currentEventId}/resolve/`,
        type: 'POST',
        headers: {
            'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
        },
        data: {
            notes: notes,
            action: action
        },
        success: function() {
            $('#resolutionModal').modal('hide');
            location.reload();
        },
        error: function() {
            alert('Failed to resolve event.');
        }
    });
}

// Mark as false positive
function markFalsePositive(eventId) {
    if (confirm('Are you sure this is a false positive?')) {
        $.ajax({
            url: `/activities/api/security-event/${eventId}/false-positive/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function() {
                location.reload();
            },
            error: function() {
                alert('Failed to mark as false positive.');
            }
        });
    }
}

// Escalate event
function escalateEvent(eventId) {
    const reason = prompt('Enter escalation reason:');
    if (reason) {
        $.ajax({
            url: `/activities/api/security-event/${eventId}/escalate/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            data: {
                reason: reason
            },
            success: function() {
                alert('Event escalated successfully.');
                location.reload();
            },
            error: function() {
                alert('Failed to escalate event.');
            }
        });
    }
}

// Add note
function addNote(eventId) {
    const note = prompt('Enter note:');
    if (note) {
        $.ajax({
            url: `/activities/api/security-event/${eventId}/note/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            data: {
                note: note
            },
            success: function() {
                alert('Note added successfully.');
            },
            error: function() {
                alert('Failed to add note.');
            }
        });
    }
}

// Delete event
function deleteEvent(eventId) {
    if (confirm('Are you sure you want to delete this security event? This action cannot be undone.')) {
        $.ajax({
            url: `/activities/api/security-event/${eventId}/`,
            type: 'DELETE',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function() {
                location.reload();
            },
            error: function() {
                alert('Failed to delete event.');
            }
        });
    }
}

// Export events
function exportEvents(format) {
    const params = new URLSearchParams(window.location.search);
    params.set('export', format);
    window.location.href = `{% url 'activities:security_export' %}?${params.toString()}`;
}

// Generate security report
function generateSecurityReport() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `{% url 'activities:security_report' %}?${params.toString()}`;
}
</script>
{% endblock %}