{% extends 'base.html' %}
{% block title %}404 Forbidden{% endblock %}
{% block content %}
<div class="text-center">
    <h1 class="display-1 text-danger">403</h1>
    <p class="lead text-light">Forbidden: You don't have permission to access this resource.</p>
    <div style="margin: 20px auto;">
        <h3 class="text-light">Your Activity is Being Monitored</h3>
        <p class="text-warning font-weight-bold">Your IP Address: <span id="user-ip">Retrieving...</span></p>
        <p class="text-warning font-weight-bold">Incident ID: 2025-403-<span id="incident-number"></span></p>
    </div>
    <img src="https://i.imgur.com/5cKXQ4N.png" alt="Warning Image" class="img-fluid mb-4" style="max-width: 300px; box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);">
    <br>
    <a href="{{ url_for('dashboard') }}" class="btn btn-danger btn-lg mt-3">Return to Dashboard</a>
</div>

<script>
    // Generate a random incident number for intimidation
    const incidentNumber = Math.floor(Math.random() * 90000) + 10000;
    document.getElementById('incident-number').textContent = incidentNumber;

    // Fetch and display the user's real IP address
    fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('user-ip').textContent = data.ip;
        })
        .catch(() => {
            document.getElementById('user-ip').textContent = 'Unavailable';
        });
</script>
{% endblock %}