<ion-view view-title="">
  <ion-content class="login-content" scroll="false">
    <form name="loginForm">
    <div class="lc-block toggled" id="l-login">
      <img src="img/login-logo.png" alt="" class="nf-circle nf-responsive-img nf-valign nf-profile-image-login">

      <span ng-show="loginctrl.login.has_error" class="nf-login-error">{{'InvalidUsernameAndPassword' | translate}}</span>
      <div class="input-group m-b-20">
        <span class="input-group-addon"><i class="icon ion-person"></i></span>

        <div class="fg-line">
          <input type="text" ng-model="loginctrl.credentials.username" name="username" id="username" class="form-control"
                 placeholder="{{'Username' | translate}}" autocorrect="off" autocapitalize="off" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}"
                 required>
        </div>
      </div>

      <div class="input-group m-b-20">
        <span class="input-group-addon"><i class="icon ion-unlocked"></i></span>

        <div class="fg-line">
          <input type="password" ng-model="loginctrl.credentials.password" autocorrect="off" autocapitalize="off" name="password"
                 id="password" class="form-control" placeholder="{{'Password' | translate}}" ng-class="{ 'has-errors' : loginForm.password.$invalid && !loginForm.password.$pristine, 'no-errors' : loginForm.password.$valid}"
                 required>
        </div>
      </div>

      <div class="clearfix"></div>
      <button class="button button-block button-orange ink ink-dark" ng-disabled="loginForm.$invalid"
              ng-click="loginctrl.doLogin()" type="submit">{{'Login' | translate}}
      </button>
      <p><b>&copy;&nbsp;nCinga</b> All rights reserved {{appVerion}}</p>
    </div>
      </form>
  </ion-content>
</ion-view>
