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

    <!-- Console header toolbar -->
    <mat-toolbar class="p3xr-console-toolbar p3xr-mat-layout-strong" id="p3xr-console-header"
        [class.p3xr-content-border-toolbar]="type === 'quick'">
        <div class="p3xr-console-toolbar-tools">

            @if (type !== 'quick') {
                <span class="p3xr-console-title">{{ strings().label?.console || '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"
                              [matTooltip]="'Auto AI'">
                            <span class="material-icons">{{ aiAutoDetect ? 'check_box' : 'check_box_outline_blank' }}</span>
                            <span>Auto AI</span>
                        </span>
                    }
                    <p3xr-ng-button [label]="strings().label?.redisCommandsReference || 'Redis Commands'" mdIcon="terminal"
                        (click)="openCommands($event)"></p3xr-ng-button>
                    <p3xr-ng-button [label]="strings().intention?.clear || 'Clear'" mdIcon="backspace"
                        (click)="clearConsole()"></p3xr-ng-button>
                </span>
            } @else {
                <span class="p3xr-console-title">{{ embedded ? (strings().label?.console || 'Console') : (strings().intention?.quickConsole || 'Quick 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"
                              [matTooltip]="'Auto AI'">
                            <span class="material-icons">{{ aiAutoDetect ? 'check_box' : 'check_box_outline_blank' }}</span>
                            <span>Auto AI</span>
                        </span>
                    }
                    <p3xr-ng-button [label]="strings().label?.redisCommandsReference || 'Redis Commands'" mdIcon="terminal"
                        (click)="openCommands($event)"></p3xr-ng-button>
                    <p3xr-ng-button [label]="strings().intention?.clear || 'Clear'" mdIcon="backspace"
                        (click)="clearConsole()"></p3xr-ng-button>

                    @if (!embedded) {
                        <p3xr-ng-button [label]="strings().intention?.close || 'Close'" mdIcon="close"
                            (click)="closeConsole()"></p3xr-ng-button>
                    }
                </span>
            }
        </div>
    </mat-toolbar>

    <!-- Console output area -->
    <div id="p3xr-console-content" class="p3xr-content-border-fixed"
         [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">
        <textarea id="p3xr-console-input" class="p3xr-input"
               rows="1"
               [formControl]="searchControl"
               (keydown)="onKeyDown($event)"
               [matAutocomplete]="auto"
               autocomplete="off"
               [placeholder]="aiLoading ? (strings().label?.aiTranslating || 'Translating...') : ''"
               [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))'"></textarea>
        @if (currentHint) {
            <div class="p3xr-console-hint">{{ currentHint }}</div>
        }
        <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>