<h5>Identity</h5>
<div class="form-group">
    <label class="form-label form-inline">First Name
        <input class="form-input" type="text" id="firstname" placeholder="First">
    </label>
    <label class="form-label form-inline">Middle Name
        <input class="form-input" type="text" id="middlename" placeholder="Middle">
    </label>
    <label class="form-label form-inline">Last Name
        <input class="form-input" type="text" id="lastname" placeholder="Last">
    </label>
</div>
<div class="form-group">
    <!-- <label class="form-label">Ethnicities
        <div class="form-group">
            <select class="form-select form-inline" multiple>
                <option>German</option>
                <option>Irish</option>
                <option>Mexican</option>
                <option>Canadian</option>
                <option>American</option>
                <option>British</option>
                <option>Chinese</option>
            </select>
        </div>
    </label> -->
    <label class="form-label">Ethnicities
        <div class="form-autocomplete">
            <div class="form-autocomplete-input form-input" id="ethnicity_chips">
                <input class="form-input" type="text" id="ethnicities">
            </div>
            <ul class="menu" id="ethnicities_menu" style="display: none;">
                <li class="menu-item">
                    <a href="#">
                        <div class="tile tile-centered">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </label>
</div>




<script>
    // Get the input element
    const input = document.getElementById("ethnicities");

    // Get the menu element
    const menu = document.getElementById('ethnicities_menu');
    const menuItems = menu.querySelectorAll("#ethnicities_menu li.menu-item");

    // Create an event listener for input changes
    input.addEventListener("input", async () => {
        // Get the current input value
        const value = input.value;

        // Clear the existing menu items
        menu.innerHTML = "";

        // Reset the menu items with original list
        menu.append(...menuItems);

        // If the input is blank, do not show the autocomplete list
        if (!value.trim()) {
            menu.style.display = "none";
            return;
        }

        // Send an AJAX request to the backend
        const response = await fetch(`/ethnicities?search=${value}`);
        const ethnicities = await response.json();

        // Add a list item for each ethnicity that matches the search
        for (const ethnicity of ethnicities) {
            const tile = document.createElement("div");
            tile.classList.add("tile", "tile-centered");
            tile.innerHTML = `
      <div class="tile-content">${ethnicity}</div>
    `;
            const link = document.createElement("a");
            link.setAttribute("href", "#");
            link.appendChild(tile);
            const listItem = document.createElement("li");
            listItem.classList.add("menu-item");
            listItem.appendChild(link);
            menu.appendChild(listItem);
        }
        menu.style.display = "block";
    });

    // Create an event listener for clicks on the menu items
    menu.addEventListener("click", (event) => {
        // Check if the target is a menu item
        if (event.target.closest(".menu-item")) {
            // Get the selected ethnicity
            const selected = event.target.closest(".menu-item").querySelector(".tile-content").textContent;

            // Create a chip element
            const chip = document.createElement("div");
            chip.classList.add("chip");
            chip.textContent = selected;

            // Add a close button
            const closeButton = document.createElement("a");
            closeButton.classList.add("btn", "btn-clear");
            closeButton.setAttribute("aria-label", "Close");
            closeButton.setAttribute("role", "button");
            closeButton.addEventListener("click", () => {
                chip.remove();
            });
            chip.appendChild(closeButton);

            // Insert the chip before the input element
            input.before(chip);

            // Clear the input text
            input.value = "";

            // Close the autocomplete menu
            menu.style.display = "none";
        }
    });

    // Create an event listener for clicks on the clear buttons
    const clearButtons = document.querySelectorAll("#ethnicity_chips .btn-clear");
    for (const clearButton of clearButtons) {
        clearButton.addEventListener("click", (event) => {
            event.preventDefault();
            event.target.closest(".chip").remove();
        });
    }

</script>
