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

        <title>Events | Xpecto</title>

        <!-- CSS only -->
        <link href="./css/preload.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="./css/navbar.css" />
        <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"
        />
        <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>
    </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 class="col mx-auto text-center">
                            <span class="text-white"></span> Events
                        </h1>
                    </div>
                    <h1 class="text-white">To be Updated Soon!</h1>

                    <% for (var i = 0; i < events.length; i++) { %>
                        <div class="card mb-8 mx-auto" style="max-width: 100%">
                            <div class="row g-0">
                                <div class="col-md-4">
                                    <img
                                        src="images/aa_1280.jpg"
                                        class="img-fluid rounded-start"
                                        alt="..."
                                    />
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title"><%= events[i].name %></h5>
                                        <p class="card-text"> 
                                            <%= events[i].createdAt %>
                                            <%= events[i].duration %> 
                                            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!
                                        </br></br>
            
                                            <a href="/event?event=<%=events[i].name %>" class="card-text btn btn-primary">
                                                <span class="fa fa-home"></span> <%=events[i].name %> | Go To Event</a
                                            >
                                            <a href="/" class="card-text btn btn-primary">
                                                <span class="fa fa-home"></span> Back to Home</a
                                            >
                                        </p>
                                        <p class="card-text">
                                            <small class="text-muted"
                                                ><%= events[i].createdAt %></br>Last updated 3 mins ago</small
                                            >
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% } %>
                </div>
            </section>
            <%- include('partials/navbar_menu.ejs') %>
        </div>

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