Play templating to Mustache code samples

nino-step-mustache.html

<form action="{{question.postUrl}}" method="POST" data-validation-name="nino"
      data-validation-type="association"
      data-validation-rules="fieldsetOrExcuse"
      class="validate" data-validation-members="ninoCode ninoExcuse">

    {{> shared/questionHeader }}

    {{> shared/validationMessages }}

    <label for="{{nino.id}}" class="visuallyhidden"  >
        {{messages.ordinary_nino_heading}}
    </label>

    <div class="validation-wrapper {{nino.classes}}">
        <input type="text" id="{{nino.id}}" name="{{nino.name}}" value="{{nino.value}}"
               autocomplete="off" class="text  validate nino {{nino.classes}}"
               data-validation-name="ninoCode" data-validation-type="field"
               data-validation-rules="nonEmpty nino" />
    </div>
    <p class="example">{{messages.ordinary_nino_example}}</p>
    <button type="submit" id="alt-continue"
            class="button next validation-submit"
            data-validation-sources="nino">{{messages.step_continue}}</button>
    <div class="help-content help-content{{noNinoReasonShowFlag.value}}" data-toggle-text="{{messages.ordinary_nino_help}}">
        <h2>{{messages.ordinary_nino_help}}</h2>
        <p>{{messages.ordinary_nino_section_1}}</p>
        <ul>
            <li>{{messages.ordinary_nino_list_1}}</li>
            <li><a href="https://www.gov.uk/lost-national-insurance-number">{{messages.ordinary_nino_list_2}}</a></li>
        </ul>
        <p>{{messages.ordinary_nino_section_2}}</p>
        <div class="optional-section optional-section{{noNinoReasonShowFlag.value}}" data-toggle-text="{{messages.ordinary_nino_excuse}}">
            <h3>{{messages.ordinary_nino_excuse}}</h3>

            <label for="{{noNinoReason.id}}" class=""  >
                {{messages.ordinary_nino_excuse_content}}
            </label>
            <textarea name="{{noNinoReason.name}}" id="{{noNinoReason.id}}" class="small validate"
                      data-validation-name="ninoExcuse"  data-validation-type="field"
                      data-validation-rules="nonEmpty" maxlength="500"
                      autocomplete="off">{{noNinoReason.value}}</textarea>
        </div>
    </div>
    <button type="submit" id="continue"
            class="button next validation-submit"
            data-validation-sources="nino">{{messages.step_continue}}</button>
</form>

nino-step-mustache.scala

package uk.gov.gds.ier.transaction.ordinary.nino

import uk.gov.gds.ier.validation.ErrorTransformForm
import uk.gov.gds.ier.step.StepTemplate
import uk.gov.gds.ier.transaction.ordinary.InprogressOrdinary


trait NinoMustache extends StepTemplate[InprogressOrdinary] {

  case class NinoModel (
      question:Question,
      nino: Field,
      noNinoReason: Field,
      noNinoReasonShowFlag: Text
  ) extends MustacheData

  val mustache = MultilingualTemplate("ordinary/nino") { implicit lang =>
    (form, postEndpoint) =>

    implicit val progressForm = form

    NinoModel(
      question = Question(
        postUrl = postEndpoint.url,
        errorMessages = Messages.translatedGlobalErrors(form),
        number = "5 " + Messages("step_of") + " 11",
        title = Messages("ordinary_nino_heading")
      ),
      nino = TextField(
        key = keys.nino.nino
      ),
      noNinoReason = TextField(
        key = keys.nino.noNinoReason
      ),
      noNinoReasonShowFlag = Text (
        value = progressForm(keys.nino.noNinoReason).value.map(noNinoReason => "-open").getOrElse("")
      )
    )
  }
}

nino-step-play.scala.html

@(implicit formData: uk.gov.gds.ier.validation.InProgressForm, postUrl: Call)

@import helper._
@import layouts._
@import uk.gov.gds.ier.form.FormHelpers._

@main(title = Some("Register to Vote - What is your National Insurance number?"), stylesheets = head(), scripts = stepsBodyEnd()) {
  @form(postUrl) {
  
    @layouts.questionHeader("What is your National Insurance number?", "/register-to-vote/previous-name", 5)

    @text(keys.nino.nino, label = "What is your National Insurance number?", labelAttributes = Map('class -> "visuallyhidden"), inputAttributes = Map('class -> "nino"), crossField = keys.nino)
    <p>Example: AB 12 34 56 C</p>
    <div class="help-content">
      <h2>Help</h2>
      <p>You can find your National Insurance number on pay slips or official letters about tax, pensions and benefits.</p>
      <p><a href="https://www.gov.uk/lost-national-insurance-number">Get a reminder of your National Insurance number</a></p>
      <p>It&#39;s important that you try and find your National Insurance number - without it you will need to provide other documentation by post.</p>
      <div class="optional-section">
        <h3>I can't provide a National Insurance number</h3>
        @textArea(keys.nino.noNinoReason, label = "Why can't you provide a National Insurance number?", inputAttributes = Map('class -> "small", 'maxlength -> "500"))
      </div>
    </div>
    @validationMessage(formData(keys.nino))
    @validationMessage(formData(keys.nino.nino))
    @validationMessage(formData(keys.nino.noNinoReason))
    <button type="submit" id="continue" class="button next">Continue</button>
  }
}