<div id="signup" v-cloak>
  <div style="max-width: 800px;" class="container-fluid pb-5 px-lg-0 px-3">
    <h1>Welcome to Fleet Premium</h1>
    <p class="pb-2">We just need a few details in order to get you a Fleet Premium license key.</p>
    <div class="mx-auto">
      <div purpose="customer-portal-form" class="d-flex flex-row justify-content-between">
        <div class="order-first flex-grow-1">
          <div class="card card-body">
            <ajax-form action="signup" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedSignUpForm()">
              <div class="form-group">
                <label for="email-address">Email</label>
                <span style="float: right" class="text-right small"><a href="/customers/login">I have an account</a></span>
                <input class="form-control" id="email-address"  :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
                <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>This doesn’t appear to be a valid email address</div>
              </div>
              <div v-show="formData.emailAddress || showFullForm">
                <div class="form-group">
                  <label for="password">Choose a password</label>
                  <input class="form-control" id="password" type="password"  :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="new-password" @input="typeClearOneFormError('password')">
                  <div class="invalid-feedback" v-if="formErrors.password === 'minLength'">Password too short.</div>
                  <div class="invalid-feedback" v-if="formErrors.password === 'required'">Please enter a password.</div>
                  <p class="mt-2"> Minimum length is 8 characters</p>
                </div>
                <div class="form-group">
                  <label for="organization">Organization</label>
                  <input class="form-control" id="organization" type="text"  :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" @input="typeClearOneFormError('organization')">
                  <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
                </div>
                <div class="row">
                  <div class="col-12 col-sm-6 pr-sm-2">
                    <div class="form-group">
                      <label for="first-name">First name</label>
                      <input class="form-control" id="first-name" type="text"  :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="first-name" @input="typeClearOneFormError('firstName')">
                      <div class="invalid-feedback" v-if="formErrors.firstName">Please enter your first name.</div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6 pl-sm-2">
                    <div class="form-group">
                      <label for="last-name">Last name</label>
                      <input class="form-control" id="last-name" type="text"  :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="last-name" @input="typeClearOneFormError('lastName')">
                      <div class="invalid-feedback" v-if="formErrors.lastName">Please enter your last name.</div>
                    </div>
                  </div>
                </div>
              </div>
              <cloud-error v-if="cloudError==='emailAlreadyInUse'">
                <p>This email is already linked to a Fleet account.<br> Please <a href="/customers/login">sign in</a> with your email and password.</p>
              </cloud-error>
              <cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
              <p class="small">By signing up you agree to our <a href="/legal/privacy">Privacy Policy</a> and <a href="/terms">Terms of Service</a>.</p>
              <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="!cloudError">Agree and continue</ajax-button>
              <ajax-button style="height: 40px;" purpose="submit-button" type="button" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4" v-if="cloudError" @click="clickClearFormFields()">Reset form and try again</ajax-button>
            </ajax-form>
          </div>
        </div>

        <div class="order-last d-none d-md-block" purpose="features-list">
          <p><strong>Fleet Premium includes:</strong></p>
          <ul>
            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Everything in Fleet Free</li>
            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Multiple teams (RBAC)</li>
            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Self-hosted agent auto-updates</li>
            <li><img alt="A checkmark" src="/images/check-16x16@2x.png">Enterprise support</li>
          </ul>
        </div>

      </div>

    </div>
  </div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
