<div class="peek-nav-section">
    <!--
        The following 'div' groups button to the left of the Nav Bar.
        Can contain one to many buttons
    -->
    <div class="btn-group pull-left" role="group">

    </div>

    <!--
        The following 'div' groups button to the right of the Nav Bar.
        Can contain one to many buttons
    -->
    <div class="btn-group pull-right" role="group">
        <button class="nav-section-btn"
                role="group"
                [disabled]="!isLoginEnabled()"
                (click)="doLogin()">
            <fa name="sign-in"></fa>
            {{loginText()}}
        </button>
    </div>
</div>

<div class="peek-nav-bar-padding">
    <!-- This div provides padding for the screen under the Navigation Section -->

</div>

<div class="plugin-user">
    <form autocomplete="off" novalidate (keyup.enter)="doLogin()">
        <fieldset [disabled]="isAuthenticating">
            <div class="bg-danger" *ngFor="let error of errors">
                {{error}}
            </div>

            <div class="bg-warning" *ngFor="let warning of warnings">
                {{warning}}
            </div>

            <div class="form-group">
                <label for="username" class="user-message">User</label>

                <!-- Login with user list selection -->
                <select *ngIf="setting.showUsersAsList"
                        id="username" class="form-control" name="userName"
                        [(ngModel)]="selectedUser.userName">
                    <option [value]="user.userId" *ngFor="let user of users">
                        {{webDisplayText(user)}}
                    </option>
                </select>
                <input *ngIf="!setting.showUsersAsList"
                       class="form-control" type="text" id="username"
                       name="password"
                       [(ngModel)]="selectedUser.userName">
            </div>

            <!-- Login with user input box -->
            <div class="form-group">
                <label class="user-message" for="password">Password :</label>
                <input class="form-control" type="password" id="password"
                       name="password"
                       [(ngModel)]="selectedUser.password">
            </div>
            <div *ngIf="setting.showVehicleInput"
                 class="form-group">
                <label class="user-message" for="vehicleIdField">Vehicle :</label>
                <input class="form-control" type="text" id="vehicleIdField"
                       name="vehicleId"
                       [(ngModel)]="selectedUser.vehicleId">
            </div>
        </fieldset>
    </form>
</div>