<form
  class='bg-white shadow-md rounded px-8 pt-6 pb-8 my-4'
  {{on 'submit' (prevent-default (perform this.register))}}
  ...attributes
>
  <h2>Register</h2>
  <div class='my-4'>
    <label class='block text-gray-700 text-sm font-medium mb-2' for='invite-code'>
      Invite Code
    </label>
    <Input
      class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
      id='invite-code'
      placeholder='abc123'
      @required={{true}}
      @value={{this.inviteCode}}
    />
  </div>
  <div class='mb-4'>
    <label class='block text-gray-700 text-sm font-medium mb-2' for='email'>
      Email
    </label>
    <Input
      class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
      id='email'
      placeholder='Email'
      @type='email'
      @required={{true}}
      @value={{this.email}}
    />
  </div>
  <div class='mb-6'>
    <label class='block text-gray-700 text-sm font-medium mb-2' for='password'>
      Password
    </label>
    <Input
      class='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline'
      id='password'
      placeholder='******************'
      @type='password'
      @value={{this.password}}
    />
    {{! <p class='text-red-500 text-xs italic'>
        Please choose a password.
      </p> }}
  </div>
  <div class='flex items-center justify-between'>
     <div class='flex flex-col'>
      <LinkTo
        class='block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800'
        @route='login'
      >
        Login
      </LinkTo>
    </div>

    <button
      type='submit'
      class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ml-4'
    >
      Submit
    </button>
  </div>
</form>