<!DOCTYPE html>
<html lang="en">
<%- include("./partials/header.ejs") %>
<style>
    h2{
        display: inline;
        color: var(--btn);
        font-weight: bold;
    }
</style>
<body style="color: var(--btn);">
    <% if (locals.country) {%>
            <div class="row mb-5 mt-5" >
                <div class="col d-flex flex-col flex-wrap justify-content-center align-items-center w-100">
                    <div class="text-center">
                        <img src="<%= country.flags.png %>" class="img-fluid w-100 mb-4" alt="flag_img">
                        <h1 class="text-center"> <strong><%= locals.country.name.common %></strong></h1>
                    </div>
                </div>
            </div>
            <div class="row d-flex text-dark">
                <div class="col">
                        <ul class="list-group-flush">
                            <% if (country.name.common) { %>
                                <li class="list-group-item"><h2>Name: </h2><%= country.name.common%>(<%= country.cca2 %>)</li>
                            <% } %>
                            <% if (country.capital) { %>
                                <li class="list-group-item"><h2>Capital: </h2><%= country.capital %></li>
                            <% } %>
                            <% if (country.region) { %>
                                <li class="list-group-item"><h2>Region: </h2><%= country.region%></li>
                            <% } %>
                            <% if (country.subregion) { %>
                                <li class="list-group-item"><h2>Subregion: </h2><%= country.subregion%></li>
                            <% } %>
                            <% if (country.continents && country.continents.length === 1) { %>
                                <li class="list-group-item"><h2>Continents: </h2><%= country.continents[Object.keys(country.continents)[0]] %></li>
                            <% } else if(country.continents) { %>
                                <li class="list-group-item">
                                    <h2>Continents: </h2>
                                    <ul>
                                        <% for (const key in country.continents) { %>
                                            <li><%= country.continents[key] %></li>
                                        <% } %>
                                    </ul>
                                </li>
                            <% } %>
                            <% if (country.languages && country.languages.length === 1) { %>
                                <li class="list-group-item"><h2>Languages: </h2><%= country.languages[Object.keys(country.languages)[0]] %></li>
                            <% } else if(country.languages) { %>
                                <li class="list-group-item">
                                    <h2>Languages: </h2>
                                    <ul>
                                        <% for (const key in country.languages) { %>
                                            <li><%= country.languages[key] %></li>
                                        <% } %>
                                    </ul>
                                </li>
                            <% } %>
                            <% if (country.independent) { %>
                                <li class="list-group-item"><h2>Independent: </h2>Yes</li>
                            <% } else { %>
                                <li class="list-group-item"><h2>Independent: </h2>No</li>
                            <% } %>

                            <% if (country.unMember) { %>
                                <li class="list-group-item"><h2>UN Member: </h2>Yes</li>
                            <% } else { %>
                                <li class="list-group-item"><h2>UN Member: </h2>No</li>
                            <% } %>

                            <% if (country.currencies) { %>
                                <li class="list-group-item">
                                    <h2>Currencies: </span></h2>
                                    <ul>
                                        <% for (const key in country.currencies) { %>
                                            <li>
                                                <%= country.currencies[key].name %> (<%= country.currencies[key].symbol %>)
                                            </li>
                                        <% } %>
                                    </ul>
                                </li>
                            <% } %>

                            <% if (country.latlng) { %>
                                <li class="list-group-item"><h2>Latitude:</h2> <%= country.latlng[0] %> </br><h2>Longitude: </h2><%= country.latlng[1] %></li>
                            <% } %>

                            <% if (country.capitalInfo) { %>
                                <li class="list-group-item">
                                    <h2>Capital info:</h2>
                                    <ul>
                                        <% for (const key in country.capitalInfo) { %>
                                            <% const value = country.capitalInfo[key]; %>
                                            <li>
                                            <% if (key === "latlng") {%>
                                                <strong><%= key %>(lat, long): </strong> <%= Array.isArray(value) ? value.join(', ') : value %></li>
                                            <% } else { %>
                                                <strong><%= key %>: </strong> <%= Array.isArray(value) ? value.join(', ') : value %>
                                            </li>
                                            <% } %>
                                        <% } %>
                                    </ul>
                                </li>
                            <% } %>

                            <% if (country.landlocked) { %>
                                <li class="list-group-item"><h2>Landlocked: </h2>Yes</li>
                            <% } else { %>
                                <li class="list-group-item"><h2>Landlocked: </h2>No</li>
                            <% } %>

                            <% if (country.borders && country.borders.length > 0) { %>
                                <li class="list-group-item">
                                    <h2>Borders: </h2>
                                    <ul>
                                        <% country.borders.forEach(border => { %>
                                            <li><%= border %></li>
                                        <% }); %>
                                    </ul>
                                </li>
                            <% } %>
                            <% if (country.area) { %>
                                <li class="list-group-item"><h2>Area(kmÂ²): </h2> <%= country.area%></li>
                            <% } %>
                            <% if (country.population) { %>
                                <li class="list-group-item"><h2>Population: </h2> <%= country.population%></li>
                            <% } %>
                            <% if (country.maps) { %>
                                <li class="list-group-item">
                                    <h2>Maps: </h2>
                                    <ul>
                                        <% for (const key in country.maps) { %>
                                            <li><%= key %>:<a href="<%= country.maps[key] %>"><%= country.maps[key] %></a>
                                            </li>
                                        <% } %>
                                    </ul>
                                </li>
                            <% } %>
                            <% if (country.timezones && country.timezones.length > 0) { %>
                                <li class="list-group-item">
                                    <h2>Timezones: </h2>
                                    <ul>
                                        <% country.timezones.forEach(timezone => { %>
                                            <li><%= timezone %></li>
                                        <% }); %>
                                    </ul>
                                </li>
                            <% } %>
                            <% if(country.postalCode) {%>
                                <li class="list-group-item">
                                    <h2>Postal code: </h2>
                                    <% for (const key in country.postalCode) {%>
                                        <span>
                                            <strong><%= key %>: </strong><%= country.postalCode[key]%>;
                                        </span>
                                    <% } %>
                                </li>
                            <% } %>
                            <% if (country.startOfWeek) { %>
                                <li class="list-group-item"><h2>Start of Week: </h2><%= country.startOfWeek %></li>
                            <% } %>

                            <% if(country.flags) {%>
                                <li class="list-group-item">
                                    <h2>Flags imgs: </h2>
                                    <% for (const key in country.flags) {%>
                                        <% if(key === "alt") {%>
                                            <span style="display: block;">
                                                <strong><%= key %>: </strong><%= country.flags[key]%>
                                            </span>
                                        <% } else { %>
                                            <span style="display: block;">
                                                <strong><%= key%>: </strong>
                                                <a href="<%= country.flags[key] %>"><%= country.flags[key] %> </a>
                                            </span>
                                        <% } %>
                                    <% } %>
                                <% } %>
                            </li>
                            <% if (country.flag) { %>
                                <li class="list-group-item"><h2>Flag's emoji: <%= country.flag %></h2></li>
                            <% } %>
                            <% if(country.coatOfArms) {%>
                                <li class="list-group-item">
                                    <h2>Coat of arms: </h2>
                                    <% for (const key in country.coatOfArms) {%>
                                        <span style="display: block;">
                                            <strong><%= key%>: </strong>
                                            <a href="<%= country.coatOfArms[key] %>"><%= country.coatOfArms[key] %> </a>
                                        </span>
                                    <% } %>
                                <% } %>
                            </li>
                        </ul>
                </div>
            </div>
        <footer>
            <%- include("./partials/footer.ejs") %>
        </footer>
    <%}; %>
</body>
</html>
