<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="form-signin shadow-lg p-3 mb-5 bg-white rounded">
  <img [src]="'./assets/images/logo.png'" width="150px" alt="bettercap - Logo" class="img-responsive">
  <div style="text-align: center; margin-top: 15px">
    <small>bettercap {{ env.name }} v{{ env.version }} | requires bettercap v{{ env.requires }}</small>
  </div>

  <hr/>

  <ngb-alert *ngIf="error && error.status == 401 && submitted" type="danger" (close)="error = submitted = false">
    {{error.status}} {{error.statusText}}: wrong credentials.
  </ngb-alert>
  <ngb-alert *ngIf="error && error.status == 666 && submitted" type="danger" (close)="error = submitted = false">
    {{ error.error }}
  </ngb-alert>

  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" formControlName="username" id="username" class="form-control" autofocus>
    <ngb-alert *ngIf="submitted && form.username.errors && form.username.errors.required" type="danger">
      Username required.
    </ngb-alert>
  </div>
  
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" formControlName="password" id="password" class="form-control">
    <ngb-alert *ngIf="submitted && form.password.errors && form.password.errors.required" type="danger">
      Password required.
    </ngb-alert>
  </div>

  <div class="form-group">
    <label for="url">API URL</label>
    <input type="text" formControlName="url" id="url" class="form-control" required>
    <ngb-alert *ngIf="submitted && error && error.status === 0" type="danger" (close)="error = submitted = false">
      Can't connect to {{ api.settings.URL() }}
    </ngb-alert>
  </div>

  <button class="btn btn-dark btn-lg btn-block">Login</button>
</form>
