<div class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
<div class="adf-property-value">
    <span *ngIf="!isEditable()">
        <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">
            <span *ngIf="showProperty()">{{ property.displayValue }}</span>
        </span>
        <ng-template #elseBlock>
            <span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">
                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
            </span>
        </ng-template>
    </span>
    <span *ngIf="isEditable()">
        <div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key" fxLayout="row" fxLayoutAlign="space-between center">
            <span [attr.data-automation-id]="'card-textitem-value-' + property.key">
                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
            </span>
            <mat-icon fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key" class="adf-textitem-icon">create</mat-icon>
        </div>
        <div *ngIf="inEdit" class="adf-textitem-editable">
            <div class="adf-textitem-editable-controls">
                <mat-form-field floatPlaceholder="never" class="adf-input-container">
                    <input *ngIf="!property.multiline" #editorInput
                        matInput
                        class="adf-input"
                        [placeholder]="property.default | translate"
                        [(ngModel)]="editedValue"
                        [attr.data-automation-id]="'card-textitem-editinput-' + property.key">
                    <textarea *ngIf="property.multiline" #editorInput
                        matInput
                        matTextareaAutosize
                        matAutosizeMaxRows="1"
                        matAutosizeMaxRows="5"
                        class="adf-textarea"
                        [placeholder]="property.default | translate"
                        [(ngModel)]="editedValue"
                        [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
                </mat-form-field>
                <mat-icon
                    class="adf-textitem-icon adf-update-icon"
                    (click)="update()"
                    [attr.data-automation-id]="'card-textitem-update-' + property.key">done</mat-icon>
                <mat-icon
                    class="adf-textitem-icon adf-reset-icon"
                    (click)="reset()"
                    [attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</mat-icon>
            </div>
            <mat-error class="adf-textitem-editable-error" *ngIf="hasErrors()">
                <ul>
                    <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
                </ul>
            </mat-error>
        </div>
    </span>
    <ng-template #elseEmptyValueBlock>
        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
    </ng-template>
</div>
