<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AUTO TESTER - <!-- PAGE_TITLE --></title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="AUTO TESTER - Comprehensive vehicle inspection and evaluation system">
    <meta name="keywords" content="vehicle inspection, car evaluation, auto tester, vehicle assessment">
    <meta name="author" content="AUTO TESTER System">
    
    <!-- Open Graph Tags -->
    <meta property="og:title" content="AUTO TESTER - <!-- PAGE_TITLE -->">
    <meta property="og:description" content="Comprehensive vehicle inspection and evaluation system">
    <meta property="og:image" content="/assets/images/og-image.jpg">
    <meta property="og:url" content="<!-- PAGE_URL -->">
    <meta property="og:type" content="website">
    
    <!-- Twitter Card Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="AUTO TESTER - <!-- PAGE_TITLE -->">
    <meta name="twitter:description" content="Comprehensive vehicle inspection and evaluation system">
    <meta name="twitter:image" content="/assets/images/twitter-image.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    
    <!-- DataTables -->
    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    
    <!-- Unified Design System -->
    <link rel="stylesheet" href="/assets/css/unified-design-system.css">
    
    <!-- Page Specific CSS -->
    <!-- PAGE_CSS -->
    
    <style>
        /* Page specific styles can be added here */
        .page-header {
            background: var(--bg-secondary);
            border-radius: var(--radius-2xl);
            padding: var(--spacing-3xl);
            margin-bottom: var(--spacing-2xl);
            border: 1px solid rgba(0, 168, 255, 0.3);
            text-align: center;
        }
        
        .page-title {
            color: var(--primary-light);
            font-size: var(--font-size-4xl);
            font-weight: var(--font-weight-black);
            margin-bottom: var(--spacing-md);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-md);
        }
        
        .page-subtitle {
            color: var(--gray-light);
            font-size: var(--font-size-lg);
        }
        
        .main-content {
            max-width: 1400px;
            margin: var(--spacing-2xl) auto;
            padding: 0 var(--spacing-lg);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
        }
        
        .content-section {
            background: var(--bg-card);
            border: 1px solid rgba(0, 168, 255, 0.3);
            border-radius: var(--radius-2xl);
            padding: var(--spacing-2xl);
            margin-bottom: var(--spacing-2xl);
            backdrop-filter: blur(5px);
        }
        
        .section-title {
            color: var(--primary-light);
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--spacing-lg);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding-bottom: var(--spacing-md);
            border-bottom: 2px solid rgba(0, 168, 255, 0.3);
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-lg);
            border-bottom: 2px solid rgba(0, 168, 255, 0.3);
        }
        
        .toolbar-left,
        .toolbar-right {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-box {
            position: relative;
            width: 300px;
        }
        
        .search-input {
            width: 100%;
            padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
            border: 1px solid rgba(0, 168, 255, 0.5);
            border-radius: var(--radius-full);
            background: rgba(0, 0, 0, 0.3);
            color: var(--light);
            font-size: var(--font-size-base);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
        }
        
        .search-icon {
            position: absolute;
            right: var(--spacing-lg);
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-light);
        }
        
        .empty-state {
            text-align: center;
            padding: var(--spacing-3xl);
            color: var(--gray);
        }
        
        .empty-state i {
            font-size: var(--font-size-5xl);
            color: var(--primary-light);
            margin-bottom: var(--spacing-lg);
            opacity: 0.5;
        }
        
        @media (max-width: 768px) {
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .toolbar-left,
            .toolbar-right {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-box {
                width: 100%;
            }
            
            .page-title {
                font-size: var(--font-size-3xl);
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="/index.html" class="logo">
                <i class="fas fa-car"></i>AUTO <span>TESTER</span>
            </a>
            
            <div class="nav-links">
                <!-- NAVIGATION_LINKS -->
            </div>
            
            <div class="user-menu" id="userMenu">
                <div class="user-info" id="userInfo" style="display: none;">
                    <div class="user-name" id="userName"></div>
                    <div class="user-role" id="userRole"></div>
                </div>
                <button class="btn btn-primary btn-sm" id="loginBtn" onclick="AUTO_TESTER.showLoginDialog()">
                    <i class="fas fa-sign-in-alt"></i>
                    <span>Login</span>
                </button>
                <button class="btn btn-outline-primary btn-sm" id="logoutBtn" style="display: none;" onclick="AUTO_TESTER.logout()">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>Logout</span>
                </button>
                
                <!-- Theme Toggle -->
                <button class="btn btn-outline-secondary btn-sm" id="themeToggle" title="Toggle Theme">
                    <i class="fas fa-moon"></i>
                </button>
                
                <!-- Language Toggle -->
                <button class="btn btn-outline-secondary btn-sm" id="languageToggle" title="Toggle Language">
                    AR
                </button>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
        <!-- PAGE_HEADER -->
        
        <!-- PAGE_CONTENT -->
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="footer-brand">
                        <h3>AUTO TESTER</h3>
                        <p>Comprehensive vehicle inspection and evaluation system</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="footer-links">
                        <h4>Quick Links</h4>
                        <ul>
                            <li><a href="/index.html">Home</a></li>
                            <li><a href="/about.html">About</a></li>
                            <li><a href="/services.html">Services</a></li>
                            <li><a href="/contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="footer-contact">
                        <h4>Contact Us</h4>
                        <p><i class="fas fa-phone"></i> +20 123 456 7890</p>
                        <p><i class="fas fa-envelope"></i> info@autotester.com</p>
                        <p><i class="fas fa-map-marker-alt"></i> Cairo, Egypt</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 AUTO TESTER. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Modals -->
    <!-- Login Modal -->
    <div class="modal" id="loginModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <h3 class="modal-title">Login</h3>
                <button class="modal-close" onclick="AUTO_TESTER.closeModal('loginModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-envelope"></i>
                            Email
                        </label>
                        <input type="email" class="form-control" id="loginEmail" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-lock"></i>
                            Password
                        </label>
                        <input type="password" class="form-control" id="loginPassword" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-sign-in-alt"></i>
                            Login
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="AUTO_TESTER.closeModal('loginModal')">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Notifications Container -->
    <div id="notifications" class="notifications-container"></div>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-lg"></div>
    </div>

    <!-- Scripts -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- AOS Animation -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    
    <!-- Unified Design System -->
    <script src="/assets/js/unified-design-system.js"></script>
    
    <!-- Page Specific JavaScript -->
    <!-- PAGE_JS -->
    
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });
        
        // Login form handler
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;
            
            // Show loading
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="loading"></span> Logging in...';
            
            try {
                const success = await AUTO_TESTER.login(email, password);
                if (success) {
                    AUTO_TESTER.closeModal('loginModal');
                    this.reset();
                }
            } catch (error) {
                console.error('Login error:', error);
            } finally {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
        
        // Page initialization
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize page-specific functionality
            if (typeof initializePage === 'function') {
                initializePage();
            }
        });
        
        // Global error handler
        window.addEventListener('error', function(e) {
            console.error('Global error:', e.error);
            AUTO_TESTER.showNotification('An unexpected error occurred', 'error');
        });
        
        // Global unhandled promise rejection handler
        window.addEventListener('unhandledrejection', function(e) {
            console.error('Unhandled promise rejection:', e.reason);
            AUTO_TESTER.showNotification('An unexpected error occurred', 'error');
        });
    </script>
</body>
</html>
