<div class="container" style="padding-top:6%;">
    <div class="card card-container">
        <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
        <img id="profile-img" class="profile-img-card" src="{{'/assets/img/user/avatar/default.png'}}" />
        <p id="profile-name" class="profile-name-card"></p>
        <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate class="form-signin">
            <span id="reauth-email" class="reauth-email"></span>


            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <input class="form-control" placeholder="Username" type="text" name="username" [(ngModel)]="model.username" #username="ngModel"
                    required>
                <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
            </div>

            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
                <input class="form-control" placeholder="Password" type="password" name="password" [(ngModel)]="model.password" #password="ngModel"
                    required>
                <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
            </div>

            <div id="remember" class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button [disabled]="loading" class="btn btn-lg btn-primary btn-block btn-signin">Login</button>
        </form>
        <!-- /form -->
        <p class="message" style="text-align: center;">Not registered?
            <a routerLink="/register">Create an account</a>
        </p>
    </div>
    <!-- /card-container -->
</div>
<!-- /container -->