doctype html
html
  head
    meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title #{__('TITLE', community)}
    link(href="css/style.css", rel="stylesheet", type="text/css")
    link(href="//fonts.googleapis.com/css?family=Lato:300,400,700,900,700italic|Open+Sans:700italic,400,600,300,700,800", rel="stylesheet", type="text/css")
  body
    #wrapper
      .main
        .header
          h1
            strong #{community}
          h2 #{__('HEADER', community)}
        .content
          .information
            form(method="POST", action="/invite")#join-form.form
              input(type="email", name="email", autofocus, placeholder="#{__('ENTER_EMAIL')}")#slack-email.field
              if tokenRequired
                input(type="text", name="token", placeholder="#{__('ENTER_TOKEN')}")#slack-token.field
              input(type="submit", value="Join").submit
              if !!recaptchaSiteKey
                div(class="g-recaptcha", data-sitekey="#{recaptchaSiteKey}")
    if !!recaptchaSiteKey
       script(src='https://www.google.com/recaptcha/api.js')
    script.
      var tokenRequired = #{tokenRequired};
      var form = document.getElementById('join-form');
      var email = document.getElementById('slack-email');
      var token = document.getElementById('slack-token');
      form.addEventListener('submit', function(evt) {
        if (!email.value) {
          evt.preventDefault();
        }
        if (tokenRequired && !token.value) {
          evt.preventDefault();
        }
      });