<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Exploring countries</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="../public/output.css" th:href=@{~/public/output.css}
    rel="stylesheet" />
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- Place favicon.ico in the root directory -->
  </head>
  <body
    class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
    hx-boost="true"
  >
    <!--[if lt IE 8]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
      </p>
    <![endif]-->
    <header
      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none dark:bg-dark-blue"
    >
      <div
        class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
      >
        <a th:href="@{~/}" href="index.html"
          ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
        </a>
        <button id="toggleDarkMode" class="flex flex-row gap-x-2">
          <svg
            class="text-black dark:text-white h-6"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <p>Dark Mode</p>
        </button>
      </div>
    </header>
    <nav
      class="flex flex-col flex-none md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
    >
      <form
        method="get"
        id="search-country"
        action=""
        hx-get="/country"
        hx-target="body"
        hx-push-url="true"
        class="contents"
      >
        <div
          class="md:w-1/4 md:min-w-max flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg dark:bg-dark-blue"
        >
          <!-- <p class="w-16 grid place-content-center">IC</p> -->
          <svg
            class="text-black dark:text-white h-6 px-7"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z"
              fill="currentColor"
            />
          </svg>
          <input
            class="appearance-none flex-grow focus:outline-none mr-2 dark:bg-dark-blue dark:placeholder:text-white"
            type="text"
            id="country.nameView-input"
            name="countryName"
            list="country.nameViews-list"
            placeholder="Search for a country..."
            hx-post="/countries-cards"
            hx-target="#countries-main-list"
            hx-trigger="keyup changed delay:500ms"
          />
        </div>
        <datalist id="country.nameViews-list">
          <option
            th:each="country : ${allCountriesList}"
            th:value="${country.nameView}"
            value=""
          ></option>
        </datalist>
        <select
          name="region"
          class="block w-62 mt-1 h-14 md:h-16 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7 dark:bg-dark-blue"
          hx-post="/countries-cards"
          hx-target="#countries-main-list"
        >
          <option
            value=""
            selected
            disabled
            th:selected="${#strings.isEmpty(selectedRegion)}"
          >
            Filter by Region
          </option>
          <option
            th:each="region: ${regionsSet}"
            th:value="${region}"
            th:text="${region}"
            th:selected="${selectedRegion == region}"
            value="Africa"
          >
            Africa
          </option>
          <option th:remove="all" value="Americas">Americas</option>
          <option th:remove="all" value="Asia">Asia</option>
          <option th:remove="all" value="Europe">Europe</option>
          <option th:remove="all" value="Oceania">Oceania</option>
        </select>
      </form>
    </nav>
    <main
      class="flex flex-col items-center gap-10 pb-8 md:grid md:grid-cols-[repeat(auto-fill,_275px)] md:px-20 md:justify-around"
      id="countries-main-list"
    >
      <article
        th:fragment="cards-of-countries (countriesList)"
        th:each="country : ${countriesList}"
        id="germany"
        th:id="${country.alpha3Code}"
        class="bg-white min-h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
      >
        <a
          href="country.html"
          th:href="@{~/country(countryName=${country.nameView})}"
        >
          <img
            src="https://flagcdn.com/de.svg"
            th:src="${country.flag}"
            alt="flag of Germany"
            th:alt="|flag of ${country.nameView}|"
            class="rounded-t-lg max-h-56 w-full"
          />
          <section class="p-8 space-y-3 min-h-fit">
            <h2 class="text-2xl font-bold" th:text="${country.nameView}">
              Germany
            </h2>
            <dl class="space-y-1">
              <div class="flex">
                <dt class="font-bold mr-2">Population:</dt>
                <dd
                  th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
                >
                  81,771,900
                </dd>
              </div>
              <div class="flex">
                <dt class="font-bold mr-2">Region:</dt>
                <dd th:text="${country.region}">Europe</dd>
              </div>
              <div class="flex">
                <dt class="font-bold mr-2">Capital:</dt>
                <dd th:text="${country.capitalView}">Berlin</dd>
              </div>
            </dl>
          </section>
        </a>
      </article>
      <div
        th:fragment="infiniteScrollAnchor (nextPage, selectedRegion)"
        th:if="${nextPage != -1}"
        id="next-page-anchor"
        hx-trigger="revealed"
        th:hx-get="@{~/countries-cards(region=${selectedRegion},page=${nextPage},countryName=${countryName})}"
        hx-swap="outerHTML"
      ></div>

      <article
        id="usa"
        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
        th:remove="all"
      >
        <img
          src="https://flagcdn.com/us.svg"
          alt="flag of the USA"
          class="rounded-t-lg"
        />
        <section class="p-8 space-y-3">
          <h2 class="text-2xl font-bold">United States of America</h2>
          <dl class="space-y-1">
            <div class="flex">
              <dt class="font-bold mr-2">Population:</dt>
              <dd>329,484,123</dd>
            </div>
            <div class="flex">
              <dt class="font-bold mr-2">Region:</dt>
              <dd>Americas</dd>
            </div>
            <div class="flex">
              <dt class="font-bold mr-2">Capital:</dt>
              <dd>Washington, D.C.</dd>
            </div>
          </dl>
        </section>
      </article>

      <article
        id="Brazil"
        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
        th:remove="all"
      >
        <img
          src="https://flagcdn.com/br.svg"
          alt="flag of Germany"
          class="rounded-t-lg"
        />
        <section class="p-8 space-y-3">
          <h2 class="text-2xl font-bold">Brazil</h2>
          <dl class="space-y-1">
            <div class="flex">
              <dt class="font-bold mr-2">Population:</dt>
              <dd>212,559,409</dd>
            </div>
            <div class="flex">
              <dt class="font-bold mr-2">Region:</dt>
              <dd>Americas</dd>
            </div>
            <div class="flex">
              <dt class="font-bold mr-2">Capital:</dt>
              <dd>Brasília</dd>
            </div>
          </dl>
        </section>
      </article>
    </main>
    <script id="dark-mode-scripts" type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        const darkMode = localStorage.getItem("darkMode");
        if (darkMode === "true") {
          document.documentElement.classList.add("dark");
        } else {
          document.documentElement.classList.remove("dark");
        }
      });
      document
        .getElementById("toggleDarkMode")
        .addEventListener("click", function () {
          document.documentElement.classList.toggle("dark");
          localStorage.setItem(
            "darkMode",
            document.documentElement.classList.contains("dark")
          );
        });
    </script>
  </body>
</html>
