<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Event | <%= event.name %> | Xpecto</title>
        <link href="./css/preload.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="./css/navbar.css" />
        <!-- CSS only -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        />
        <!-- 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"
        />
    </head>
    <style>
        header {
            display: flex;
            padding-left: 40px;
            padding-right: 10px;
        }
        .showcase.active {
            right: 250px;
        }
        @media (max-width: 768px) {
            .showcase.active {
                right: 50%;
            }
        }
        @media (max-width: 480px) {
            .showcase.active {
                right: 75%;
            }
            header .logo {
                font-size: 1.5rem;
            }
            .text-white {
            }
            header {
                /* padding-left: 10px; */
                padding-right: 10px;
                display: flex;
                /* align-items: flex-end; */
            }
            .showcase {
                padding-right: 50px;
            }
        }
    </style>

    <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>
                <h1 class="text-white">To be Updated Soon!</h1>

                <div class="container">
                    <div class="p-4 d-flex justify-content-center flex-nowrap">
                        <h1 class="col text-primary mx-auto text-center">
                            <span class="fa fa-user"></span> Event - <%=
                            event.name %>
                        </h1>
                    </div>
                    <div class="col-md-8 mx-auto bg-white">
                        <div class="card-body">
                            <div class="mx-auto text-center">
                                <% if(team){ %>
                                <a
                                    class="btn btn-primary"
                                    href="/userTeam?event=<%= event.name %>"
                                    >YourTeam</a
                                >
                                <% }else{ %>
                                <a
                                    class="btn btn-primary"
                                    href="/createTeam?event=<%= event.name %>"
                                    >CreateTeam</a
                                >
                                <a
                                    class="btn btn-primary"
                                    href="/joinTeam?event=<%= event.name %>"
                                    >JoinTeam</a
                                >
                                <% } %>
                            </div>
                            <h5 class="card-title"><%= event.name %></h5>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur,
                                adipisicing elit. Maiores quae, aliquam tempore
                                magnam modi asperiores, quidem ex maxime nihil
                                blanditiis molestias nemo laudantium quos eum
                                atque dolores, culpa dolore dignissimos! Lorem
                                ipsum dolor sit, amet consectetur adipisicing
                                elit. Cum ducimus blanditiis ratione laudantium,
                                itaque possimus amet labore recusandae suscipit
                                explicabo ipsa culpa aut quod error ipsam?
                                Impedit accusantium nam adipisci! Lorem ipsum
                                dolor sit, amet consectetur adipisicing elit. In
                                perspiciatis tenetur eligendi magni dolore
                                repellat. Labore quaerat temporibus eos fugit,
                                earum soluta accusantium ullam minima sequi
                                facere. Dolores, ratione asperiores!
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <%- include('partials/navbar_menu.ejs') %>
        </div>

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