<!DOCTYPE html>
<html lang="en">
<%- include("./partials/header.ejs") %>
<style>
    h1{
        color: var(--btn);
    }
    button{
        color: var(--text);
    }
</style>
<body class="d-flex flex-column justify-content-between align-content-center vh-100">
    <div class="d-flex justify-content-center">
        <div class="w-50 p-3">
            <div class="d-flex flex-column align-items-center text-center">
                <% if (locals.content) { %>
                    <h1><strong>Write <%= content %></strong></h1>
                    <form action="/search_type" method="POST" class="mt-3">
                        <input type="text" class="form-control" name="searchTerm">
                        <input type="hidden" class="form-control" name="searchType" value="<%= content %>">
                        <button class="btn my-button mt-3 mb-5" type="submit">SEARCH</button>
                    </form>
                    <p class="align-self-start">
                        <button class="btn fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                          <strong>Search all <%= content %>s â‡…</strong>
                        </button>
                    </p>
                    <div class="collapse" id="collapseExample">
                        <div class="row fs-6 align-items-center mt-5 justify-content-center">
                        <% switch (content) {
                            case "name":
                                for (let i = 0; i < names.length; i++) { %>
                                    <span class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
                                        <%= names[i] %><br>
                                    </span>
                                <% } %>
                                <% break;
                            case "capital":
                                for (let i = 0; i < capitals.length; i++) { %>
                                    <span class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
                                        <%= capitals[i] %><br>
                                    </span>
                                <% } %>
                                <% break;
                            case "language":
                                for (let i = 0; i < languages.length; i++) { %>
                                    <span class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
                                        <%= languages[i] %><br>
                                    </span>
                                <% } %>
                                <% break;
                            case "region":
                                for (let i = 0; i < regions.length; i++) { %>
                                    <span class="col-6 col-sm-4 col-md-3 mb-3">
                                        <%= regions[i] %><br>
                                    </span>
                                <% } %>
                                <% break;
                            case "subregion":
                                for (let i = 0; i < subregions.length; i++) { %>
                                    <span class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3">
                                        <%= subregions[i] %><br>
                                    </span>
                                <% } %>
                                <% break;
                        } %>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    <footer>
        <%- include("./partials/footer.ejs") %>
    </footer>

</body>
</html>

