<div class="container pt-5">

    <div class="text-center" *ngIf="isLoading">
        <div class="spinner-border" role="status"></div>
    </div>

    <div *ngIf="errorWhileLoading">
        <h2>Error :(</h2>
        <button (click)="loadContact()">Try again</button>
    </div>

    <div *ngIf="!isLoading && !errorWhileLoading">
        <form [formGroup]="contactForm">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Name" formControlName="name"
                    [class.is-invalid]="displayError('name')">
            </div>

            <div class="form-group">
                <label for="cpf">CPF</label>
                <input type="text" class="form-control" id="cpf" placeholder="CPF" formControlName="cpf"
                    [class.is-invalid]="displayError('cpf')">
            </div>

            <!-- <div formGroupName="bankData"> -->
            <div class="form-group">
                <label for="bank">Bank</label>
                <input type="text" class="form-control" id="bank" placeholder="Bank" formControlName="bank"
                    [class.is-invalid]="displayError('bankData.bank')">
            </div>

            <div class="form-group">
                <label for="ag">Agency</label>
                <input type="number" class="form-control" id="ag" placeholder="Agency" formControlName="ag"
                    [class.is-invalid]="displayError('bankData.ag')">
            </div>

            <div class="form-group">
                <label for="cc">Account</label>
                <input type="text" class="form-control" id="cc" placeholder="Account" formControlName="cc"
                    [class.is-invalid]="displayError('bankData.cc')">
            </div>

            <button class="btn btn-primary" (click)="onSubmit()">
                {{ isEditing() ? 'Save contact' : 'Create contact' }}
            </button>

        </form>
    </div>

</div>