<div class="text-warning" *ngFor="let section of sections">
    <os-meta-text-block
        *ngIf="sectionVisible(section)"
        [showActionRow]="canEditSection(section) || comments[section.id].comment"
        [disableExpandControl]="isCommentEdited(section)"
        icon="comment"
    >
        <ng-container class="meta-text-block-title">
            <span>{{ section.getTitle() }}</span>
        </ng-container>

        <ng-container class="meta-text-block-content">
            <ng-container *ngIf="!isCommentEdited(section)">
                <div *ngIf="comments[section.id]" [innerHTML]="comments[section.id].comment | trust: 'html'"></div>
                <div class="no-content" *ngIf="!comments[section.id] || !comments[section.id].comment" translate>
                    No comment
                </div>
            </ng-container>
            <form [formGroup]="commentForms[section.id]" *ngIf="isCommentEdited(section)">
                <!-- The HTML Editor -->
                <editor
                    [id]="section.id"
                    formControlName="comment"
                    [init]="tinyMceSettings"
                    (onInit)="onInitTinyMce($event)"
                    (onRemove)="onLeaveTinyMce($event)"
                ></editor>
            </form>
            <div *ngIf="saveHint">
                <span translate>Touch the book icon to enter text</span>
                <br />
                <span class="red-warning-text" translate>Do not forget to save your changes!</span>
            </div>
        </ng-container>

        <ng-container class="meta-text-block-action-row">
            <button
                mat-icon-button
                *ngIf="!isCommentEdited(section) && canEditSection(section)"
                (click)="editComment(section)"
                matTooltip="{{ 'Edit' | translate }}"
            >
                <mat-icon>edit</mat-icon>
            </button>
            <button
                mat-icon-button
                *ngIf="!commentForms[section.id] && comments[section.id]?.comment"
                (click)="pdfExportSection(section)"
                matTooltip="{{ 'Export comment' | translate }}"
            >
                <mat-icon>picture_as_pdf</mat-icon>
            </button>
            <button
                mat-icon-button
                color="warn"
                *ngIf="isCommentEdited(section)"
                (click)="saveComment(section)"
                matTooltip="{{ 'Save' | translate }}"
            >
                <mat-icon>save</mat-icon>
            </button>
            <button
                mat-icon-button
                *ngIf="isCommentEdited(section)"
                (click)="cancelEditing(section)"
                matTooltip="{{ 'Cancel edit' | translate }}"
            >
                <mat-icon>close</mat-icon>
            </button>
        </ng-container>
    </os-meta-text-block>
</div>
