<form class="signup" name="signup">
  <div class="signup__logo">
      <img src="./assets/logo.svg">
  </div>
  <md-button
    class="md-icon-button signup__close"
    aria-label="close registration form"
    ng-click="$ctrl.goToSignin()"
  >
    <!-- <ng-md-icon icon="close" size="24"></ng-md-icon> -->
    ✖️
  </md-button>

  <section
    ng-if="$ctrl.step === 'provider-choice'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Select provider of a new account:
    </div>
    <div class="signup__step--action">
      <md-button
        ng-click="$ctrl.startPrivacySafeSignup()"
      >
        PrivacySafe service
      </md-button>
    </div>
    <div class="signup__step--action">
      <md-button
        ng-click="$ctrl.startCustomSignup()"
      >
        Custom service
      </md-button>
    </div>
  </section>

  <section
    ng-if="$ctrl.step === 'ps-1'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Username for new account @privacysafe.me<br>
      (step 1 of 3)
    </div>
    <div class="signup__step-info">
      <p>Username should be between <span>6</span> and <span>30</span> characters.</p>
      <p>You can use letters, numbers, and any charecters except the <span>@</span> symbol.</p>
    </div>
    <md-input-container
      md-no-float
      class="input__field signup__inputfield"
    >
      <label>Choose your username</label>
      <input
        type="text"
        ng-class="{'ng-invalid': $ctrl.signupError}"
        name="loginname"
        placeholder="new username"
        ng-minlength="$ctrl.CONST.NAME_MIN_LENGTH"
        ng-maxlength="$ctrl.CONST.NAME_MAX_LENGTH"
        pattern="[^@]+"
        ng-model="$ctrl.user.name"
        ng-keyup="$ctrl.keyEventHandler($event, 'name')"
      >
        <span
          ng-if="!!$ctrl.signupError"
          class="input__field--error"
        >
          {{ $ctrl.signupError }}
        </span>
        <span class="signup__inputfield--info">
          @privacysafe.me
        </span>
    </md-input-container>
    <div class="signup__step--action">
      <md-button
        ng-disabled="$ctrl.$scope.signup.loginname.$invalid || !$ctrl.user.name"
        ng-click="$ctrl.doOnStepPS1()"
      >
        Check Availability
      </md-button>
    </div>
  </section>

  <section
    ng-if="$ctrl.step === 'ps-2'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Password for account <br>
      {{ $ctrl.user.login }} <br>
      (step 2 of 3)
    </div>
    <div class="signup__step-info">
      <p>Your login password must be between <span>12</span> and <span>64</span> characters.</p>
      <p>You must use a <a>
        <md-tooltip md-direction="top">Length and randomness are very important.</md-tooltip>
        strong password
      </a> with a combination of lowercase and uppercase letters, numbers, and special characters.</p>
    </div>
    <md-input-container
      md-no-float
      class="input__field"
    >
      <label>Your password</label>
      <input
        type="password"
        name="password"
        placeholder="Enter strong password"
        ng-minlength="$ctrl.CONST.PASSWORD_MIN_LENGTH"
        ng-model="$ctrl.user.password"
        ng-keyup="$ctrl.keyEventHandler($event, 'password')"
      >
    </md-input-container>
    <md-input-container
      md-no-float
      class="input__field"
    >
      <label>Confirm password</label>
      <input
        type="password"
        ng-class="{'ng-invalid': $ctrl.signupError || $ctrl.$scope.signup.confirmpassword.$invalid}"
        name="confirmpassword"
        placeholder="Confirm your password"
        ng-minlength="$ctrl.CONST.PASSWORD_MIN_LENGTH"
        ng-model="$ctrl.user.passwordConfirm"
        ng-keyup="$ctrl.checkPassword($event)"
      >
        <span
          ng-if="!!$ctrl.signupError"
          class="input__field--error"
        >
          {{ $ctrl.signupError }}
        </span>
    </md-input-container>
    <div class="signup__step--action">
      <md-button
        ng-disabled="$ctrl.$scope.signup.$invalid || !!$ctrl.signupError || !$ctrl.user.password || !$ctrl.user.passwordConfirm"
        ng-click="$ctrl.doOnStepPS2()"
      >
        Generate Keys from Password
      </md-button>
    </div>
  </section>

  <section
    ng-if="$ctrl.step === 'ps-3'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Create a new account (Step 3 of 3):<br>
      {{ $ctrl.user.login }}
    </div>
    <div class="signup__step-info">
      <p>Please read carefully and acknowledge the following:</p>
      <md-checkbox
        aria-label="question01"
        name="question01"
        ng-change="$ctrl.checkAnswers()"
        ng-model="$ctrl.questions.q1"
      >
        I understand that it is
        <a>
          <md-tooltip md-direction="top">You control your password for your own safety.</md-tooltip>
          impossible to recover
        </a>
        the password.
      </md-checkbox>
      <md-checkbox
        aria-label="question02"
        name="question02"
        ng-change="$ctrl.checkAnswers()"
        ng-disabled="!$ctrl.questions.q1"
        ng-model="$ctrl.questions.q2"
      >
        I agree to remember the password or make a <a>
          <md-tooltip md-direction="top">Write on paper or another non-digital form.</md-tooltip>
          paper copy
        </a>.
      </md-checkbox>
      <md-checkbox
        aria-label="question03"
        name="question03"
        ng-change="$ctrl.checkAnswers()"
        ng-disabled="!$ctrl.questions.q1 || !$ctrl.questions.q2"
        ng-model="$ctrl.questions.q3"
      >
        I will make a copy of my password and store it securely with my
        <a>
          <md-tooltip md-direction="top">Trustee may be close family, friends, lawyers, etc.</md-tooltip>
          trustee
        </a>.
      </md-checkbox>
    </div>
    <div class="signup__step--action">
      <md-button
        ng-disabled="$ctrl.isCreateDisabled"
        ng-click="$ctrl.createAccount()"
      >
        Create Account <br>
        {{ $ctrl.user.login }}
      </md-button>
    </div>
    <div
      ng-if="$ctrl.signupError"
      class="signup__step--error-wrap"
    >
      {{ $ctrl.signupError }}
    </div>
  </section>

   <section
    ng-if="$ctrl.step === 'custom-1'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Connect to custom server<br>
      (step 1 of 4)
    </div>
    <br>
    <div class="signup__step-info">
      <p>Enter custom signup service url that will create a 3NWeb account.</p>
    </div>
    <md-input-container
      md-no-float
      class="input__field signup__inputfield"
    >
      <label>Custom service url</label>
      <input
        type="text"
        ng-class="{'ng-invalid': $ctrl.signupError}"
        name="customServiceUrl"
        placeholder="Custom service url"
        ng-model="$ctrl.user.customServiceUrl"
      >
    </md-input-container>
    <md-input-container
      md-no-float
      class="input__field signup__inputfield"
    >
      <label>Optional signup token</label>
      <input
        type="text"
        ng-class="{'ng-invalid': $ctrl.signupError}"
        name="signupToken"
        placeholder="Optional signup token"
        ng-model="$ctrl.user.signupToken"
      >
    </md-input-container>
    <div
      ng-if="!$ctrl.user.availableDomains"
      class="signup__step--action"
    >
      <md-button
        ng-disabled="!$ctrl.user.customServiceUrl"
        ng-click="$ctrl.doOnStepCustom1()"
      >
        Get available domains
      </md-button>
    </div>
  </section>
 
  <section
    ng-if="$ctrl.step === 'custom-2'"
    class="signup__step"
  >
    <div
      class="signup__step-title"
      ng-if="!$ctrl.user.availableDomains"
    >
      Username for new account @{{ $ctrl.user.domain }}<br>
      (step 2 of 4)
    </div>
    <div
      class="signup__step-title"
      ng-if="$ctrl.user.availableDomains"
    >
      Domain and Username for new account
      (step 2 of 4)
    </div>
    <md-input-container
      ng-if="$ctrl.user.availableDomains"
    >
      <md-select
        ng-model="$ctrl.user.domain"
        placeholder="Select domain for a new account"
      >
        <md-option
          ng-repeat="domain in $ctrl.user.availableDomains"
          ng-value="domain"
        >
          {{ domain }}
        </md-option>
      </md-select>
    </md-input-container>
    <div class="signup__step-info">
      <p>You can use letters, numbers, and any charecters except the <span>@</span> symbol.</p>
    </div>
    <md-input-container
      md-no-float
      class="input__field signup__inputfield"
    >
      <label>Choose your username</label>
      <input
        type="text"
        ng-class="{'ng-invalid': $ctrl.signupError}"
        name="loginname"
        placeholder="new username"
        ng-minlength="1"
        ng-maxlength="$ctrl.CONST.NAME_MAX_LENGTH"
        pattern="[^@]+"
        ng-model="$ctrl.user.name"
        ng-keyup="$ctrl.keyEventHandler($event, 'name')"
      >
        <span
          ng-if="!!$ctrl.signupError"
          class="input__field--error"
        >
          {{ $ctrl.signupError }}
        </span>
        <span
          class="signup__inputfield--info"
          ng-if="$ctrl.user.domain"
        >
          @{{ $ctrl.user.domain }}
        </span>
    </md-input-container>
    <div
      class="signup__step--action"
      ng-if="$ctrl.user.domain"
    >
      <md-button
        ng-disabled="$ctrl.$scope.signup.loginname.$invalid || !$ctrl.user.name"
        ng-click="$ctrl.doOnStepCustom2()"
      >
        Check Availability
      </md-button>
    </div>
  </section>

  <section
    ng-if="$ctrl.step === 'custom-3'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Password for account <br>
      {{ $ctrl.user.login }} <br>
      (step 3 of 4)
    </div>
    <div class="signup__step-info">
      <p>Your login password must be between <span>12</span> and <span>64</span> characters.</p>
      <p>You must use a <a>
        <md-tooltip md-direction="top">Length and randomness are very important.</md-tooltip>
        strong password
      </a> with a combination of lowercase and uppercase letters, numbers, and special characters.</p>
    </div>
    <md-input-container
      md-no-float
      class="input__field"
    >
      <label>Your password</label>
      <input
        type="password"
        name="password"
        placeholder="Enter strong password"
        ng-minlength="$ctrl.CONST.PASSWORD_MIN_LENGTH"
        ng-model="$ctrl.user.password"
        ng-keyup="$ctrl.keyEventHandler($event, 'password')"
      >
    </md-input-container>
    <md-input-container
      md-no-float
      class="input__field"
    >
      <label>Confirm password</label>
      <input
        type="password"
        ng-class="{'ng-invalid': $ctrl.signupError || $ctrl.$scope.signup.confirmpassword.$invalid}"
        name="confirmpassword"
        placeholder="Confirm your password"
        ng-minlength="$ctrl.CONST.PASSWORD_MIN_LENGTH"
        ng-model="$ctrl.user.passwordConfirm"
        ng-keyup="$ctrl.checkPassword($event)"
      >
        <span
          ng-if="!!$ctrl.signupError"
          class="input__field--error"
        >
          {{ $ctrl.signupError }}
        </span>
    </md-input-container>
    <div class="signup__step--action">
      <md-button
        ng-disabled="$ctrl.$scope.signup.$invalid || !!$ctrl.signupError || !$ctrl.user.password || !$ctrl.user.passwordConfirm"
        ng-click="$ctrl.doOnStepCustom3()"
      >
        Generate Keys from Password
      </md-button>
    </div>
  </section>

  <section
    ng-if="$ctrl.step === 'custom-4'"
    class="signup__step"
  >
    <div class="signup__step-title">
      Create a new account (step 4 of 4):<br>
      {{ $ctrl.user.login }}
    </div>
    <div class="signup__step-info">
      <p>Please read carefully and acknowledge the following:</p>
      <md-checkbox
        aria-label="question01"
        name="question01"
        ng-change="$ctrl.checkAnswers()"
        ng-model="$ctrl.questions.q1"
      >
        I understand that it is
        <a>
          <md-tooltip md-direction="top">You control your password for your own safety.</md-tooltip>
          impossible to recover
        </a>
        the password.
      </md-checkbox>
      <md-checkbox
        aria-label="question02"
        name="question02"
        ng-change="$ctrl.checkAnswers()"
        ng-disabled="!$ctrl.questions.q1"
        ng-model="$ctrl.questions.q2"
      >
        I agree to remember the password or make a <a>
          <md-tooltip md-direction="top">Write on paper or another non-digital form.</md-tooltip>
          paper copy
        </a>.
      </md-checkbox>
      <md-checkbox
        aria-label="question03"
        name="question03"
        ng-change="$ctrl.checkAnswers()"
        ng-disabled="!$ctrl.questions.q1 || !$ctrl.questions.q2"
        ng-model="$ctrl.questions.q3"
      >
        I will make a copy of my password and store it securely with my
        <a>
          <md-tooltip md-direction="top">Trustee may be close family, friends, lawyers, etc.</md-tooltip>
          trustee
        </a>.
      </md-checkbox>
    </div>
    <div class="signup__step--action">
      <md-button
        ng-disabled="$ctrl.isCreateDisabled"
        ng-click="$ctrl.createAccount()"
      >
        Create Account <br>
        {{ $ctrl.user.login }}
      </md-button>
    </div>
    <div
      ng-if="$ctrl.signupError"
      class="signup__step--error-wrap"
    >
      {{ $ctrl.signupError }}
    </div>
  </section>

  <div
    ng-if="$ctrl.isWait"
    class="wait-spinner"
  >
    <md-progress-circular
      md-mode="indeterminate"
      md-diameter="24"
    >
    </md-progress-circular>
    <div class="wait-spinner__text">
      {{ $ctrl.waitText }}
    </div>
  </div>
</form>
