<div class="row">
    <div style="margin-top: 16px;">
        @if(error) {
            <div class="alert alter-danger">
                <p>{{ error }}</p>
            </div>
        }
        @if(isLoading) {
            <div style="text-align: center;">
                <app-loading-spinner></app-loading-spinner>
            </div>
        }
        @else {
            <form (ngSubmit)="onSubmit(authForm)" #authForm="ngForm">
                <div class="form-group" style="margin-bottom: 7px;">
                    <label for="email">E-Mail</label>
                    <input type="email" id="email" class="form-control" ngModel name="email"  required email=""/>
                </div>
                <div class="form-group" style="margin-bottom: 7px;">
                    <label for="password">Password</label>
                    <input type="password" id="password" class="form-control" ngModel name="password" required/>
                </div>
                <div>
                    <button class="btn btn-primary" type="submit" [disabled]="!authForm.valid">
                        {{ isLoginMode ? 'Login' : 'Sign Up' }}
                    </button>
                    <button class="btn btn-primary" (click)="onSwitchMode()" type="button">
                        Switch to {{ isLoginMode ? 'Sign Up' : 'Login' }}
                    </button>
                </div>
            </form>
        }
    </div>
</div>
