doctype html
html
  head
    meta(charset="utf-8")
    title Carbon
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" type="text/css" href=getStatic("/sass/login.sass"))
    script(type="module" src=getStatic("/js/login.js"))

  body
    main.main
      .center-login-container
        h1 Welcome to Carbon!
        form.login-form(method="post" onsubmit="return false")#form
          .data-input
            .form-input-container
              label(for="username") Username
              input(type="text" name="username" autocomplete="username" placeholder="@username:server.com" pattern="^@?[a-z0-9._=/-]+(?::[a-zA-Z0-9.:\\[\\]-]+)?$" required)#username

            .form-input-container
              label(for="password") Password
              input(name="password" autocomplete="current-password" type="password" required)#password

            .form-input-container
              .homeserver-label
                label(for="homeserver") Homeserver
                span.homeserver-question(tabindex=0) (What's this?)
              input(type="text" name="homeserver" placeholder="matrix.org")#homeserver

          #feedback

          .form-input-container
            input(type="submit" value="Log in")#submit
    template#homeserver-popup-template
        .homeserver-popup
           p
             | Homeserver is the place where your account lives.
             | It's usually the website where you registered.
           p
             | Need help finding a homeserver? 
             a(href='#')  Click here