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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="images/xpecto-logo-header.png" />
    <script src="https://kit.fontawesome.com/a1542a4884.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/page.css" />
    <link rel="stylesheet" href="styles/style.css" />

    <title>Events | Xpecto</title>
</head>

<style>
    #page .container {
        padding-top: 2.5rem;
        width: 250px;
    }

    #page .heading span {
        font-size: 2.5rem;
        padding-right: 2.5rem;
        transform: skew(0deg);
    }

    #page .heading {
        line-height: 1.5;
        padding-left: 7.5rem;
        padding-top: 25%;
        display: flex;
        align-items: baseline;
        transform: skewX(-7.5deg);
    }
</style>

<body>
    <!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
    <%- include ('partials/navbar.ejs') %>
    <!-- -----HEADER END----- -->

    <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>
        <br>
        <br><br>
        <div class="col-md-8 mx-auto bg-white">
            <div class="card-body">
                <div class="card-img col-md-4">
                    <h5 class="card-title">
                        <%= event.name %>
                    </h5>

                    <img src="images/eventimg/<%= event.event_image %>" class="img-fluid rounded-start"
                        style="padding-left: 50%" alt="<%= event.event_image %>" />
                </div>
                <p class="card-text">
                    <%= event.content %>
                </p>

                <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>
                            <% } %>
                </div>
            </div>
        </div>
    </div>

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

</html>