{{define "verify"}}
<div class="page-container" style="justify-content: center; align-items: center;">
  <div class="page-card" style="padding: 48px; max-width: 400px; width: 100%;">
    <div style="text-align: center; margin-bottom: 24px; font-size: 1.5rem;"><span class="inou">inou</span> <span style="font-weight: 400; color: var(--text-muted);">health</span></div>
    <h1 style="font-size: 2rem; text-align: center;">{{.T.check_email}}</h1>
    <p class="intro" style="text-align: center; margin-bottom: 32px;">{{.T.code_sent_to}}<br><strong style="color: var(--text);">{{.Email}}</strong></p>

    {{if .Error}}<div class="error">{{.Error}}</div>{{end}}

    <form action="/verify" method="POST">
      <input type="hidden" name="email" value="{{.Email}}">
      <div class="form-group">
        <label>{{.T.verification_code}}</label>
        <input type="text" name="code" required maxlength="6" pattern="[0-9]{6}"
          class="code-input" placeholder="000000" autocomplete="one-time-code" autofocus>
      </div>
      <button type="submit" class="btn btn-primary btn-full">{{.T.verify}}</button>
    </form>

    <p style="text-align: center; margin-top: 24px; font-size: 0.9rem; color: var(--text-muted);">
      <a href="/start">{{.T.use_different_email}}</a>
    </p>
  </div>

  {{template "footer"}}
</div>
{{end}}