fix: swap beforeend to prevent nesting main

and url push from the server, because requesting cards now done on a
separate endpoint

16-countries-page-from-api/src/main/resources/templates/index.html

@@ -78,10 +78,8 @@
         <select
           name="region"
           class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7"
-          hx-get="/"
+          hx-get="/countries-cards"
           hx-target="#countries-main-list"
-          hx-select="#countries-main-list"
-          hx-push-url="true"
         >
           <option
             value=""

16-countries-page-from-api/src/main/scala/example/Routes.scala

@@ -62,9 +62,8 @@ case class Routes(countries: List[Country])(implicit
     )
   }
 
-  /**
+  /** this method returns directly set of cards and new anchor for loading next
-   * this method returns directly set of cards
+    * page of cards
-   * and new anchor for loading next page of cards
     *
     * intended to be called from "next-page-anchor" with htmx
     */
@@ -87,10 +86,20 @@ case class Routes(countries: List[Country])(implicit
     context.setVariable("selectedRegion", region.getOrElse(""))
     context.setVariable("nextPage", nextPage)
 
-    val cards = engine.process("index", Set("cards-of-countries", "infiniteScrollAnchor").asJava, context)
+    val cards = engine.process(
+      "index",
+      Set("cards-of-countries", "infiniteScrollAnchor").asJava,
+      context
+    )
+    // this is to store switch to another region in the history
+    val newUrl = s"/?region=${region.getOrElse("")}"
+    // only save url when new region is requested, not on addtional card loads
+    val urlHeaderOpt = if (page == 0) Seq("HX-Push" -> newUrl) else Seq.empty
     Response(
       cards,
-      headers = Seq("Content-Type" -> "text/html; charset=utf-8")
+      headers = Seq(
+        "Content-Type" -> "text/html; charset=utf-8"
+      ) ++ urlHeaderOpt
     )
   }