{{define "title"}}{{say (printf "stance.%s.label" .Stance)}}{{end}}
{{define "head"}}<script type="module" src="{{asset "static/pow.js"}}"></script>{{end}}
{{define "content"}}
<div class="sheet">

  {{/* The tab you tore off the bill, carried over. Its lower edge is ragged
       because that is where the perforation gave. It carries no label above
       it: the word is the heading. */}}
  <div class="torn">
    <p class="torn__word">{{say (printf "stance.%s.label" .Stance)}}</p>
  </div>

  <div class="sheet__split">

    <div class="sheet__reply">
      {{range .Message}}<p>{{.}}</p>{{end}}
      {{/* Only the all-in reply carries it, and it sits under the text it
           describes rather than in front of it. */}}
      {{if .Disclosure}}<p class="sheet__disclosure">{{.Disclosure}}</p>{{end}}
    </div>

    <form class="slip" method="post" action="/signup"
          data-pow-form
          data-pow-nonce="{{.Challenge.Nonce}}"
          data-pow-difficulty="{{.Challenge.Difficulty}}"
          data-pow-worker="{{asset "static/pow-worker.js"}}">

      <p class="slip__title">{{say "form.submit"}}</p>

      {{if .Error}}<p class="notice" role="alert">{{.Error}}</p>{{end}}

      <input type="hidden" name="stance" value="{{.Stance}}">
      <input type="hidden" name="nonce" value="{{.Challenge.Nonce}}">
      <input type="hidden" name="issued_at" value="{{.Challenge.IssuedAt}}">
      <input type="hidden" name="difficulty" value="{{.Challenge.Difficulty}}">
      <input type="hidden" name="seal" value="{{.Challenge.Seal}}">
      <input type="hidden" name="counter" value="" data-pow-counter>

      {{/* Hidden from the screen but present in the page, and kept away from
           anything a browser or password manager would autofill: filling it
           discards a real person's signup behind a page they cannot see
           through. */}}
      <div class="hp" aria-hidden="true">
        <label for="{{.Honeypot}}">{{say "form.honeypot"}}</label>
        <input type="text" id="{{.Honeypot}}" name="{{.Honeypot}}"
               tabindex="-1" autocomplete="off">
      </div>

      <label class="field" for="name">
        <span>{{say "form.name"}}</span>
        <input type="text" id="name" name="name" required maxlength="120"
               autocomplete="name" placeholder="{{say (printf "form.name.placeholder.%s" .Stance)}}">
      </label>

      <label class="field" for="email">
        <span>{{say "form.email"}}</span>
        <input type="email" id="email" name="email" required
               autocomplete="email" data-pow-email
               placeholder="{{say "form.email.placeholder"}}">
      </label>

      <label class="field" for="background">
        <span>{{say "form.background"}}</span>
        <textarea id="background" name="background" rows="5" maxlength="2000"
                  placeholder="{{say "form.background.placeholder"}}"></textarea>
      </label>

      {{/* Disabled until the module loads and enables it. The other way round
           is unbuildable, and this ordering fails safe. There is deliberately
           no explanation beside it. */}}
      <button type="submit" class="stamp" disabled data-pow-submit
              data-label="{{say "form.submit"}}"
              data-working-label="{{say "form.working"}}">{{say "form.submit"}}</button>

      <p class="slip__status" hidden data-pow-status></p>
    </form>

  </div>
</div>
{{end}}