<div class="main-content d-flex justify-content-center align-items-center">
    <div class="login-section">
        <div class="login-section-bg">
            <form #loginForm="ngForm" (ngSubmit)="login()">
                <app-error
                    [error]="error"
                    authError="Invalid username/password">
                </app-error>

                <div class="form-group">
                    <input #apiEndpointInp="ngModel" [(ngModel)]="apiEndpoint"
                           [disabled]="loading"
                           autofocus
                           class="form-control"
                           id="apiEndpoint"
                           name="apiEndpoint"
                           placeholder="Server Address"
                           required>
                    <div *ngIf="!loading && !(apiEndpointInp.valid || apiEndpointInp.pristine)" class="alert alert-danger">
                        Value required.
                    </div>
                </div>

                <div class="form-group">
                    <input #emailInp="ngModel" [(ngModel)]="email"
                           [disabled]="loading"
                           autofocus
                           class="form-control"
                           id="email"
                           name="email"
                           placeholder="Email"
                           required
                           type="email">
                    <div *ngIf="!loading && !(emailInp.valid || emailInp.pristine)" class="alert alert-danger">
                        Value required.
                    </div>
                </div>

                <div class="form-group">
                    <input #passwordInp="ngModel" [(ngModel)]="password"
                           [disabled]="loading"
                           class="form-control"
                           id="password"
                           name="password"
                           placeholder="Password"
                           required
                           type="password">
                    <div *ngIf="!loading && !(passwordInp.valid || passwordInp.pristine)" class="alert alert-danger">
                        Value required.
                    </div>
                </div>

                <button [disabled]="loginForm.invalid || loading" class="btn btn-lg btn-primary btn-block" type="submit">
                    <ng-container *ngIf="!loading">
                        Sign in
                    </ng-container>
                    <ng-container *ngIf="loading">
                        <fa-icon icon="spinner" pulse="true"></fa-icon>
                        Signing in...
                    </ng-container>
                </button>
            </form>
        </div>
    </div>
</div>