+ div#step-1-collapse.collapse.show(role="tabpanel" aria-labelledby="step-1-heading" data-parent="#accordion") {
+ div.card-body {
+ div.row {
+ div.col-md-6 {
+ div.form-group {
+ label.form-label(for="given-names") {'Given names *'}
+ input.form-control#given-names(type="text" placeholder="Your given names" required="required" maxlength=256) {}
+ }
+ }
+ div.col-md-6 {
+ div.form-group {
+ label.form-label(for="family-name") {'Family name'}
+ input.form-control#family-name(type="text" placeholder="Your family name" maxlength=256) {}
+ }
+ }
+ }
+ div.row {
+ div.col-md-6 {
+ div.form-group {
+ label.form-label(for="email") {'Email *'}
+ input.form-control#email(type="email" placeholder="Your email address" required="required" maxlength=256) {}
+ }
+ }
+ div.col-md-6 {
+ div.form-group {
+ label.form-label(for="password") {'Password *'}
+ input.form-control#password(type="password" placeholder="New password" required="required" minlength=8 maxlength=256) {}
+ }
+ }
+ }
+ div.row {
+ div.col-md-12 {
+ div.custom-control.custom-checkbox {
+ input.custom-control-input#contact-me(type="checkbox" checked="checked") {}
+ ' '
+ label.custom-control-label(for="contact-me") {
+ 'Contact me by email with updates and special offers'
+ }
+ }
+ }
+ }
+ div.row.align-items-center {
+ div.'col-md-6' {
+ div.form-group {
+ label.form-label(for="verification-code") {'Verification code *'}
+ input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
+ }
+ }
+ div.'col-md-4' {
+ img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
+ }
+ div.'col-md-2'.my-auto.text-center {
+ input.btn.btn-outline-secondary#'new-code'(type="button" value="New code") {}
+ }
+ }
+
+ p.mt-3 {'Note: If your name is one word or does not fit given names/family name pattern, then please enter given names only. Your given names are visible to other users if you comment on our blog. Your email and family name remain private.'}
+
+ input.btn.btn-success#step-1-continue(type="button" value="Continue") {}
+ }