<div class="loading" ng-if="!loggedIn">
  <div class="mainlogo"></div>

  <div class="progress progress-striped active" ng-class="{ hidden: !checkingLogin }">
    <div
      class="progress-bar fit-w"
      role="progressbar"
      aria-label="{{ 'Progress' | translate }} "
      aria-valuenow="0"
      aria-valuemin="0"
      aria-valuemax="100"
    ></div>
  </div>

  <div ng-switch="ctrl.formToDisplay" class="clearfix m-b-16" placeholder-no-required-hint>
    <div ng-switch-when="login" ng-if="ctrl.oauthOptions">
      <button
        class="btn btn-primary btn-block btn-lg"
        type="button"
        title="{{ ctrl.oauthOptions.buttonName | translate }}"
        ng-click="ctrl.redirectOauth()"
      >
        <i c8y-icon="sign-in" class="pull-left"></i>
        <span>{{ ctrl.oauthOptions.buttonName | translate }}</span>
      </button>
      <div class="legend form-block center" ng-if="ctrl.showBasic">
        {{ 'or' | translate }}
      </div>
    </div>

    <form
      ng-if="ctrl.showBasic"
      ng-switch-when="login"
      ng-keydown="ctrl.validate(form_login)"
      ng-submit="ctrl.login(ctrl.user)"
      name="form_login"
      class="loginForm"
      no-validate
    >
      <span class="hidden" ng-init="ctrl.setCurrentForm(form_login)"></span>

      <div
        class="input-group input-group-lg form-group tenantField"
        id="tenantField"
        ng-if="ctrl.showTenant"
        ng-class="ctrl.fieldClass('tenant')"
        tooltip-placement="right"
        uib-tooltip="{{ ctrl.fieldTooltip('tenant') }}"
      >
        <span class="input-group-addon">
          <i c8y-icon="users"></i>
        </span>
        <input
          type="text"
          name="tenant"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          placeholder="{{ 'Tenant' | translate }}"
          ng-model="ctrl.user.tenant"
        />
      </div>

      <div
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('user')"
        tooltip-placement="right"
        uib-tooltip="{{ ctrl.fieldTooltip('user') }}"
      >
        <span class="input-group-addon">
          <i c8y-icon="user"></i>
        </span>
        <input
          type="text"
          name="user"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          placeholder="{{ 'Username' | translate }}"
          required
          ng-model="ctrl.user.name"
        />
      </div>

      <div
        uib-tooltip="{{ ctrl.fieldTooltip('password') }}"
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('password')"
        tooltip-placement="right"
      >
        <span class="input-group-addon">
          <i c8y-icon="lock"></i>
        </span>
        <input
          type="password"
          name="password"
          class="form-control"
          placeholder="{{ 'Password' | translate }}"
          ng-model="ctrl.user.password"
          required
        />
      </div>

      <div class="form-group">
        <label title="{{ 'Remember me' | translate }}" class="c8y-checkbox">
          <input type="checkbox" name="remember" ng-model="ctrl.user.rememberMe" />
          <span></span>
          <span>{{ 'Remember me' | translate }}</span>
        </label>
      </div>

      <button
        class="btn btn-primary btn-lg btn-block form-group"
        type="submit"
        title="{{ 'Log in' | translate }}"
        ng-disabled="ctrl.disabledForm(form_login)"
      >
        {{ 'Log in' | translate }}
      </button>

      <div class="text-center m-t-8">
        <p>
          <a
            title="{{ 'Forgot password?' | translate }}"
            class="btn btn-link btn-sm forgottenPasswordLink"
            ng-click="ctrl.showForm(ctrl.FORMS.PASSWORD_RESET)"
          >
            {{ 'Forgot password?' | translate }}
          </a>
        </p>
        <p ng-show="ctrl.extra_link">
          <a
            title="{{ ctrl.extra_link.label | translate }}"
            ng-href="{{ ctrl.extra_link.url | translate }}"
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-link btn-sm"
          >
            {{ ctrl.extra_link.label | translate }}
          </a>
        </p>
      </div>
    </form>

    <form
      ng-switch-when="password_reset"
      ng-keydown="ctrl.validate(form_password_reset)"
      ng-submit="ctrl.resetPassword(ctrl.user)"
      name="form_password_reset"
      class="passwordResetRequestForm"
    >
      <span class="hidden" ng-init="ctrl.setCurrentForm(form_password_reset)"></span>

      <div
        class="input-group input-group-lg form-group tenantField"
        ng-class="ctrl.fieldClass('tenant')"
        uib-tooltip="{{ ctrl.fieldTooltip('tenant') }}"
        tooltip-placement="right"
        ng-if="ctrl.showTenant"
      >
        <span class="input-group-addon">
          <i c8y-icon="users"></i>
        </span>
        <input
          type="text"
          name="tenant"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          placeholder="{{ 'Tenant' | translate }}"
          ng-model="ctrl.user.tenant"
        />
      </div>

      <div
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('email')"
        uib-tooltip="{{ ctrl.fieldTooltip('email') }}"
        tooltip-placement="right"
      >
        <span class="input-group-addon">
          <i c8y-icon="envelope"></i>
        </span>
        <input
          type="email"
          name="email"
          class="form-control"
          placeholder="{{ 'Email address' | translate }}"
          required
          ng-model="ctrl.user.email"
        />
      </div>

      <button
        class="btn btn-primary btn-lg btn-block form-group"
        type="submit"
        title="{{ 'Reset password' | translate }}"
        ng-disabled="ctrl.disabledForm(form_password_reset)"
      >
        {{ 'Reset password' | translate }}
      </button>

      <div class="m-t-8">
        <a
          title="{{ 'Login' | translate }}"
          class="btn btn-link pull-right"
          ng-click="ctrl.showForm(ctrl.FORMS.LOGIN)"
        >
          {{ 'Login' | translate }}
        </a>
      </div>
    </form>

    <form
      ng-switch-when="new_password"
      ng-keydown="ctrl.validate(form_new_password)"
      ng-submit="ctrl.changePassword(ctrl.user)"
      name="form_new_password"
      class="newPasswordForm"
    >
      <span class="hidden" ng-init="ctrl.setCurrentForm(form_new_password)"></span>

      <div
        class="input-group input-group-lg form-group tenantField"
        ng-class="ctrl.fieldClass('tenant')"
        uib-tooltip="{{ ctrl.fieldTooltip('tenant') }}"
        tooltip-placement="right"
        ng-if="ctrl.showTenant"
      >
        <span class="input-group-addon">
          <i c8y-icon="users"></i>
        </span>
        <input
          type="text"
          name="tenant"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          placeholder="{{ 'Tenant' | translate }}"
          ng-blur="ctrl.onTenantInputBlur()"
          ng-focus="ctrl.removeRemoteError()"
          required
          ng-model="ctrl.user.tenant"
        />
      </div>

      <div
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('newPassword')"
        uib-tooltip="{{ ctrl.fieldTooltip('newPassword') }}"
        tooltip-placement="right"
      >
        <span class="input-group-addon">
          <i c8y-icon="lock"></i>
        </span>
        <input
          type="password"
          name="newPassword"
          class="form-control"
          placeholder="{{ 'New password' | translate }}"
          required
          ng-model="ctrl.user.newPassword"
          ng-pattern="ctrl.passwordRegex"
        />
      </div>

      <div
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('newPasswordConfirm')"
        uib-tooltip="{{ ctrl.fieldTooltip('newPasswordConfirm') }}"
        tooltip-placement="right"
      >
        <span class="input-group-addon">
          <i c8y-icon="lock"></i>
        </span>
        <input
          type="password"
          name="newPasswordConfirm"
          class="form-control"
          placeholder="{{ 'Confirm new password' | translate }}"
          ng-focus="ctrl.removeRemoteError()"
          required
          ng-model="ctrl.user.confirmPassword"
        />
      </div>

      <div
        c8y-password-strength
        ng-show="ctrl.user.newPassword"
        user="ctrl.user"
        password="ctrl.user.newPassword"
        min-green-length="ctrl.user.minGreenLength"
      ></div>

      <c8y-password-strength-checklist
        ng-show="ctrl.user.newPassword && ctrl.user.enforcePasswordStrength"
        password="ctrl.user.newPassword"
        min-green-length="ctrl.user.minGreenLength"
      ></c8y-password-strength-checklist>

      <button
        class="btn btn-primary btn-lg btn-block form-group"
        type="submit"
        title="{{ 'Set password' | translate }}"
        ng-disabled="ctrl.disabledForm(form_new_password)"
      >
        {{ 'Set password' | translate }}
      </button>
    </form>

    <form
      ng-switch-when="phone_number"
      name="form_phone_number"
      ng-keydown="ctrl.validate(form_phone_number)"
      ng-submit="ctrl.savePhoneNumber(ctrl.phoneNumber)"
    >
      <span class="hidden" ng-init="ctrl.setCurrentForm(form_phone_number)"></span>

      <h4 class="text-center" translate>Provide your phone number</h4>

      <div class="input-group input-group-lg form-group" ng-class="ctrl.fieldClass('phonenumber')">
        <span class="input-group-addon">
          <i c8y-icon="mobile"></i>
        </span>
        <input
          type="text"
          name="phonenumber"
          placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
          ng-model="ctrl.phoneNumber"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          required
          maxlength="254"
          ng-maxlength="254"
          c8y-phone-number
        />
      </div>

      <button
        class="btn btn-primary btn-lg btn-block form-group"
        type="submit"
        title="{{ 'Save and continue' | translate }}"
        ng-disabled="ctrl.disabledForm(form_phone_number)"
      >
        {{ 'Save and continue' | translate }}
      </button>

      <div class="m-t-8">
        <a
          title="{{ 'Login' | translate }}"
          class="btn btn-link pull-right"
          href="#"
          ng-click="ctrl.showForm(ctrl.FORMS.LOGIN)"
        >
          {{ 'Login' | translate }}
        </a>
      </div>
    </form>

    <form
      ng-switch-when="sms_token"
      name="form_sms_token"
      ng-keydown="ctrl.validate(form_sms_token)"
      ng-submit="ctrl.verifyTFACode(ctrl.pin)"
      class="SMStoken"
    >
      <span class="hidden" ng-init="ctrl.setCurrentForm(form_sms_token)"></span>

      <h4 class="text-center" translate>Insert the code received via SMS</h4>

      <div
        class="input-group input-group-lg form-group"
        ng-class="ctrl.fieldClass('smstoken')"
        uib-tooltip="{{ ctrl.fieldTooltip('smstoken') }}"
        tooltip-placement="right"
      >
        <span class="input-group-addon">
          <i c8y-icon="mobile"></i>
        </span>
        <input
          type="text"
          name="smstoken"
          autocapitalize="off"
          autocorrect="off"
          class="form-control"
          required
          placeholder="{{ 'Verification code' | translate }}"
          ng-model="ctrl.pin"
        />
      </div>

      <button
        class="btn btn-primary btn-lg btn-block form-group"
        type="submit"
        title="{{ 'Verify' | translate }}"
        ng-disabled="ctrl.disabledForm(form_sms_token)"
      >
        {{ 'Verify' | translate }}
      </button>

      <div class="m-t-8">
        <a
          title="{{ 'Login' | translate }}"
          class="btn btn-link pull-right"
          href="#"
          ng-click="ctrl.showForm(ctrl.FORMS.LOGIN)"
        >
          {{ 'Login' | translate }}
        </a>
        <a
          title="{{ 'Send new code' | translate }}"
          class="btn btn-link"
          href="#"
          ng-click="ctrl.resendTFASms()"
        >
          {{ 'Send new code' | translate }}
        </a>
      </div>
    </form>
  </div>

  <div class="alert" ng-repeat="m in ctrl.messages" ng-class="m.class">
    {{ m.text | translate }}
  </div>
</div>
