<!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>Create Team | Xpecto</title>
    </head>

    <style>
        .create-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: 500px;
            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;
        }

        .btn1 {
            font-weight: bold;
            padding: 0.25rem;
            width: 100px;
            border-radius: 5px;
            transition: 0.2s;
            font-size: 1.25rem;
            background-color: rgba(2, 84, 200, 1);
            color: white;
            border: 2px solid rgba(2, 84, 200, 1);
            display: flex;
            justify-content: center;
            margin: 2rem auto 1rem auto;
        }
        .btn1:hover {
            cursor: pointer;
            background-color: darkgreen;
            color: white;
            border-color: darkgreen;
            transition: 0.2s;
        }
        .btn1:active {
            background-color: grey;
            color: white;
            border-color: grey;
            transition: 0.2s;
        }
        @media (max-width: 480px) {
            .card {
                width: 300px;
            }
        }
        @media (max-width: 320px) {
            .card {
                width: 275px;
            }
        }
        .form-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            font-size: 1.5rem;
            margin: 1rem;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
        }

        input[type="text"] {
            background-color: black;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
        }
        input[type="text"]:focus {
            background-color: black;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
        }
    </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>Create</span>
                    <span>Team</span>
                </div>
            </div>
            <div class="prof-container">
                <!-- <div class="content"></div> -->
                <div class="card">
                    <div class="create-container">
                        <h1><%= event.name %></h1>
                        <hr />
                        <form
                            action="/createTeam?event=<%= event.name %>"
                            method="POST"
                        >
                            <div class="form-group">
                                <label for="teamName">Team Name</label>
                                <div class="msg"></div>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="teamName"
                                    placeholder="Enter team name"
                                    name="team_name"
                                    required
                                />
                            </div>
                            <button type="submit" class="btn1">Create</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="scripts/script.js"></script>
        <script src="scripts/ejs.js"></script>
        <script type="text/javascript">
            let uniqueTeam = ejs.render("<%= uniqueTeam %>").toString();
            const msg = document.querySelector(".msg");
            console.log("uniqueTeam = ", uniqueTeam);
            if (uniqueTeam === "false") {
                msg.style.color = "yellow";
                msg.innerHTML = "Team Name already taken!";
                setTimeout(() => msg.remove(), 2000);
            }
        </script>
    </body>
</html>
