<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Your Team</title>
    <link rel="stylesheet" href="/css/create-team.css">
    <link rel="stylesheet" href="/css/add-member.css">
    <script src="https://kit.fontawesome.com/3ef4bc1872.js" crossorigin="anonymous"></script>
</head>
<body>
    <form id="root">
        <header>
            <a href="/my-team/<%= team_id %>">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>Add member</h1>
            <button type="submit" id="check-button">
                <i id="check-icon" class="fas fa-check"></i>
            </button>
        </header>
        <main>
            <% if (message != '') { %>
                <p class="error-message"><%- message %></p>
            <% } %>
            <div class="form-element">
                <label for="name">Search user's name or email </label>
                <input type="text" id="search" name="name" class="form-input" placeholder="&#xf002; Your Team's Name">
            </div>
            <div id="search-result">
                <h1>
                    No Data Rechieved
                </h1>
                
            </div>
        </main> 
    </form>
</body>
<script>
    const search = document.getElementById('search');
    search.onkeyup = async function(){
        const searchValue = document.getElementById('search');
        console.log(searchValue.value);
        const ajaxSearch = await fetch(`/api/user/search?search=${searchValue.value}&room_id=<%= team_id %>`);
        const response = await ajaxSearch.text()
        const resultShow = document.getElementById('search-result');
        if(response != ''){
            resultShow.innerHTML = response
        }
    } 
</script>
</html>