<!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 th:replace="~{index :: header}">
      <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-none h-32 px-8 py-10 max-w-screen-xl place-self-center w-full md:h-48 items-center"
    >
      <a href="index.html" th:href="@{~/}" class="h-fit">
        <div
          class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center dark:bg-dark-blue"
        >
          <!-- Back icon -->
          <svg
            class="text-black dark:text-white h-full"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <!-- <img
     src="../public/icons/back-svgrepo-com.svg"
     class="w-4 h-5"
     alt=""
     /> -->
          <p>Back</p>
        </div>
      </a>
    </nav>

    <main
      class="px-8 pb-10 flex flex-col gap-y-10 md:grid md:grid-cols-2 md:h-max md:place-self-center w-full max-w-screen-xl"
    >
      <img
        src="https://flagcdn.com/de.svg"
        th:src="${country.flag}"
        th:alt="|flag of ${country.nameView}|"
        class="w-full md:w-10/12"
      />
      <section
        id="stat-block"
        class="contents md:grid md:grid-cols-2 md:gap-y-10 md:py-10"
      >
        <h1
          class="text-2xl font-bold pt-2 -mb-4 md:col-span-full md:text-3xl"
          th:text="${country.nameView}"
        >
          Germany
        </h1>
        <dl class="space-y-2" id="main-stats">
          <div class="flex">
            <dt class="font-bold mr-2">Native name:</dt>
            <dd th:text="${country.nativeName}">Belgie</dd>
          </div>
          <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">Sub Region:</dt>
            <dd th:text="${country.subregion}">Western Europe</dd>
          </div>
          <div class="flex">
            <dt class="font-bold mr-2">Capital:</dt>
            <dd th:text="${country.capitalView}">Berlin</dd>
          </div>
        </dl>

        <dl class="space-y-2" id="additional-stats">
          <div th:if="${country.topLevelDomain.nonEmpty()}" class="flex">
            <dt class="font-bold mr-2">Top Level Domain:</dt>
            <dd th:text="${country.topLevelDomain.get()}">.be</dd>
          </div>
          <div class="flex">
            <dt class="font-bold mr-2">Currencies:</dt>
            <!-- <dd th:text="${#strings.listJoin(country.currencies.map(_.name),',')}">Euro</dd> -->
            <dd th:text="${#strings.listJoin(country.currenciesView, ',')}">
              Euro
            </dd>
          </div>
          <div class="flex">
            <dt class="font-bold mr-2">Languages:</dt>
            <dd th:text="${#strings.listJoin(country.languagesView, ', ')}">
              Dutch, French, German
            </dd>
          </div>
        </dl>
        <section
          id="neighboring-countries"
          class="md:col-span-full md:flex md:flex-row md:items-center md:gap-x-2"
        >
          <h2 class="font-bold text-lg md:pr-2">Border Countries:</h2>
          <div class="grid grid-cols-3 gap-2">
            <a
              href="/"
              class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1 dark:bg-dark-blue"
              th:each="border : ${borderCountries}"
              th:text="${border}"
              th:href="@{~/country(countryName=${border})}"
              >France</a
            >
          </div>
        </section>
      </section>
    </main>
    <script
      th:replace="~{index :: script#dark-mode-scripts}"
      type="text/javascript"
    >
      document.addEventListener("DOMContentLoaded", function () {
        const darkMode = localStorage.getItem("darkMode");
        console.log("yoyo");
        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>
