From 153f5ef9ce08b523b714ff2f62dc2ef306be6012 Mon Sep 17 00:00:00 2001
From: efim <efim666@bk.ru>
Date: Sat, 23 Sep 2023 10:24:08 +0000
Subject: [PATCH] feat: displaying country previews dynamically

---
 .../src/main/resources/templates/index.html    | 18 +++++++++++++-----
 .../src/main/scala/example/Country.scala       |  1 +
 .../src/main/scala/example/Routes.scala        |  4 ++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/16-countries-page-from-api/src/main/resources/templates/index.html b/16-countries-page-from-api/src/main/resources/templates/index.html
index cf46810..66b19ed 100644
--- a/16-countries-page-from-api/src/main/resources/templates/index.html
+++ b/16-countries-page-from-api/src/main/resources/templates/index.html
@@ -50,30 +50,38 @@
         </select>
       </form>
     </nav>
-    <main class="flex flex-col items-center gap-10 pb-8">
+    <main class="flex flex-col items-center gap-10 pb-8"
+          th:remove="all-but-first"
+    >
       <article
+        th:each="country : ${countriesList}"
         id="germany"
+        th:id="${country.alpha3Code}"
         class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
       >
         <img
           src="https://flagcdn.com/de.svg"
+          th:src="${country.flag}"
           alt="flag of Germany"
+          th:alt="|flag of ${country.name}|"
           class="rounded-t-lg"
         />
         <section class="p-8 space-y-3">
-          <h2 class="text-2xl font-bold">Germany</h2>
+          <h2 class="text-2xl font-bold"
+              th:text="${country.name}"
+          >Germany</h2>
           <dl class="space-y-1">
             <div class="flex">
               <dt class="font-bold mr-2">Population:</dt>
-              <dd>81,771,900</dd>
+              <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>Europe</dd>
+              <dd th:text="${country.region}">Europe</dd>
             </div>
             <div class="flex">
               <dt class="font-bold mr-2">Capital:</dt>
-              <dd>Berlin</dd>
+              <dd th:text="${country.capital}">Berlin</dd>
             </div>
           </dl>
         </section>
diff --git a/16-countries-page-from-api/src/main/scala/example/Country.scala b/16-countries-page-from-api/src/main/scala/example/Country.scala
index 91267ea..4d59c28 100644
--- a/16-countries-page-from-api/src/main/scala/example/Country.scala
+++ b/16-countries-page-from-api/src/main/scala/example/Country.scala
@@ -9,6 +9,7 @@ final case class Country(
   population: Int,
   region: String,
   subregion: String,
+  flag: String,
   capital: String = "",
   topLevelDomain: Option[String], // maybe optional?
   currencies: List[Currency] = List.empty,
diff --git a/16-countries-page-from-api/src/main/scala/example/Routes.scala b/16-countries-page-from-api/src/main/scala/example/Routes.scala
index 61b533f..7cc1880 100644
--- a/16-countries-page-from-api/src/main/scala/example/Routes.scala
+++ b/16-countries-page-from-api/src/main/scala/example/Routes.scala
@@ -5,7 +5,7 @@ import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver
 import org.thymeleaf.TemplateEngine
 import org.thymeleaf.context.Context
 import org.thymeleaf.templatemode.TemplateMode
-import scala.collection.JavaConverters._
+import scala.jdk.CollectionConverters._
 
 case class Routes(countries: List[Country])(implicit
     cc: castor.Context,
@@ -32,7 +32,7 @@ case class Routes(countries: List[Country])(implicit
 
     val regions = countries.map(_.region).distinct.sorted.asJava
     context.setVariable("regionsSet", regions)
-    println(s"> got $regions")
+    context.setVariable("countriesList", countries.asJava)
 
     val indexPage = engine.process("index", context)
     Response(