<div class="rules-screen-container">
    <!-- Main content area -->
    <div class="main-content">
        <div class="header-container">
            <div [translate]="translations[type()]['title']" class="heading-l"></div>
        </div>

        <div class="flex" style="height: 100%">
            <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>

            <div [class.collapsed]="collapsed()" class="right-container flex-column">
                <div class="collapsed-wrapper">
                    <ng-container
                        *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: ('copilot' | translate) }"
                    ></ng-container>
                    <div class="all-caps-label" translate="dossier-details.title"></div>
                </div>

                <div class="header-wrapper flex mt-8">
                    <div class="heading-xl flex-1" id="dossierDetailsDossierName">Copilot</div>
                    <ng-container
                        *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: ('copilot' | translate) }"
                    ></ng-container>
                </div>

                <div class="mt-24">
                    @for (comment of responses$ | async; track comment) {
                        <div class="comment">
                            <div class="comment-details-wrapper">
                                <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
                                    {{ comment.date | date: 'sophisticatedDate' }}
                                </div>

                                <!--                <div class="comment-actions">-->
                                <!--                </div>-->
                            </div>

                            <div>{{ comment.text }}</div>
                        </div>
                    }

                    <iqser-input-with-action
                        (action)="add($event)"
                        [placeholder]="'comments.add-comment' | translate"
                        autocomplete="off"
                        icon="iqser:collapse"
                        width="full"
                    ></iqser-input-with-action>
                </div>
            </div>
        </div>

        <ng-template #collapsible let-action="action" let-tooltip="tooltip">
            <iqser-circle-button
                (action)="collapsed.set(!collapsed())"
                [icon]="'iqser:' + action"
                [tooltipPosition]="IqserTooltipPositions.before"
                [tooltip]="tooltip"
            ></iqser-circle-button>
        </ng-template>

        <div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box">
            <div (click)="goToErrors()" *ngIf="numberOfErrors() || numberOfWarnings()" class="errors">
                <span>
                    <mat-icon *ngIf="numberOfErrors()" [svgIcon]="'iqser:alert-circle'" class="icon"></mat-icon>
                    <div class="found-errors">
                        <span
                            *ngIf="numberOfErrors()"
                            [translateParams]="{ errors: numberOfErrors() }"
                            [translate]="translations[type()]['errors-found']"
                        >
                        </span>
                        <span
                            *ngIf="numberOfWarnings()"
                            [class.only-warning]="!numberOfErrors()"
                            [translateParams]="{ warnings: numberOfWarnings() }"
                            [translate]="translations[type()]['warnings-found']"
                            class="warning"
                        ></span>
                    </div>
                </span>
                <mat-icon [svgIcon]="'iqser:expand'" class="icon face-up"></mat-icon>
            </div>
            <div class="actions">
                <iqser-icon-button
                    (action)="save()"
                    [label]="translations[type()]['save-changes'] | translate"
                    [type]="iconButtonTypes.primary"
                    icon="iqser:check"
                ></iqser-icon-button>

                <div (click)="revert()" [translate]="translations[type()]['revert-changes']" class="all-caps-label cancel"></div>
            </div>
        </div>
    </div>

    <div class="rules-logger" [class.collapsed]="isLogCollapsed">
        <div class="logger-header" (click)="toggleLogCollapse()">
            <h3>Rules Log</h3>
            <button class="collapse-button">
                <!--todo: add proper icon -->
                <mat-icon>{{ isLogCollapsed ? 'x' : 'x' }}</mat-icon>
            </button>
        </div>

        <div class="logger-messages" *ngIf="!isLogCollapsed">
            <div *ngFor="let msg of messages" class="log-entry">
                <div class="log-header">
                    <span class="log-level">{{ msg.logLevel }}</span>
                    <span class="log-time">{{ msg.parsedTimeStamp | date: 'short' }}</span>
                </div>
                <div class="log-message">
                    {{ msg.message }}
                </div>
                <div class="log-details">
                    <!--todo: add translation -->
                    <div><strong>Tenant ID:</strong> {{ msg.tenantId }}</div>
                    <div><strong>File ID:</strong> {{ msg.fileId }}</div>
                    <div><strong>Dossier ID:</strong> {{ msg.dossierId }}</div>
                    <div><strong>Rule Version:</strong> {{ msg.ruleVersion }}</div>
                    <div><strong>Analysis Number:</strong> {{ msg.analysisNumber }}</div>
                    <div><strong>Timestamp:</strong> {{ msg.parsedTimeStamp }}</div>
                </div>
            </div>
        </div>
    </div>
</div>
