<div class="centered-block-frame" id="login">
  <div class="col-md-4 col-xs-12 col-sm-12 centered-block">
    <div class="panel panel-default shadow-z-2">
      <div class="panel-body">
        <h3>Login</h3>

        <div ng-show="form.$submitted && form.$invalid" class="alert alert-danger">
          <p>Verify the fields bellow and try again.</p>
        </div>

        <form name="form" class="css-form" novalidate ng-init="advanced = false">
          <div class="form-group {{ (((!form.name.$pristine || form.$submitted) && !form.name.$valid) ? 'has-error': '') }}">
            <label class="control-label" for="login-name">Name</label>
            <input type="text" name="name" class="form-control" id="login-name" placeholder="Your name" required="" ng-model="verto.data.name" autofocus>
          </div>
          <div class="form-group {{ (((!form.email.$pristine || form.$submitted) && !form.email.$valid) ? 'has-error': '') }}">
            <label class="control-label" for="login-email">Email</label>
            <input type="email" name="email" class="form-control" id="login-email" placeholder="Your email" required="" ng-model="verto.data.email" ng-model-options="{debounce: 250}">
          </div>

          <div class="form-group" ng-hide="!advanced">
              <label class="control-label" for="login-user">User</label>
            <input type="text" class="form-control" id="login-user" placeholder="User" ng-model="verto.data.login">
          </div>
          <div class="form-group" ng-hide="!advanced">
            <label class="control-label" for="login-password">Password</label>
            <input type="password" class="form-control" id="login-password" placeholder="Password" ng-model="verto.data.password">
          </div>

          <div class="form-group" ng-hide="!advanced">
            <label class="control-label" for="login-hostname">Hostname</label>
            <input type="text" class="form-control" id="login-hostname" placeholder="Hostname" ng-model="verto.data.hostname">
          </div>
          <div class="form-group" ng-hide="!advanced">
            <label class="control-label" for="login-wsurl">Websocket URL</label>
            <input type="text" class="form-control" id="login-wsurl" placeholder="Websocket URL" ng-model="verto.data.wsURL">
          </div>

          <div class="form-group hide">
            <label for="login-login">Login</label>
            <input type="text" class="form-control" id="login-login" placeholder="Login" ng-model="verto.data.login">
          </div>
          <div class="form-group hide">
            <label for="login-password">Password</label>
            <input type="text" class="form-control" id="login-password" placeholder="Password" ng-model="verto.data.password">
          </div>

          <div class="form-group text-right">
            <a style="margin-top: 13px;" href="" ng-click="advanced = !advanced" class="pull-left">Settings</a>
            <button type="submit" class="btn btn-success" ng-click="(form.$valid && login())">Login</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
