<!DOCTYPE html>
<html>
    <head>
        <title>Profile | Xpecto</title>
        <!-- CSS only -->
        <link href="./css/preload.css" rel="stylesheet" type="text/css" />
        <!-- <link href="./css/index.css" rel="stylesheet" type="text/css" /> -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="./css/navbar.css" />
        <!-- font-awesome -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
            referrerpolicy="no-referrer"
            integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
            crossorigin="anonymous"
        />
        <style>
            /* body {
                padding-top: 70px;
            } */
            .bg {
                height: 100vh;
                width: 100vw;
                background: url("../images/xpecto_tempwall.png");
                /* background: url("https://user-images.githubusercontent.com/56690827/162190335-422b76d8-99a5-4fca-97e9-5a22d3154800.png"); */
                background-color: #171717;
                position: fixed;
                z-index: -1000;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 5.5em;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div class="bg"></div>
        <div class="home">
            <section class="showcase">
                <header>
                    <h2 class="logo">Xpecto '22</h2>
                    <div class="toggle"></div>
                </header>
                <div class="overlay"></div>

                <div class="container">
                    <div class="p-4 d-flex justify-content-center flex-nowrap">
                        <h1>
                            <a href="/" class="btn btn-primary">
                                <span class="fa fa-user"> Profile </span></a
                            >
                        </h1>
                    </div>
                    <div class="card mb-8 mx-auto" style="max-width: 40%">
                        <div class="row g-0">
                            <div class="col-md-4">
                                <img
                                    src="<%= user.image%>"
                                    class="img-fluid rounded-start"
                                    alt="..."
                                />
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <%= user.displayName %>
                                    </h5>
                                    <p class="card-text">
                                        <!-- <strong>Id</strong>: <%= user._id %><br /> -->
                                        <strong>Email</strong>: <%= user.email
                                        %><br />
                                        <strong>Name</strong>: <%=
                                        user.displayName %><br />
                                        <strong>firstName</strong>: <%=
                                        user.firstName %><br />
                                        <!-- <strong>googleid</strong>: <%=
                                        user.googleId %><br /> -->
                                    </p>
                                    <a
                                        href="/"
                                        class="card-text btn btn-primary"
                                    >
                                        <span class="fa fa-home"></span> Back to
                                        Home</a
                                    >
                                    <a
                                        href="/auth/logout"
                                        class="card-text btn btn-danger"
                                        ><span class="fa fa-google-plus"></span>
                                        Logout</a
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <%- include('partials/navbar_menu.ejs') %>
        </div>

        <script src="./js/script.js" type="text/javascript"></script>
    </body>
</html>
