<div class="p3xr-console-root" [class.p3xr-console-root-embedded]="embedded" (click)="activate()">

    <!-- Console header toolbar -->
    <mat-toolbar class="p3xr-console-toolbar p3xr-accordion-toolbar" id="p3xr-console-header">
        <div class="p3xr-console-toolbar-tools">

            @if (type !== 'quick') {
                <span class="material-icons" style="margin-right: 6px;">terminal</span>
                <span class="p3xr-console-title">{{ strings().label?.console }}</span>
                <span class="p3xr-toolbar-spacer"></span>

                <span class="p3xr-console-toolbar-actions">
                    @if (isAiGloballyEnabled()) {
                        <span class="p3xr-console-ai-toggle" (click)="aiAutoDetect = !aiAutoDetect">
                            <span class="material-icons">{{ aiAutoDetect ? 'check_box' : 'check_box_outline_blank' }}</span>
                            <span>Auto AI</span>
                        </span>
                    }
                    <p3xr-ng-button [label]="strings().label?.redisCommandsReference" mdIcon="menu_book"
                        (click)="openCommands($event)"></p3xr-ng-button>
                    <p3xr-ng-button [label]="strings().intention?.clear" mdIcon="backspace"
                        (click)="clearConsole()"></p3xr-ng-button>
                </span>
            } @else {
                <span class="material-icons" style="margin-right: 6px;">terminal</span>
                <span class="p3xr-console-title">{{ embedded ? (strings().label?.console) : (strings().intention?.quickConsole) }}</span>
                <span class="p3xr-toolbar-spacer"></span>

                <span class="p3xr-console-toolbar-actions">
                    @if (isAiGloballyEnabled()) {
                        <span class="p3xr-console-ai-toggle" (click)="aiAutoDetect = !aiAutoDetect">
                            <span class="material-icons">{{ aiAutoDetect ? 'check_box' : 'check_box_outline_blank' }}</span>
                            <span>Auto AI</span>
                        </span>
                    }
                    <p3xr-ng-button [label]="strings().label?.redisCommandsReference" mdIcon="menu_book"
                        (click)="openCommands($event)"></p3xr-ng-button>
                    <p3xr-ng-button [label]="strings().intention?.clear" mdIcon="backspace"
                        (click)="clearConsole()"></p3xr-ng-button>

                    @if (!embedded) {
                        <p3xr-ng-button [label]="strings().intention?.close" mdIcon="close"
                            (click)="closeConsole()"></p3xr-ng-button>
                    }
                    @if (showCloseButton) {
                        <button mat-icon-button class="p3xr-console-drawer-close"
                                (click)="requestClose()"
                                [matTooltip]="strings().label?.consoleDrawer?.closeTooltip ?? strings().intention?.close ?? ''"
                                matTooltipPosition="above"
                                [attr.aria-label]="strings().label?.consoleDrawer?.closeTooltip ?? strings().intention?.close ?? ''">
                            <mat-icon>keyboard_arrow_down</mat-icon>
                        </button>
                    }
                </span>
            }
        </div>
    </mat-toolbar>

    <!-- Console output area -->
    <div id="p3xr-console-content"
         [class.p3xr-content-border-fixed]="type !== 'quick'"
         [class.layout-padding]="type !== 'quick'"
         (click)="$event.stopPropagation()"
         (mousedown)="onContentMouseDown($event)">
        <div style="display: flex; flex-direction: row; align-items: stretch; min-height: 100%">
            @if (type === 'quick' && !embedded) {
                <div id="p3xr-console-content-resizer" (mousedown)="dragStart()" (mouseup)="dragEnd()"></div>
            }
            <div id="p3xr-console-content-output" style="flex-grow: 1;"></div>
        </div>
        @if (type !== 'quick') {
            <div id="p3xr-console-content-output"></div>
        }
    </div>

    <!-- Console input with mat-autocomplete -->
    <div id="p3xr-console-autocomplete"
         [class.p3xr-console-autocomplete-quick]="type === 'quick'"
         [class.p3xr-console-autocomplete-embedded]="embedded">
        @if (currentHint) {
            <div class="p3xr-console-hint">{{ currentHint }}</div>
        }
        <textarea id="p3xr-console-input" class="p3xr-input"
               rows="1"
               [formControl]="searchControl"
               (keydown)="onKeyDown($event)"
               [matAutocomplete]="auto"
               autocomplete="off"
               [readonly]="aiLoading"
               [class.p3xr-input-ai-loading]="aiLoading"
               [placeholder]="aiLoading ? (strings().label?.aiTranslating) : ''"
               [style.background]="'var(--p3xr-input-bg)'"
               [style.color]="'var(--p3xr-input-color)'"
               [style.border-color]="aiLoading ? 'var(--mat-sys-primary, var(--p3xr-input-border-color))' : 'var(--p3xr-input-border-color, var(--p3xr-border-color))'"
               [style.padding-right]="aiLoading ? '40px' : null"></textarea>
        @if (aiLoading) {
            <button type="button" class="p3xr-console-stop"
                    [matTooltip]="strings().intention?.cancel"
                    (click)="stopAi()">
                <mat-icon>stop_circle</mat-icon>
            </button>
        }
        <mat-autocomplete #auto="matAutocomplete"
                          (optionSelected)="onAutocompleteSelected($event)"
                          class="p3xr-console-autocomplete-panel"
                          position="above">
            @for (group of filteredCommands; track group.group) {
                <mat-optgroup [label]="group.group">
                    @for (cmd of group.commands; track cmd.name) {
                        <mat-option [value]="cmd.name">
                            <span class="p3xr-autocomplete-cmd">{{ cmd.name }}</span>
                            @if (cmd.syntax) {
                                <span class="p3xr-autocomplete-syntax">{{ cmd.syntax }}</span>
                            }
                        </mat-option>
                    }
                </mat-optgroup>
            }
        </mat-autocomplete>
    </div>
</div>