<?php

declare(strict_types=1);

$applications = [
    [
        'name' => 'SOLUS',
        'url' => 'https://saself.ps.queensu.ca/psp/saself/EMPLOYEE/SA/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL?LP=QU_SCC_STUDENTS_HOMEPAGE',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'SOLUS icon',
    ],
    [
        'name' => 'MyHR',
        'url' => 'https://hrprd.ps.queensu.ca/psc/hrprd/EMPLOYEE/ERP/s/WEBLIB_QU_SSO.FUNCLIB_01.FieldFormula.IScript_SSO',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'MyHR icon',
    ],
    [
        'name' => 'NetID Profile Manager',
        'url' => 'https://netid.queensu.ca',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'NetID Profile Manager icon',
    ],
    [
        'name' => 'Office 365 Email',
        'url' => 'https://outlook.com/queensu.ca',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/microsoft-outlook.svg',
        'alt' => 'Office 365 Email logo',
    ],
    [
        'name' => 'onQ',
        'url' => 'https://onq.queensu.ca/',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/onq.png',
        'alt' => 'onQ logo',
    ],
    [
        'name' => 'PeopleSoft Student Admin',
        'url' => 'https://csprd.ps.queensu.ca/psc/csprd/EMPLOYEE/ERP/s/WEBLIB_QU_SSO.FUNCLIB_01.FieldFormula.IScript_SSO',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'PeopleSoft Student Admin icon',
    ],
    [
        'name' => 'Expense Reimbursement (ERS)',
        'url' => 'https://www-us.api.concursolutions.com/sso/saml2/V2/authnrequest/85814fa4-4652-4cfa-a1f1-7602f079fb3a/1616429120069',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/concur.svg',
        'alt' => 'Expense Reimbursement logo',
    ],
    [
        'name' => 'acQuire',
        'url' => 'https://solutions.sciquest.com/apps/Router/SAMLAuth/QueensU',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/acquire.png',
        'alt' => 'acQuire logo',
    ],
    [
        'name' => 'Financial Reporting (FAST)',
        'url' => 'https://fast.queensu.ca/FASTPORTAL_PROD/FASTFINANCE/Home_Finance.aspx',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'Financial Reporting icon',
    ],
    [
        'name' => 'PeopleSoft Finance',
        'url' => 'https://fnprd.ps.queensu.ca/psc/fnprd/EMPLOYEE/ERP/s/WEBLIB_QU_SSO.FUNCLIB_01.FieldFormula.IScript_SSO',
        'icon' => 'https://qladosstatic.blob.core.windows.net/widget-images/application_icon.png',
        'alt' => 'PeopleSoft Finance icon',
    ],
];

?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Maintenance | MyQueen'sU</title>
     <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/font-awesome.min.css">
     <style>
         :root {
            --queens-blue: rgb(0, 36, 82);
            --queens-blue-dark: #0a2a50;
            --queens-red: #9d1939;
            --line: #d9d9d9;
            --ink: #123b6d;
            --text: #1f2a35;
            --muted: #4c5966;
            --panel: #f0f0f0;
            --max-width: 1160px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            color-scheme: light;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
            color: var(--text);
            background: #ffffff;
        }

        a {
            color: inherit;
        }

        a:focus-visible {
            outline: 2px solid #000000;
            outline-offset: 2px;
        }

        .page {
            width: 100%;
            min-height: 100vh;
            display: flex;
            background: #ffffff;
        }

        .sidebar {
            width: 272px;
            flex: 0 0 272px;
            background: var(--queens-blue);
            color: #ffffff;
            padding: 2rem 1rem 2rem 0.75rem;
        }

        .sidebar-brand {
            display: block;
            margin-bottom: 2rem;
            text-align: center;
        }

        .sidebar-brand img {
            display: block;
            width: 210px;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
        }

        .sidebar-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .sidebar-links a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            position: relative;
            padding: 1.15rem 1.5rem 1.15rem 0;
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            color: #ffffff;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 700;
        }

        .sidebar-links a::after {
            content: "\f08e";
            display: inline-block;
            font-family: FontAwesome;
            position: absolute;
            right: 0;
        }

        .sidebar-links a:hover {
            border-bottom-color: #fabd0f;
            color: #fabd0f;
            text-decoration: none;
            z-index: 1;
        }

        .main {
            flex: 1 1 auto;
            min-width: 0;
            background: #ffffff;
        }

        .main-inner {
            padding: 1.8rem 1.25rem 2.5rem;
        }

        .page-title {
            margin: 0 0 2rem;
            display: block;
            font-family: "Open Sans", sans-serif;
            font-size: 51.2px;
            line-height: 1.1;
            font-weight: 600;
            color: rgb(0, 36, 82);
        }

        .notice {
            padding-bottom: 1.75rem;
            border-bottom: 1px solid var(--line);
        }

        .notice p {
            margin: 0;
            max-width: 54rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text);
        }

        .apps-section {
            padding-top: 2rem;
        }

        .apps-section h2 {
            margin: 0 0 1.5rem;
            font-size: 2.2rem;
            line-height: 1.15;
            font-weight: 400;
            color: var(--ink);
        }

        .apps-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem 1.75rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .app-item {
            min-width: 0;
        }

        .app-link {
            display: grid;
            grid-template-columns: 60px minmax(0, 1fr);
            gap: 1rem;
            align-items: start;
            text-decoration: none;
            color: inherit;
        }

        .app-icon {
            display: block;
            width: 48px;
            height: 48px;
            object-fit: contain;
        }

        .app-name {
            margin: 0;
            color: var(--ink);
            font-size: 0.98rem;
            line-height: 1.45;
            font-weight: 400;
        }

        .app-link:hover .app-name {
            text-decoration: underline;
        }

        @media (max-width: 980px) {
            .page {
                display: block;
                border: 0;
            }

            .sidebar {
                width: auto;
                padding-right: 1rem;
            }

            .main-inner {
                padding-top: 1.5rem;
            }

            .page-title {
                font-size: 44px;
            }

            .apps-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .sidebar-brand img {
                width: 185px;
            }

            .page-title {
                font-size: 36px;
            }

            .apps-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }
        }
    </style>
</head>
<body>
<div class="page">
    <aside class="sidebar" aria-label="Quick access links">
        <a class="sidebar-brand" href="https://www.queensu.ca/" target="_blank" rel="noopener noreferrer">
            <img src="images/Queens-university-logo-horizontal-digital-rgb-full-colour-reverse-website.svg" alt="Queen's University">
        </a>

        <ul class="sidebar-links">
            <li>
                <a href="https://saself.ps.queensu.ca/psp/saself/EMPLOYEE/SA/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL?LP=QU_SCC_STUDENTS_HOMEPAGE" target="_blank" rel="noopener noreferrer">
                    <span>SOLUS login</span>
                </a>
            </li>
            <li>
                <a href="https://hrprd.ps.queensu.ca/psc/hrprd/EMPLOYEE/ERP/s/WEBLIB_QU_SSO.FUNCLIB_01.FieldFormula.IScript_SSO" target="_blank" rel="noopener noreferrer">
                    <span>MyHR login</span>
                </a>
            </li>
            <li>
                <a href="https://netid.queensu.ca" target="_blank" rel="noopener noreferrer">
                    <span>Manage my NetID</span>
                </a>
            </li>
        </ul>

    </aside>

    <main class="main">
        <div class="main-inner">
            <p class="page-title">MyQueen'sU</p>

            <section class="notice">
                <p>MyQueen'sU is unavailable while maintenance is in progress. Use the direct links on this page to access the most frequently used applications.</p>
            </section>

            <section class="apps-section" aria-labelledby="apps-heading">
                <h2 id="apps-heading">Applications</h2>

                <ul class="apps-grid" aria-label="Available applications during maintenance">
                    <?php foreach ($applications as $application): ?>
                        <li class="app-item">
                            <a class="app-link" href="<?= htmlspecialchars($application['url'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer">
                                <img
                                    class="app-icon"
                                    src="<?= htmlspecialchars($application['icon'], ENT_QUOTES, 'UTF-8') ?>"
                                    alt="<?= htmlspecialchars($application['alt'], ENT_QUOTES, 'UTF-8') ?>"
                                    loading="lazy"
                                >
                                <div>
                                    <p class="app-name"><?= htmlspecialchars($application['name'], ENT_QUOTES, 'UTF-8') ?></p>
                                </div>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </section>
        </div>
    </main>
</div>
</body>
</html>
