{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @package    local_academic_ticket_system
    @copyright  2026 Abdulrahman
    @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}

<div class="local-academic-ticket-system">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <style>
        .local-academic-ticket-system .ats-error-page { 
            font-family: 'Cairo', sans-serif; 
            min-height: 70vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .local-academic-ticket-system .glass-error {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }
        .local-academic-ticket-system .blob-err { position: absolute; filter: blur(60px); z-index: -1; opacity: 0.5; }
        .local-academic-ticket-system .blob-e1 { top: 20%; left: 20%; width: 200px; height: 200px; background: #6366f1; }
        .local-academic-ticket-system .blob-e2 { bottom: 20%; right: 20%; width: 250px; height: 250px; background: #a855f7; }
    </style>

    <div class="fixed inset-0 z-[-1] overflow-hidden">
        <div class="blob-err blob-e1 rounded-full"></div>
        <div class="blob-err blob-e2 rounded-full"></div>
    </div>

    <div class="ats-error-page p-4">
        <div class="glass-error p-10 rounded-3xl text-center max-w-lg w-full transform transition-all hover:scale-[1.01]">
            <div class="w-24 h-24 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
                <i class="fas fa-search text-4xl text-indigo-500"></i>
            </div>
            <h2 class="text-3xl font-extrabold text-gray-800 mb-2">{{#str}}no_tickets_title, local_academic_ticket_system{{/str}}</h2>
            <p class="text-gray-500 mb-8 text-lg font-medium leading-relaxed">
                {{#str}}sorry_no_ticket, local_academic_ticket_system{{/str}} <strong>#{{ticketid}}</strong>
            </p>
            <a href="{{home_url}}" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl font-bold text-lg hover:shadow-xl hover:-translate-y-1 transition-all w-full text-decoration-none">
                <i class="fas fa-arrow-left"></i> {{#str}}return_home, local_academic_ticket_system{{/str}}
            </a>
        </div>
    </div>
</div>
