fix templating and rewrite practice templates

app/views/auth/signup.scala.html

@@ -31,7 +31,7 @@ <h1 class="lichess_title">@trans.signUp()</h1>
         @trans.computersAreNotAllowedToPlay()<br />
         <small>@trans.byRegisteringYouAgreeToBeBoundByOur(tosLink)</small>
       </div>
-      @form3.action {
+      @form3.actionHtml {
       @if(recaptcha.enabled) {
       <button class="g-recaptcha submit button text big" data-icon="F" data-sitekey="@recaptcha.key" data-callback='signupSubmit'>@trans.signUp()</button>
       } else {

app/views/game/importGame.scala

@@ -31,7 +31,7 @@ object importGame {
             form3.file.pgn(f.name)
           },
           form3.checkbox(form("analyse"), trans.requestAComputerAnalysis.frag(), help = Some(analyseHelp), disabled = ctx.isAnon),
-          form3.actionHtml(form3.submit(trans.importGame.frag()))
+          form3.action(form3.submit(trans.importGame.frag()))
         )
       )
     }.toHtml

app/views/practice/index.scala

@@ -0,0 +1,70 @@
+package views.html
+package practice
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.String.html.safeJsonValue
+
+import controllers.routes
+
+object index {
+
+  def apply(data: lila.practice.UserPractice)(implicit ctx: Context) = views.html.base.layout(
+    title = "Practice chess positions",
+    side = Some(
+      div(id := "practice_side", cls := "side_box")(
+        div(cls := "home")(
+          i(cls := "fat"),
+          h1("Practice"),
+          h2("makes your chess perfect"),
+          div(cls := "progress")(
+            div(cls := "text")("Progress: ", data.progressPercent, "%"),
+            div(cls := "bar", style := s"width: ${data.progressPercent}%")
+          ),
+          form(id := "practice_reset", cls := "actions", action := routes.Practice.reset, method := "post")(
+            if (ctx.isAuth) (data.nbDoneChapters > 0) option a(cls := "do-reset")("Reset my progress")
+            else a(href := routes.Auth.signup)("Sign up to save your progress")
+          )
+        )
+      )
+    ),
+    moreCss = cssTag("practice.css"),
+    moreJs = embedJs(s"""$$('#practice_reset .do-reset').on('click', function() {
+if (confirm('You will lose your practice progress!')) this.parentNode.submit();
+});"""),
+    openGraph = lila.app.ui.OpenGraph(
+      title = "Practice your chess",
+      description = "Learn how to master the most common chess positions",
+      url = s"$netBaseUrl${routes.Practice.index}"
+    ).some
+  ) {
+      div(id := "practice_app")(
+        div(cls := "sections")(
+          data.structure.sections.map { section =>
+            div(cls := "section")(
+              h2(section.name),
+              div(cls := "studies")(
+                section.studies.map { stud =>
+                  val prog = data.progressOn(stud.id)
+                  a(
+                    cls := s"study ${if (prog.complete) "done" else "ongoing"}",
+                    href := routes.Practice.show(section.id, stud.slug, stud.id.value)
+                  )(
+                      ctx.isAuth option span(cls := "ribbon-wrapper")(
+                        span(cls := "ribbon")(prog.done, " / ", prog.total)
+                      ),
+                      i(cls := s"practice icon ${stud.id}"),
+                      span(cls := "text")(
+                        h3(stud.name),
+                        em(stud.desc)
+                      )
+                    )
+                }
+              )
+            )
+          }
+        )
+      )
+    }
+}

app/views/practice/show.scala

@@ -0,0 +1,37 @@
+package views.html
+package practice
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.String.html.safeJsonValue
+
+import controllers.routes
+
+object show {
+
+  def apply(
+    us: lila.practice.UserStudy,
+    data: lila.practice.JsonView.JsData
+  )(implicit ctx: Context) = views.html.base.layout(
+    title = us.practiceStudy.name,
+    side = div(cls := "side_box study_box").toHtml.some,
+    moreCss = cssTags("analyse.css", "study.css", "practice.css"),
+    moreJs = frag(
+      jsAt(s"compiled/lichess.analyse${isProd ?? (".min")}.js"),
+      embedJs(s"""lichess = lichess || {}; lichess.practice = {
+practice: ${safeJsonValue(data.practice)},
+study: ${safeJsonValue(data.study)},
+data: ${safeJsonValue(data.analysis)},
+i18n: ${board.userAnalysisI18n()},
+explorer: {
+endpoint: "$explorerEndpoint",
+tablebaseEndpoint: "$tablebaseEndpoint"
+}};""")
+    ),
+    chessground = false,
+    zoomable = true
+  ) {
+      div(cls := "analyse cg-512")(miniBoardContent)
+    }
+}