<?php
session_start();

// ============================================================
// DATABASE CONNECTION (optional - for future use)
// ============================================================
try {
    $db = new PDO('sqlite:../database.db');
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    // Database connection is optional for this page
    $db = null;
}

// ============================================================
// GET FILES FROM PARENT DIRECTORY
// ============================================================
$parent_dir = __DIR__ . '/../'; // One level above

// Scan the parent directory for files
$caosce_files = [];
$osce_files = [];

if (is_dir($parent_dir)) {
    $scanned = scandir($parent_dir);
    foreach ($scanned as $file) {
        if ($file === '.' || $file === '..') continue;
        $file_path = $parent_dir . $file;
        if (is_file($file_path)) {
            $file_info = pathinfo($file);
            $extension = strtolower($file_info['extension'] ?? '');

            // Check if it's a CAOSCE file (must start with CAOSCE, have v after, and be .zip)
            if (preg_match('/^CAOSCEv\d+/i', $file) && $extension === 'zip') {
                $caosce_files[] = [
                    'name' => $file,
                    'path' => $file_path,
                    'size' => filesize($file_path),
                    'modified' => filemtime($file_path),
                    'extension' => $extension,
                    'version' => preg_replace('/^CAOSCEv/i', '', pathinfo($file, PATHINFO_FILENAME))
                ];
            }
            // Check if it's an OSCE file (must start with OSCE, have v after, and be .apk)
            elseif (preg_match('/^OSCEv\d+/i', $file) && $extension === 'apk') {
                $osce_files[] = [
                    'name' => $file,
                    'path' => $file_path,
                    'size' => filesize($file_path),
                    'modified' => filemtime($file_path),
                    'extension' => $extension,
                    'version' => preg_replace('/^OSCEv/i', '', pathinfo($file, PATHINFO_FILENAME))
                ];
            }
        }
    }

    // Sort CAOSCE files by version (descending - newest first)
    usort($caosce_files, function ($a, $b) {
        return version_compare($b['version'], $a['version']);
    });

    // Sort OSCE files by version (descending - newest first)
    usort($osce_files, function ($a, $b) {
        return version_compare($b['version'], $a['version']);
    });
}

// ============================================================
// HANDLE FILE DOWNLOAD
// ============================================================
if (isset($_GET['download'])) {
    $file_name = basename($_GET['download']);
    $file_path = $parent_dir . $file_name;

    // Security: prevent directory traversal
    if (strpos($file_name, '..') !== false) {
        die('Invalid file name.');
    }

    if (file_exists($file_path) && is_file($file_path)) {
        // Get file size
        $file_size = filesize($file_path);

        // Determine content type based on extension
        $extension = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
        $content_type = 'application/octet-stream';
        if ($extension === 'zip') {
            $content_type = 'application/zip';
        } elseif ($extension === 'apk') {
            $content_type = 'application/vnd.android.package-archive';
        }

        // Set headers for download
        header('Content-Type: ' . $content_type);
        header('Content-Disposition: attachment; filename="' . $file_name . '"');
        header('Content-Length: ' . $file_size);
        header('Cache-Control: no-cache, must-revalidate');
        header('Pragma: public');

        // Read and output the file
        readfile($file_path);
        exit;
    } else {
        $error_message = 'File not found.';
    }
}

// ============================================================
// FORMAT FILE SIZE
// ============================================================
function formatFileSize($bytes)
{
    if ($bytes < 1024) return $bytes . ' B';
    if ($bytes < 1048576) return round($bytes / 1024, 2) . ' KB';
    if ($bytes < 1073741824) return round($bytes / 1048576, 2) . ' MB';
    return round($bytes / 1073741824, 2) . ' GB';
}

// ============================================================
// GET VERSION DISPLAY
// ============================================================
function getVersionDisplay($version)
{
    if (empty($version)) return '';
    return 'v' . $version;
}

// Get current page name for active navigation
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAOSCE · Software Downloads</title>
    <link rel="icon" type="image/x-icon" href="CAOSCE Network.ico">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap" rel="stylesheet">

    <!-- Font Awesome 6 (Free) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        /* ----- reset & base ----- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f0f4fb;
            color: #10233f;
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* ----- palette ----- */
        :root {
            --ink: #10233f;
            --dark: #071a31;
            --muted: #4f6580;
            --muted-light: #7c8ea8;
            --primary: #1a6cf0;
            --primary-dark: #0e4db0;
            --purple: #6d5dfc;
            --green: #16a085;
            --orange: #ee8b35;
            --red: #d92d20;
            --line: #e2eaf2;
            --bg: #f0f4fb;
            --white: #ffffff;
            --shadow-sm: 0 8px 28px rgba(16, 35, 63, 0.06);
            --shadow-md: 0 16px 48px rgba(16, 35, 63, 0.08);
            --radius: 24px;
        }

        /* ----- top navigation (solid, non-transparent) ----- */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 60;
            background: #ffffff;
            border-bottom: 2px solid #e2eaf2;
            padding: 0 5vw;
            height: 74px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 12px rgba(16, 35, 63, 0.06);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            font-size: 20px;
            color: var(--ink);
            text-decoration: none;
        }

        .brand-icon {
            width: 38px;
            height: 38px;
            background: linear-gradient(135deg, #1a6cf0, #6d5dfc);
            border-radius: 12px;
            display: grid;
            place-items: center;
            color: white;
            font-size: 18px;
            font-weight: 900;
            box-shadow: 0 8px 18px rgba(26, 108, 240, 0.25);
        }

        .brand-light {
            font-weight: 500;
            color: #4f6580;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .nav-links a {
            font-size: 14px;
            font-weight: 600;
            color: #4f6580;
            transition: 0.2s;
            position: relative;
            text-decoration: none;
        }

        .nav-links a i {
            margin-right: 6px;
            font-size: 13px;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--primary);
        }

        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
            border-radius: 4px;
        }

        .nav-logout {
            background: #f0f4fb;
            border: 1px solid #d9e2eb;
            border-radius: 30px;
            padding: 6px 18px;
            font-weight: 600;
            font-size: 13px;
            color: var(--ink);
            transition: 0.2s;
        }

        .nav-logout:hover {
            background: #e2eaf2;
            border-color: #b0c4d8;
            color: #1a6cf0;
        }

        /* ----- main container ----- */
        .main-wrap {
            flex: 1;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 40px 5vw 30px;
        }

        /* ----- page header ----- */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px 28px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            border: 1px solid #eef4fa;
            flex-wrap: wrap;
            gap: 15px;
        }

        .page-header h1 {
            color: #10233f;
            font-weight: 700;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .page-header h1 i {
            color: #1a6cf0;
        }

        .page-header .subtitle {
            font-size: 14px;
            color: #6b7a8f;
            margin-top: 2px;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 22px;
            border: none;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            font-size: 14px;
        }

        .btn-back {
            background: #e9ecef;
            color: #4f6580;
        }

        .btn-back:hover {
            background: #dde1e6;
            transform: translateY(-2px);
        }

        /* ----- section titles ----- */
        .section-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid #eef4fa;
        }

        .section-title h2 {
            font-size: 22px;
            font-weight: 700;
            color: #10233f;
        }

        .section-title .badge {
            background: #1a6cf0;
            color: white;
            padding: 2px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .section-title .badge.caosce {
            background: #6d5dfc;
        }

        .section-title .badge.osce {
            background: #28a745;
        }

        /* ----- software grid ----- */
        .software-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }

        .software-card {
            background: white;
            border-radius: 18px;
            padding: 24px 24px 22px;
            box-shadow: 0 6px 20px rgba(16, 35, 63, 0.06);
            border: 1px solid #eef4fa;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .software-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(16, 35, 63, 0.10);
            border-color: #c8d8ec;
        }

        .software-card .card-top {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 14px;
        }

        .software-card .icon-wrap {
            font-size: 36px;
            width: 60px;
            height: 60px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            flex-shrink: 0;
            transition: 0.2s;
        }

        .software-card .card-info {
            flex: 1;
        }

        .software-card .software-name {
            font-size: 20px;
            font-weight: 700;
            color: #10233f;
        }

        .software-card .software-version {
            font-size: 14px;
            color: #6b7a8f;
        }

        .software-card .software-details {
            font-size: 13px;
            color: #6b7a8f;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 4px 0 6px;
        }

        .software-card .software-details span {
            background: #f8fafc;
            padding: 2px 12px;
            border-radius: 20px;
            border: 1px solid #eef4fa;
        }

        .software-card .software-details .platform-badge {
            font-weight: 600;
        }

        .software-card .platform-desktop {
            background: #e8f0fe;
            color: #1a6cf0;
            border-color: #c5d8f0;
        }

        .software-card .platform-android {
            background: #e6f7ed;
            color: #28a745;
            border-color: #b8e6c8;
        }

        .software-card .file-size-info {
            font-size: 12px;
            color: #6b7a8f;
            background: #f8fafc;
            padding: 2px 12px;
            border-radius: 20px;
            border: 1px solid #eef4fa;
        }

        /* ----- Instructions section ----- */
        .software-card .instructions {
            background: #f8fafc;
            border-radius: 12px;
            padding: 14px 16px;
            margin: 12px 0 16px;
            border: 1px solid #eef4fa;
            flex: 1;
        }

        .software-card .instructions .inst-title {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7a8f;
            margin-bottom: 6px;
        }

        .software-card .instructions .inst-title i {
            margin-right: 4px;
        }

        .software-card .instructions ol {
            padding-left: 18px;
            font-size: 13px;
            color: #4a617c;
            line-height: 1.8;
        }

        .software-card .instructions ol li {
            margin-bottom: 2px;
        }

        .software-card .instructions .note {
            font-size: 12px;
            color: #6b7a8f;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #eef4fa;
            font-style: italic;
        }

        .software-card .btn-download {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 28px;
            border: none;
            border-radius: 40px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            color: white;
            margin-top: auto;
            width: 100%;
        }

        .software-card .btn-download:hover {
            transform: translateY(-3px);
        }

        .software-card .btn-download i {
            font-size: 16px;
        }

        /* Card variations */
        .software-card.caosce-card .icon-wrap {
            background: #ede7ff;
            color: #6d5dfc;
        }

        .software-card.caosce-card:hover .icon-wrap {
            background: #6d5dfc;
            color: white;
        }

        .software-card.caosce-card .btn-download {
            background: linear-gradient(135deg, #6d5dfc, #5a4bd4);
            box-shadow: 0 4px 14px rgba(109, 93, 252, 0.3);
        }

        .software-card.caosce-card .btn-download:hover {
            box-shadow: 0 8px 28px rgba(109, 93, 252, 0.4);
        }

        .software-card.osce-card .icon-wrap {
            background: #e6f7ed;
            color: #28a745;
        }

        .software-card.osce-card:hover .icon-wrap {
            background: #28a745;
            color: white;
        }

        .software-card.osce-card .btn-download {
            background: linear-gradient(135deg, #28a745, #1e8a3a);
            box-shadow: 0 4px 14px rgba(40, 167, 69, 0.3);
        }

        .software-card.osce-card .btn-download:hover {
            box-shadow: 0 8px 28px rgba(40, 167, 69, 0.4);
        }

        /* ----- empty state ----- */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            background: white;
            border-radius: 18px;
            border: 1px solid #eef4fa;
        }

        .empty-state i {
            font-size: 56px;
            color: #d9e2eb;
            display: block;
            margin-bottom: 14px;
        }

        .empty-state h3 {
            font-size: 18px;
            color: #10233f;
            margin-bottom: 4px;
        }

        .empty-state p {
            color: #6b7a8f;
            font-size: 14px;
        }

        .empty-state .hint {
            font-size: 13px;
            color: #a0b0c4;
            margin-top: 8px;
        }

        /* ----- footer ----- */
        .footer {
            margin-top: 40px;
            padding: 24px 5vw 20px;
            background: var(--dark);
            color: #b6c9dd;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            border-top: 1px solid #1f3550;
        }

        .footer strong {
            color: #dce7f5;
        }

        .footer .meta {
            display: flex;
            gap: 24px;
            align-items: center;
        }

        .footer .meta span {
            color: #7c92ab;
        }

        /* ----- responsive ----- */
        @media (max-width: 900px) {
            .navbar {
                padding: 0 4vw;
                height: 68px;
            }

            .nav-links a:not(.nav-logout) {
                display: none;
            }

            .nav-links a.nav-logout {
                display: inline-block;
            }

            .page-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .header-actions {
                width: 100%;
            }

            .header-actions .btn {
                flex: 1;
                justify-content: center;
            }

            .software-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 700px) {
            .software-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .main-wrap {
                padding: 16px 4vw;
            }

            .page-header {
                padding: 16px 18px;
            }

            .page-header h1 {
                font-size: 1.4rem;
            }

            .section-title h2 {
                font-size: 18px;
            }

            .software-card {
                padding: 18px 16px;
            }

            .software-card .card-top {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .software-card .software-details {
                justify-content: center;
            }

            .footer {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }
        }

        @media (max-width: 400px) {
            .brand {
                font-size: 16px;
            }

            .brand-icon {
                width: 30px;
                height: 30px;
                font-size: 14px;
            }
        }
    </style>
</head>

<body>

    <!-- ============================================================
         NAVIGATION
         ============================================================ -->
    <header class="navbar">
        <a href="admin.php" class="brand">
            <span class="brand-icon">CN</span>
            <span>CAOSCE <span class="brand-light">Network</span></span>
        </a>
        <div class="nav-links">
            <a href="admin.php" class="<?php echo $current_page == 'admin.php' ? 'active' : ''; ?>">
                <i class="fas fa-th-large"></i> Dashboard
            </a>
            <a href="classes.php" class="<?php echo $current_page == 'classes.php' ? 'active' : ''; ?>">
                <i class="fas fa-user-plus"></i> Class lists
            </a>
            <a href="result.php" class="<?php echo $current_page == 'result.php' ? 'active' : ''; ?>">
                <i class="fas fa-chart-pie"></i>OSCE Result
            </a>
            <a href="exam_manager.php" class="<?php echo $current_page == 'exam_manager.php' ? 'active' : ''; ?>">
                <i class="fas fa-sliders-h"></i> Exams settings
            </a>
            <a href="logout.php" class="nav-logout">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
        </div>
    </header>


    <!-- ============================================================
         MAIN CONTENT
         ============================================================ -->
    <main class="main-wrap">

        <!-- Page Header -->
        <div class="page-header">
            <div>
                <h1>
                    <i class="fas fa-download"></i>
                    Software Downloads
                </h1>
                <div class="subtitle">
                    <i class="fas fa-archive"></i>
                    Download CAOSCE desktop and OSCE Android applications
                </div>
            </div>
            <div class="header-actions">
                <a href="admin.php" class="btn btn-back">
                    <i class="fas fa-arrow-left"></i> Go Back
                </a>
            </div>
        </div>

        <!-- CAOSCE Section -->
        <?php if (count($caosce_files) > 0): ?>
            <div class="section-title">
                <h2><i class="fas fa-desktop" style="color:#6d5dfc;"></i> CAOSCE Desktop Software</h2>
                <span class="badge caosce"><?= count($caosce_files) ?> available</span>
            </div>
            <div class="software-grid">
                <?php foreach ($caosce_files as $file): ?>
                    <div class="software-card caosce-card">
                        <div class="card-top">
                            <div class="icon-wrap">
                                <i class="fas fa-desktop"></i>
                            </div>
                            <div class="card-info">
                                <div class="software-name">CAOSCE</div>
                                <div class="software-version">
                                    <i class="fas fa-tag"></i> <?= getVersionDisplay($file['version']) ?>
                                </div>
                                <div class="software-details">
                                    <span><i class="fas fa-file-archive"></i> .<?= strtoupper($file['extension']) ?></span>
                                    <span><i class="fas fa-hdd"></i> <?= formatFileSize($file['size']) ?></span>
                                    <span class="platform-badge platform-desktop"><i class="fas fa-windows"></i> Windows Desktop</span>
                                </div>
                            </div>
                        </div>

                        <div class="instructions">
                            <div class="inst-title"><i class="fas fa-info-circle"></i> Installation Instructions</div>
                            <ol>
                                <li>Download the <strong>CAOSCEv<?= $file['version'] ?>.zip</strong> file</li>
                                <li>Extract the ZIP file to a folder on your computer</li>
                                <li>Open the extracted folder and run <strong>CAOSCEv<?= $file['version'] ?>.exe</strong></li>
                                <li>Follow the on-screen installation wizard</li>
                                <li>Launch CAOSCE from your desktop shortcut</li>
                                <li>Login using your institution credentials</li>
                            </ol>
                            <div class="note">
                                <i class="fas fa-lightbulb"></i>
                                <strong>Note:</strong> The .exe file is inside the ZIP folder. Extract first before installing.
                            </div>
                        </div>

                        <a href="?download=<?= urlencode($file['name']) ?>" class="btn-download">
                            <i class="fas fa-download"></i> Download CAOSCE v<?= $file['version'] ?> (ZIP)
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- OSCE Section -->
        <?php if (count($osce_files) > 0): ?>
            <div class="section-title">
                <h2><i class="fas fa-tablet-alt" style="color:#28a745;"></i> OSCE Android App</h2>
                <span class="badge osce"><?= count($osce_files) ?> available</span>
            </div>
            <div class="software-grid">
                <?php foreach ($osce_files as $file): ?>
                    <div class="software-card osce-card">
                        <div class="card-top">
                            <div class="icon-wrap">
                                <i class="fas fa-tablet-alt"></i>
                            </div>
                            <div class="card-info">
                                <div class="software-name">OSCE</div>
                                <div class="software-version">
                                    <i class="fas fa-tag"></i> <?= getVersionDisplay($file['version']) ?>
                                </div>
                                <div class="software-details">
                                    <span><i class="fas fa-file"></i> .<?= strtoupper($file['extension']) ?></span>
                                    <span><i class="fas fa-hdd"></i> <?= formatFileSize($file['size']) ?></span>
                                    <span class="platform-badge platform-android"><i class="fas fa-android"></i> Android Tablet</span>
                                </div>
                            </div>
                        </div>

                        <div class="instructions">
                            <div class="inst-title"><i class="fas fa-info-circle"></i> Installation Instructions</div>
                            <ol>
                                <li>Download the <strong>OSCEv<?= $file['version'] ?>.apk</strong> file</li>
                                <li>On your Android tablet, go to <strong>Settings → Security</strong></li>
                                <li>Enable <strong>"Install from Unknown Sources"</strong></li>
                                <li>Open the downloaded <strong>.apk</strong> file</li>
                                <li>Tap <strong>"Install"</strong> and wait for completion</li>
                                <li>Launch the OSCE app from your app drawer</li>
                            </ol>
                        </div>

                        <a href="?download=<?= urlencode($file['name']) ?>" class="btn-download">
                            <i class="fas fa-download"></i> Download OSCE v<?= $file['version'] ?>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Empty State -->
        <?php if (count($caosce_files) === 0 && count($osce_files) === 0): ?>
            <div class="empty-state">
                <i class="fas fa-cloud-upload-alt"></i>
                <h3>No Software Files Found</h3>
                <p>Please upload the required software files to the parent directory.</p>
                <p class="hint">
                    <i class="fas fa-info-circle"></i>
                    <strong>CAOSCE:</strong> Name the file as <strong>CAOSCEv2.zip</strong> (or any version number)
                </p>
                <p class="hint">
                    <i class="fas fa-info-circle"></i>
                    <strong>OSCE:</strong> Name the file as <strong>OSCEv1.apk</strong> (or any version number)
                </p>
                <p class="hint" style="margin-top:12px;">
                    <i class="fas fa-folder"></i> Directory: <?= htmlspecialchars($parent_dir) ?>
                </p>
            </div>
        <?php endif; ?>

    </main>

    <!-- ============================================================
         FOOTER
         ============================================================ -->
    <footer class="footer">
        <div>
            <strong><i class="fas fa-network-wired" style="margin-right:8px;"></i> CAOSCE Network</strong>
            <span style="margin-left:18px;">© <?php echo date('Y'); ?> All rights reserved</span>
        </div>
        <div class="meta">
            <span><i class="fas fa-code"></i> v2.0</span>
            <span>|</span>
            <span><i class="fas fa-user-cog"></i> Admin Panel</span>
            <span>|</span>
        </div>
    </footer>

</body>

</html>