doctype html
html(lang="en")
  head
    title Sign in | Anvil Connect

    link(rel='stylesheet', href='/stylesheets/app.css')
    link(rel='stylesheet', href='/stylesheets/providers.css')
    link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,400italic,700,700italic|Raleway:400,100,600,300')
  body
    .anvilform.blur-transition
      img.logo(src='/images/anvil.svg', alt='Anvil Connect')

      form.panel(method='POST')
        // adding a class of error to this paragraph will add error styling
        if error == 'email must be unique'
          p.error
            | A user with the same email address has
            | already registered using a different provider.
            | Try one of these:
        else if error
          p.error= error
        if request.response_mode
          input(type='hidden', name='response_mode', value=request.response_mode)
        input(type='hidden', name='response_type', value=request.response_type)
        input(type='hidden', name='client_id', value=request.client_id)
        input(type='hidden', name='redirect_uri', value=request.redirect_uri)
        input(type='hidden', name='max_age', value=request.max_age)
        input(type='hidden', name='scope', value=request.scope)
        input(type='hidden', name='state', value=request.state)
        input(type='hidden', name='nonce', value=request.nonce)
        hr.textsep.signinwith
        - var formBasedProviders = [];
        - var formFieldData = {};
        - var providerNames = {};
        - var externalProviders = [];
        - var providerIDs = Object.keys(providers);
        if providerIDs.length
          ul.providers
            each provider in providerIDs
              - providerNames[provider] = providerInfo[provider].name;
              if !providerInfo[provider].fields
                - externalProviders.push(provider);
                li
                  a(href='/connect/' + provider + '?' + params, title=providerInfo[provider].name, class='provider protocol-' + providerInfo[provider].protocol + ' '+ provider)
              else
                - formBasedProviders.push(provider);
                - formFieldData[provider] = providerInfo[provider].fields;
        if formBasedProviders.length > 0
          - var selectedProvider = (request && request.provider) || formBasedProviders[0];
          if externalProviders.length
            hr.textsep.or
          .form-provider-name= providerInfo[selectedProvider].name
          if formBasedProviders.length > 1
            ul.providers.form-providers
              each provider in formBasedProviders
                li
                  a(href='javascript:void(0)', title=providerInfo[provider].name, data-provider=provider, class='provider protocol-' + providerInfo[provider].protocol + ' ' + provider + (provider === selectedProvider ? ' selected-provider' : ''))
          input(type='hidden', name='provider', value=selectedProvider)
          if formError
            p.error= formError
          .form-fields
            each field in providerInfo[selectedProvider].fields
              input(type=field.type, name=field.name, placeholder=field.placeholder || (field.name.charAt(0).toUpperCase() + field.name.substring(1)))
          //-input(type='text', name='email', placeholder='Email')
          //-input(type='password', name='password', placeholder='Password')
          input.callout.full(type='submit', value='Sign in')
          if ~providerIDs.indexOf('password')
            p.register-message
              | Don't have an account?
              a(href='/signup?' + params)
                |  Register in Seconds
            if mailSupport
              p.forgot-password
                a(href='/recovery') Forgot your password?
    .screen(hidden)
      .loader
        svg.circular
          circle.path(cx=28, cy=28, r=20, fill='none', stroke-width=5, stroke-miterlimit=10)
    if formBasedProviders.length > 1
      script.
        (function() {
          var formFieldData = !{JSON.stringify(formFieldData)};
          var providerIDs = !{JSON.stringify(providerNames)};
          var providerTag = document.querySelector('input[name="provider"]');
          var formProviderNametag = document.querySelector('.form-provider-name');
          var formFieldContainer = document.querySelector('.form-fields');
          var formProviderLinks = document.querySelectorAll('.form-providers a');
          var registerMessage = document.querySelector('.register-message');
          var forgotPassword = document.querySelector('.forgot-password');
          var screenElem = document.querySelector('.screen');
          var form = document.querySelector('form');
          var formWrapper = document.querySelector('.anvilform');

          form.addEventListener('submit', function() {
            formWrapper.classList.add('blur');
            screenElem.removeAttribute('hidden');
          });

          function changeProvider() {
            formFieldContainer.innerHTML = '';
            formFieldContainer.appendChild(this.providerFields.cloneNode(true));
            for (var i = 0; i < formProviderLinks.length; i++) {
              if (formProviderLinks[i].provider !== this.provider) {
                formProviderLinks[i].classList.remove('selected-provider');
              }
            }
            formProviderNametag.textContent = providerIDs[this.provider];
            providerTag.value = this.provider;
            if (registerMessage) {
              registerMessage.style.display = this.provider === 'password' ? '' : 'none';
            }
            if (forgotPassword) {
              forgotPassword.style.display = this.provider === 'password' ? '' : 'none';
            }
            this.classList.add('selected-provider');
          }

          var fragment, fields, input;
          for (var i = 0; i < formProviderLinks.length; i++) {
            // We could use dataset, but unfortunately there is the dreaded IE10
            formProviderLinks[i].provider = formProviderLinks[i].getAttribute('data-provider');
            fragment = document.createDocumentFragment();
            fields = formFieldData[formProviderLinks[i].provider];
            for (var j = 0; j < fields.length; j++) {
              input = document.createElement('input');
              input.name = fields[j].name
              if (fields[j].type) {
                input.type = fields[j].type;
              }
              if (fields[j].placeholder) {
                input.placeholder = fields[j].placeholder;
              } else {
                input.placeholder = fields[j].name.charAt(0).toUpperCase() + fields[j].name.substring(1);
              }
              fragment.appendChild(input);
            }
            formProviderLinks[i].providerFields = fragment;
            formProviderLinks[i].addEventListener('click', changeProvider);
          }
        })();