extends ../layouts/main
block content

  section.uk-section.uk-section-default.uk-section-xsmall
    .uk-container.uk-container-small
      form(method="POST", action="/user").uk-form
        .uk-card.uk-card-default.uk-card-small.uk-width-xlarge.uk-margin-auto.uk-border-rounded
          .uk-card-header
            h1.uk-card-title Create New Account

          .uk-card-body
            p You are creating a new member account on #[+renderSiteLink()]. If you have an account, please #[a(href="/welcome/login") log in here]. An account is required to comment on posts and use other site features.

            .uk-margin
              label(for="email").uk-form-label Email
              input(id="email", name="email", type="email", autocomplete="off", placeholder="Enter your email address").uk-input
              .uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Enter a valid email, and not one from a temporary service

            .uk-margin
              label(for="username").uk-form-label Username
              input(id="username", name="username", type="text", autocomplete="off", placeholder="Enter a username").uk-input
              .uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max. No spaces. A-Z, a-z, 0-9, - (dash) and _ (underscore).

            .uk-margin
              label(for="display-name").uk-form-label Display Name
              input(id="display-name", name="displayName", type="text", autocomplete="off", placeholder="Enter a display name").uk-input
              .uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") 40 characters max, and can include most printable characters including emojis, spaces, whatever you're into within reason.

            .uk-margin
              div(uk-grid)
                .uk-width-1-2
                  .uk-margin
                    label(for="password").uk-form-label Password
                    input(id="password", name="password", type="password", placeholder="Enter password").uk-input
                    .uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Don't forget your password. There is no reset (yet).

                .uk-width-1-2
                  .uk-margin
                    label(for="passwordv").uk-form-label Verify password
                    input(id="passwordv", name="passwordv", type="password", placeholder="Verify password").uk-input
                    .uk-text-small.uk-text-muted.uk-margin-small-top(class="uk-visible@m") Please enter your password again to prove you're not an idiot.

            .uk-margin
              label
                input(type="checkbox", checked).uk-checkbox
                |  Join #{site.name}'s Newsletter

            .uk-text-center.uk-margin
              .uk-width-medium.uk-margin-auto
                div(style="background: white;")
                  img(src='/welcome/signup/captcha', style="padding: 8px 0;").uk-display-block.uk-margin-auto
                input(id="captcha", name="captcha", type="text", placeholder="Enter captcha text").uk-input.uk-text-center

          .uk-card-footer
            div(uk-grid).uk-grid-small.uk-flex-middle
              .uk-width-expand
                +renderBackButton()
              .uk-width-auto
                button(type="submit").uk-button.uk-button-primary Create Account