<div class="page-wrapper">
  <!-- simple box -->
  <div class="container simple-box">
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
      <!-- simple box logo -->
      <div class="row">
        <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
        <img ng-if="!logo" src="../../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer" />
      </div>
      <!-- !simple box logo -->
      <!-- init password panel -->
      <div class="panel panel-default">
        <div class="panel-body">
          <!-- init password form -->
          <form class="simple-box-form form-horizontal">
            <!-- note -->
            <div class="form-group">
              <div class="col-sm-12">
                <span class="small text-muted">
                  Please create the initial administrator user.
                </span>
              </div>
            </div>
            <!-- !note -->
            <!-- username-input -->
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label text-left">
                Username
              </label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="username" ng-model="formValues.Username" placeholder="e.g. admin" />
              </div>
            </div>
            <!-- !username-input -->
            <!-- new-password-input -->
            <div class="form-group">
              <label for="password" class="col-sm-4 control-label text-left">Password</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" ng-model="formValues.Password" id="password" auto-focus />
              </div>
            </div>
            <!-- !new-password-input -->
            <!-- confirm-password-input -->
            <div class="form-group">
              <label for="confirm_password" class="col-sm-4 control-label text-left">Confirm password</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" />
                  <span class="input-group-addon"
                    ><i
                      ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[formValues.Password !== '' && formValues.Password === formValues.ConfirmPassword]"
                      aria-hidden="true"
                    ></i
                  ></span>
                </div>
              </div>
            </div>
            <!-- !confirm-password-input -->
            <!-- note -->
            <div class="form-group">
              <div class="col-sm-12">
                <span class="small text-muted">
                  <i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[formValues.Password.length >= 8]" aria-hidden="true"></i>
                  The password must be at least 8 characters long
                </span>
              </div>
            </div>
            <!-- !note -->
            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  ng-disabled="state.actionInProgress || formValues.Password.length < 8 || formValues.Password !== formValues.ConfirmPassword"
                  ng-click="createAdminUser()"
                  button-spinner="state.actionInProgress"
                >
                  <span ng-hide="state.actionInProgress"><i class="fa fa-user-plus" aria-hidden="true"></i> Create user</span>
                  <span ng-show="state.actionInProgress">Creating user...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
          <!-- !init password form -->
        </div>
      </div>
      <!-- !init password panel -->
    </div>
  </div>
  <!-- !simple box -->
</div>
