<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="language" content="english">
    <meta name="copyright" content="Copyright © <?= date('Y') . ' ' . APP['name']; ?>">
    <meta name="color-scheme" content="light dark" />
    <meta name="supported-color-schemes" content="light dark" />
    <meta name="theme-color" content="<?= APP['theme']; ?>">
    <meta name="msapplication-navbutton-color" content="<?= APP['theme']; ?>" />
    <meta name="apple-mobile-web-app-status-bar-style" content="<?= APP['theme']; ?>" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="msapplication-starturl" content="/">
    <link rel="shortcut icon" type="image/x-icon" href="<?= APP['favicon']; ?>" />
    <?= $data['meta']; ?>
    <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=Manrope:wght@200..800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/restaurant/css/main.css" />
    <link rel="stylesheet" href="/assets/restaurant/css/login.css" />
</head>

<body>
    <div class="wrapper is-logged-in">
        <header class="header-login full-width">
            <div class="header-logo flex">
                <img src="<?= APP['logo-mini']; ?>" alt="zoop logo icon" />
            </div>
        </header>
        <main class="main-login">
            <div class="zoop-z flex-center">
                <img src="<?= APP['favicon']; ?>" alt="zoop z alternative icon">
            </div>
            <div class="salutation">
                <!-- render salutation here -->
            </div>
            <!-- sign in -->
            <div class="signin-welcome flex-column-center">
                <div class="user-log full-width flex-column-center">
                    <!-- render user log here -->
                </div>

                <div class="secondary-signin full-width flex-column-center">
                    <!-- render secondary signin here -->
                </div>
            </div>
            <div class="terms-conditions flex-center">
                <div class="flex-sm">
                    <a href="#" class="misc-text">Privacy</a>
                    <a href="#" class="misc-text">Terms</a>
                </div>
            </div>
        </main>
    </div>
    <script src="/assets/restaurant/js/login.js"></script>
</body>

</html>