<!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" />
        <meta property="og:url" content="https://xpecto.tech/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Xpecto" />
        <meta
            name="description"
            content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
        />
        <meta
            name="keywords"
            content="Team, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
        />
        <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" />
        <link rel="stylesheet" href="styles/profile.css" />

        <title>Your Team | Xpecto</title>
    </head>

    <style>
        .user-container h1 {
            text-align: center;
        }
        #page .content {
            padding-top: 1rem;
        }
        #page .container {
            padding-top: 7.5rem;
            width: 500px;
        }
        #page .heading {
            line-height: 2;
            font-size: 3rem;
        }
        .card {
            color: white;
            font-weight: bold;
            width: 700px;
            padding: 2rem;
            backdrop-filter: blur(10px) saturate(200%);
            -webkit-backdrop-filter: blur(10px) saturate(200%);
            background-color: rgba(0, 16, 45, 0.781);
            border-radius: 12px;
            border: 2px solid rgba(255, 255, 255, 0.125);
            margin-top: 7rem;
        }

        .btn-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            align-items: center;
        }

        a {
            text-decoration: none;
        }
        .btn1 {
            width: 200px;
            text-decoration: none;
            padding: 0.25rem;
            border-radius: 5px;
            transition: 0.2s;
            font-size: 1.25rem;
            display: flex;
            justify-content: center;
            margin: 1rem auto;
        }
        .new {
            color: white;
            border: 2px solid rgba(2, 84, 200, 1);
            background-color: rgba(2, 84, 200, 1);
        }
        .new:hover {
            background-color: grey;
            color: white;
            border-color: grey;
            transition: 0.2s;
        }
        .delete {
            border: 2px solid red;
            color: white;
            background-color: red;
        }
        .delete:hover {
            background-color: grey;
            color: white;
            border-color: grey;
            transition: 0.2s;
        }
        @media (max-width: 480px) {
            .btn1 {
                font-size: 1rem;
            }
        }
        @media (max-width: 400px) {
            td {
                font-size: 0.75rem;
            }
        }
        table {
            margin-left: auto;
            margin-right: auto;
        }
        .remove {
            color: white;
            background-color: red;
        }
        @media (max-width: 920px) {
            .card {
                width: 500px;
            }
        }
        @media (max-width: 480px) {
            .card {
                width: 300px;
            }
            .btn1 {
                font-size: 1rem;
            }
            td {
                font-size: 0.75rem;
            }
        }

        tr {
            margin-bottom: 1rem;
        }

        @media (max-width: 320px) {
            .card {
                width: 275px;
            }
        }
        @media (min-width: 900px) {
            tr {
                display: flex;
                flex-direction: row;
            }
            td {
                padding: 1rem;
            }
            tr:nth-child(1) {
                margin-right: 1rem;
            }
        }
        @media (max-width: 510px) {
            .card {
                width: 350px;
            }
        }
        @media (max-width: 400px) {
            .card {
                width: 300px;
            }
        }
    </style>
    <body>
        <!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
        <%- include ('partials/navbar.ejs') %>
        <!-- -----HEADER END----- -->

        <div class="" id="page">
            <div class="container">
                <div class="heading" style="color: aqua">
                    <span>User</span>
                    <span>Team</span>
                </div>
            </div>
            <div class="prof-container">
                <!-- <div class="content"></div> -->
                <div class="card">
                    <div class="user-container">
                        <div>
                            <h1 class="user-heading" style="color: aqua">
                                Team - <%= team.name.toUpperCase() %>
                            </h1>
                            <br />
                            <hr />
                            <br />
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <td>Team Name</td>
                                    <td><%= team.name.toUpperCase() %></td>
                                </tr>
                                <!-- <tr>
                                    <td>Team ID</td>
                                    <td><%= team._id %></td>
                                </tr> -->
                                <tr>
                                    <td>Event Name</td>
                                    <td><%= event.name %></td>
                                </tr>
                                <tr>
                                    <td>Leader ID</td>
                                    <td><%= leaderinfo.displayName %></td>
                                </tr>
                                <tr>
                                    <td>Team Members</td>
                                    <td>
                                        <% for( let index = 0; index <
                                        membersinfo.length; index++ ) { %> <%=
                                        membersinfo[index].displayName %> <%
                                        if(isLeader) {%>
                                        <a
                                            href="removeMember?team=<%= team._id %>&member=<%= membersinfo[index]._id %>"
                                            ><button class="remove">
                                                Remove
                                            </button>
                                        </a>
                                        <% } %> <% } %>
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td>Creation Time</td>
                                    <td><%= team.createdAt %></td>
                                </tr> -->
                            </table>
                            <br />
                            <hr />
                            <br />
                            <% if (inviteCode && isLeader) {%>
                            <table>
                                <tr>
                                    <td>InviteCode</td>
                                    <td><%= inviteCode %></td>
                                </tr>
                                <tr>
                                    <td>ValidUpto</td>
                                    <td><%= validUpto %></td>
                                </tr>
                            </table>
                            <br />
                            <hr />
                            <% } %> <% if(isLeader) {%>
                            <div class="btn-container">
                                <a
                                    href="/generateInviteCode?team=<%= team._id %>"
                                    ><button class="new btn1">
                                        Generate New Invite Code
                                    </button></a
                                >
                                <a
                                    href="/deleteTeam?team=<%= team._id %>&event=<%= team.event %>"
                                    ><button class="delete btn1">
                                        Delete Team
                                    </button></a
                                >
                            </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="scripts/script.js"></script>
        <script src="scripts/ejs.js"></script>
    </body>
</html>
