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

<div class="container-fluid d-flex flex-column justify-content-center align-items-center min-vh-100 text-center" style="background: linear-gradient(135deg, #461b0e, #6d6d6d, #4a86bb);">
    <br>
    <br>
    <br>
    <h1 class="display-1 text-warning mb-10 animate__animated animate__bounceIn" style="text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);">خطای 404!!</h1>

    <div class="mb-10" id="lottie-404" style="width: 350px; height: 350px;"></div>

    <p class="lead text-light ">متأسفیم، صفحه‌ای که به دنبال آن هستید وجود ندارد.
        <br >و یا شما به آن دسترسی ندارید 
    </p>
    
    <a href="{{ request.META.HTTP_REFERER|default:'dashboard' }}" class="btn btn-dark mb-5 ">بــازگشت</a>
</div>

<!-- Lottie Animation Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"></script>
<script>
    lottie.loadAnimation({
        container: document.getElementById('lottie-404'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'https://assets1.lottiefiles.com/packages/lf20_tnrzlN.json'
    });
</script>

<!-- استایل برای جلوگیری از اسکرول عمودی در حالت موبایل -->
<style>
    /* جلوگیری از اسکرول عمودی در موبایل */
    html, body {
        height: 100%;
        overflow: hidden;
    }

    /* ریسپانسیو برای دستگاه‌های موبایل */
    @media (max-width: 768px) {
        .container-fluid {
            min-height: 100vh; /* جلوگیری از اسکرول عمودی */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
</style>

{% endblock %}