<div class="d-flex flex-column h-100">
    <app-error [error]="error"></app-error>

    <div class="mt-3 mb-2 mr-3 d-flex justify-content-end">
        <select [(ngModel)]="selectedModelId" class="form-control mr-2">
            <ng-container *ngFor="let m of allModels()">
                <option [ngValue]="m.id">{{m.name}} ({{m.id}}:{{m.version}})</option>
            </ng-container>
        </select>
    </div>

    <ng-container *ngIf="hasModel">
        <div class="mb-2 mr-3 d-flex justify-content-between">
            <button (click)="clearConversation()" [disabled]="!selectedModelId" class="btn btn-sm btn-light" type="button">
                <fa-icon icon="comment-slash"></fa-icon>
                Reset Conversation Context
            </button>

            <button (click)="clear()" [disabled]="!selectedModelId" class="btn btn-sm btn-light" type="button">
                <fa-icon icon="trash-alt"></fa-icon>
                Clear
            </button>
        </div>


        <div class="border rounded flex-grow-1 mb-3 mr-3 p-3 d-flex flex-column-reverse " style="overflow: auto; height: 0">
            <div (click)="selectedQuery = s" *ngFor="let s of states" class="chat-entry">
                <div class="alert alert-primary">
                    {{s.txt}}
                </div>

                <div *ngIf="s.status === 'QRY_ENLISTED'" class="alert alert-secondary">
                    <fa-icon class="mr-2" icon="spinner" pulse="true"></fa-icon>
                    Processing...
                </div>

                <ng-container *ngIf="s.status === 'QRY_READY'">
                    <div *ngIf="s.resBody" class="alert alert-success">
                        {{s.resBody}}
                    </div>
                    <div *ngIf="s.error" class="alert alert-danger">
                        {{s.error}}
                    </div>
                </ng-container>
            </div>
        </div>

        <form (ngSubmit)="ask()" name="askForm">
            <div class="row ml-0 mr-3 mb-4">
                <input [(ngModel)]="queryText"
                       class="form-control form-control-lg"
                       name="queryText"
                       placeholder="Ask..."
                       type="text">
            </div>
        </form>
    </ng-container>
</div>