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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yaqeen-Halal-Food</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/home.css">
</head>

<body class="d-flex text-center text-white bg-dark">
    <div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="mb-auto">
            <div class="container">
                <h3 class="float-md-left mb-0">Yaqeen-Halal-Food</h3>
                <nav class="nav nav-masthead justify-content-center float-md-right">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                    <a class="nav-link" href="/products">Products</a>

                    <% if(!currentUser) { %>
                        <a class="nav-link" href="/user/login">Login</a>
                        <a class="nav-link" href="/user/register">Register</a>
                        <% } else { %>
                            <a class="nav-link" href="/user/logout">Logout</a>
                            <% } %>
                </nav>
            </div>
        </header>
        <main class="px-3">
            <h1>Yaqeen-Halal-Food</h1>
            <p class="lead" style="color: aliceblue;"> Welcome to Yaqeen-Halal-Food! <br> Jump right in and explore our gallery of Halal products!</p>
            <a href="/products" class="btn btn-secondary btn-responsive font-weight-bold border-white bg-white">Browse Categories</a>
        </main>

        <footer class="mt-auto text-white-50">
            <p>&copy; 2021 </p>
        </footer>


    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>

</html>