<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>

<div class="uk-alert uk-alert-primary uk-margin-top-large">
    <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
    Edit html page content
</div>
<form  *ngIf="!errorMessage" [formGroup]="myForm">
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
       <!-- uk-tab="connect: #html-tab-content" -->
        <ul id="html-tab" uk-tab>
        <!-- <ul class="uk-subnav uk-subnav-pill" uk-switcher> -->
        <!-- [class]="mode == 'edit' ? 'uk-active' : ''" (click)="mode='edit'" -->
          <li><a>Edit</a></li>
          <!-- [class]="mode == 'preview' ? 'uk-active' : ''" (click)="mode='preview'; myForm.value.content=myeditor.instance.getData();" -->
          <li (click)="myForm.value.content=myeditor.instance.getData();"><a>Preview</a></li>
        </ul>
        <ul id="html-tab-content" class="uk-switcher uk-margin">
          <!-- [class]="mode == 'edit' ? 'uk-active' : ''" -->
          <li>
            <ckeditor
                    #myeditor
                    [readonly]="false"
                    debounce="500"
                    formControlName="content"
                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
                                extraPlugins: 'divarea'}">
            </ckeditor>
          </li>
          <!-- [class]="mode == 'preview' ? 'uk-active' : ''" -->
          <li>
            <pre [innerHTML]="myForm.value.content | safeHtml"></pre>
          </li>
        </ul>
    </div>
    <input type="hidden" formControlName="_id">
</form>
