


    <!--Page header-->
    <div class="page-header d-xl-flex d-block justify-content-between">
        <div class="page-leftheader">
            <h4 class="page-title">
                <div class="d-flex">
                    <div class="font-weight-normal text-muted ms-2 border-0 responseFlowName" contenteditable="true" #title>
                        @if(flow){
                            @if(flow?.responseName){
                                {{flow?.responseName}}
                                }@else{
                                {{ 'Response Flow' | translate }}}
                        }@else{
                        {{ 'Response Flow' | translate }}
                        }
                    </div>
                    <i class="feather feather-edit text-primary ms-2 mt-2"
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title=""
                        (click)="focusTitle(title)"
                        data-bs-original-title="Edit"
                        aria-label="Edit"
                    ></i>
                </div>
            </h4>
        </div>
        <div>
        </div>
        <!--The content below is only a placeholder and can be replaced.-->
<div class="d-flex justify-content-end my-3">
    <div class="dimmer me-3 d-flex autoSavedSpiner"> <div class="spinner4 my-3 d-none"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div><b class="ms-3 my-auto d-none">Auto Saved</b></div>
    @if(flowChatId == "null"){
        <button class="btn btn-gray tryItOutBtn" href="javascript:void(0);"
        NAME="My Window Name"  title=" My title here "
        (click)='tryItOut(flowChatId)' disabled="true">Try It Out</button>
        <button class="ms-3 btn btn-md btn-primary" id="liveChatFlowBtn" disabled="true">Active</button>
    }@else{
        <button class="btn btn-gray tryItOutBtn" href="javascript:void(0);" id=""
        NAME="My Window Name"  title=" My title here "
        (click)='tryItOut(flowChatId)'>Try It Out</button>
        <button class="ms-3 btn btn-md btn-primary" id="liveChatFlowBtn" (click)="activateLiveChat()">Active</button>
    }
</div>

    </div>

<div>
    <div id="editor" class="rete node-editor editor-wrapper-nodes"  #rete></div>
</div>


<ng-template #liveChatOffcanvas let-offcanvas>
    <div class="offcanvas-header">
        <h5 id="offcanvasRightLabel">Conversation Editor</h5>
        <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
    </div>
    <div class="offcanvas-body">
        <div class="offcanvas-body">
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Edit text</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="10" [(ngModel)]="name"></textarea>
                <button type="button" class="btn btn-primary mt-2 float-endn conversationEditorBtn"
                    (click)="offcanvas.close('Save click')">Save</button>
            </div>
        </div>
    </div>
</ng-template>