<div id="header" class="header">
    Spring Flo Sample
</div>
<div id="flo-container">
    <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodel" [renderer]="renderer" [editor]="editor"
                [paletteSize]="paletteSize" [paletteEntryPadding]="{width: 4, height: 4}" [(dsl)]="dsl"
                [paperPadding]="20" (validationMarkers)="markersChanged($event)" searchFilterPlaceHolder="Apps..."
                (onProperties)="editor.openPropertiesDialog($event)">
        <div header>
            <div id="controls" class="controls">
                <button class="button" id="editor" (click)="dslEditor = !dslEditor" [ngClass]="{on:dslEditor}">{{dslEditor ?
                    'TextArea' : 'Editor'}}
                </button>
            </div>
            <div class="flow-definition-container">
                <dsl-editor *ngIf="dslEditor" [(dsl)]="dsl" line-numbers="true" line-wrapping="true"
                            (blur)="editorContext.graphToTextSync=true" (focus)="editorContext.graphToTextSync=false"
                            placeholder="Enter stream definition..."></dsl-editor>
                <textarea *ngIf="!dslEditor" id="flow-definition" class="flow-definition"
                          placeholder="Enter stream definition..."
                          [value]="dsl" (keyup)="dsl=$event.target.value" (blur)="editorContext.graphToTextSync=true"
                          (focus)="editorContext.graphToTextSync=false"></textarea>
            </div>
        </div>
    </flo-editor>
</div>