<os-meta-text-block showActionRow="true" icon="speaker_notes" [disableExpandControl]="true">
    <!-- Title row -->
    <ng-container class="meta-text-block-title">
        <span translate>Personal note</span>
    </ng-container>

    <!-- Actions -->
    <ng-container class="meta-text-block-action-row">
        <button mat-icon-button *ngIf="!isEditMode" (click)="editPersonalNote()" matTooltip="{{ 'Edit' | translate }}">
            <mat-icon>edit</mat-icon>
        </button>
        <button
            mat-icon-button
            *ngIf="!isEditMode && motion && motion.personalNote && motion.personalNote.note"
            (click)="printPersonalNote()"
            matTooltip="{{ 'Export personal note only' | translate }}"
        >
            <mat-icon>picture_as_pdf</mat-icon>
        </button>
        <button
            mat-icon-button
            color="warn"
            *ngIf="isEditMode"
            (click)="savePersonalNote()"
            matTooltip="{{ 'Save' | translate }}"
        >
            <mat-icon>save</mat-icon>
        </button>
        <button
            mat-icon-button
            *ngIf="isEditMode"
            (click)="isEditMode = false"
            matTooltip="{{ 'Cancel edit' | translate }}"
        >
            <mat-icon>close</mat-icon>
        </button>
    </ng-container>

    <!-- Content -->
    <ng-container class="meta-text-block-content">
        <ng-container *ngIf="!isEditMode">
            <div *ngIf="motion && motion.personalNote" [innerHTML]="personalNoteText | trust: 'html'"></div>
            <div class="no-content" *ngIf="!motion || !motion.hasNotes" translate>
                No personal note
            </div>
        </ng-container>
        <form [formGroup]="personalNoteForm" *ngIf="isEditMode">
            <!-- The HTML Editor -->
            <editor
                formControlName="note"
                [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>
</os-meta-text-block>
