<html lang="en" class=" webkit chrome mac js gr__localhost">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/editor/commons/images/favicon.png" rel="icon" type="image/png" sizes="16x16"/>
    <script src="/editor/commons/lib/css-browser-selector_0.4.0/css_browser_selector.js"></script>
    <link href="/editor/commons/lib/font-wso2-1.2.2/css/font-wso2.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/lib/bootstrap_v3.3.6/css/bootstrap.css"/>
    <link href="/editor/commons/lib/theme-wso2-2.0.0/css/theme-wso2.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/lib/jquery-ui_v1.12.1/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/lib/js-tree-v3.3.2/themes/default/style.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/lib/nanoscroller_0.8.7/nanoscroller.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/lib/data-table/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/lib/theme-wso2-2.0.0/extensions/datatables/css/dataTables.wso2.css" rel="stylesheet"
          type="text/css"/>
    <link href="/editor/commons/lib/theme-wso2-2.0.0/css/theme-wso2.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/styles.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/welcome-screen.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/menu-bar.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/tab-styles.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/fileDialog.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/css/left-tool-bar.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/css/workspace-explorer.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/css/operator-finder.css"/>
    <link href="/editor/commons/css/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/simulator.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/css/notification.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/lib/perfect-scrollbar-1.4.0/css/perfect-scrollbar.css"/>

    <!--Enjoy Hint CSS-->

    <link href="/editor/commons/css/enjoyhint.css" rel="stylesheet" type="text/css"/>
    <link href="/editor/commons/css/guide.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/editor/commons/lib/html5shiv_3.7.2/html5shiv.min.js"></script>
    <script src="/editor/commons/lib/respond_1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- JSONEditor doesn't suppot AMD/RequireJS -->
    <script src="/editor/commons/lib/json-editor_v0.7.28/jsoneditor.js"></script>
    <!-- loading jsPlumb script-->
    <script src="/editor/commons/lib/jsplumb_v2.6.9/jsplumb.min.js"></script>

    <!--<link rel="stylesheet" type="text/css" href="commons/css/sequence_diagram/sequenced-styles.css"/>-->

    <!--<link rel="stylesheet" type="text/css" href="commons/css/diagram/preview-pane.css"/>-->
    <link rel="stylesheet" type="text/css" href="/editor/css/styles.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/css/debugger.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/css/console.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/commons/css/welcome-screen.css"/>

    <link rel="stylesheet" type="text/css" href="/editor/css/design-view.css"/>
    <link rel="stylesheet" type="text/css" href="/editor/css/tool-palette.css"/>

    <!-- CSS For The Design View -->
    <link rel="stylesheet" type="text/css" href="/editor/commons/lib/overlay_scroll/css/OverlayScrollbars.min.css"/>

    <!-- SmartWizard CSS -->
    <link rel="stylesheet" type="text/css" href="/editor/commons/lib/smartWizard/css/smart_wizard.css" />
    <link rel="stylesheet" type="text/css" href="/editor/css/export-docker-kubernetes.css" />

    <title>Streaming Integrator Tooling</title>
</head>

<body class="sticky-footer">

<!-- Start: header -->
<header class="header header-default">
    <!-- Start: header - logo, title & menu-bar -->
    <div id="header-container" class="container-fluid">
        <div class="pull-left brand float-remove-xs text-center-xs">
            <a href="#">
                <img src="/editor/commons/lib/theme-wso2-2.0.0/images/logo-inverse.svg" alt="WSO2" title="WSO2"
                     class="logo">
                <h1>Streaming Integrator Tooling</h1>
            </a>
        </div>
        <div id="menu-bar-container" class="menu-bar pull-left">
        </div>
        <div id="tool-bar-container" class="tool-bar pull-left">
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="Start" class="run_btn">
                <i class="fw fw-start"></i>
            </a>
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="Debug" class="debug_btn">
                <i class="fw fw-bug"></i>
            </a>
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="Stop" class="stop_btn">
                <i class="fw fw-stop"></i>
            </a>
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="Revert Changes" class="revert_btn">
                <i class="fw fw-undo"></i>
            </a>
        </div>
    </div>
    <!-- End: header - logo, title & menu-bar -->
</header>
<!-- End: header -->

<!-- Start: page-content-wrapper -->
<div id="page-content-wrapper" class="page-content-wrapper">
    <div id="welcome-container"></div>
    <div id="page-content" class="container">
        <div id="page-content-first-row" class="clearfix page-content-first-row">

            <!-- Start: file explorer and server area row -->

            <!-- Start: left container -->
            <div class="left-container">
                <!-- Start: left tool bar -->
                <div class="left-tool-bar" data-toggle="tooltip">
                    <ul class="nav nav-tabs" role="tablist">
                        <li>
                            <a href="#workspace-explorer" role="tab" data-toggle="tab"
                               class="workspace-explorer-activate-btn">
                                <i class="fw fw-file-browse fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#event-simulator" role="tab" data-toggle="tab"
                               class="event-simulator-activate-btn">
                                <i class="fw fw-event-simulator fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#output-console" class="output-console-activate-btn open-console-btn">
                                <i class="fw fw-console fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#operator-finder" class="operator-finder-activate-btn" role="tab"
                               data-toggle="tab" data-placement="right" data-container="body">
                                <i class="fw fw-extensions fw-lg"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- End: left tool bar -->
                <!-- Start: left side-bar -->
                <div class="sidebar-left tab-content">
                </div>
                <div class="sidebar-left-separator" draggable="true"></div>
                <!-- End: left side-bar -->
            </div>
            <!-- End: left container -->
            <!-- Start: right container -->
            <div class="panel-container-vertical" id="right-container">
                <!-- Start: service tabs wrapper container-->
                <div class="container-fluid main-panel" id="service-tabs-wrapper">
                    <!-- Start: service tabs wrapper row -->
                    <!-- Start: service tabs -->
                    <div id="tabs-container" class="col-sm-12">
                        <div class="tab-headers tab-headers-bar">
                        </div>
                        <div id="tab-content-wrapper" class="grid-background">
                            <div class="tab-content tab-content-default "></div>
                        </div>
                    </div>
                    <!-- End: service tabs -->
                </div>
                <!-- End: service tabs wrapper row -->
                <div class="splitter-horizontal"></div>
                <div id="console-container" class="col-sm-12 hide console-container">
                    <div class="output-headers output-headers-bar">
                        <button type="button" class="close pull-right output-console-activate-btn close-console-btn"><i
                                class="fw fw-cancel"></i></button>
                    </div>
                    <div class="console-wrap">
                        <div class="output-console-content-wrapper">
                            <div class="consoleToolbar">
                                <a href="#" class="clear-console-btn" data-placement="right" data-toggle="tooltip"
                                   title="Clear">
                                    <i class="fw fw-clear"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End: service tabs wrapper container-->

            <!-- End: right container -->
        </div>
        <!-- End: file explorer and server area row -->
    </div>
</div>
<!-- End: page-content-wrapper -->

<!-- Start: footer -->
<footer class="footer">
    <div id="footer-container" class="container-fluid">
    </div>
</footer>
<!-- End: footer -->

<!-- Start: Template for a console -->
<div id="console-template">
    <div class="output-console-content output-console-content-default perfect-scroller">
    </div>
</div>
<!-- End: Template for console -->
<div class="hidden">
    <div id="form-template">
        <div class="form-wrapper">
            <div class="design-view-form-content perfect-scroller"></div>
            <div class="query-form-actions"></div>
        </div>
    </div>
</div>
<div class="hidden">
    <div id="debugger-template">
        <div class="output-console-content">
            <div class="debuggerToolbar">
                <span class="appName hidden"></span>
                <span class="debuggerTools">
                    <a class="debugger-resume-btn" title="Resume">
                        <i class="fw fw-resume"></i>
                    </a>
                    <a class="debugger-stepover-btn"
                       title="StepOver"><i class="fw fw-stepover"></i></a>
                </span>
            </div>
            <div class="debuggerContent">
                <div class="col-md-6 event-state">
                    <h4>Event State</h4>
                    <div class="panel-body panel-state-body">
                        <div class="nano">
                            <div class="nano-content" id="event-state">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 query-state">
                    <h4>Query State</h4>
                    <div class="panel-body panel-state-body">
                        <div class="nano">
                            <div class="nano-content" id="query-state">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start: Template for a tab -->
<div style="display: none" id="tab-template">
    <!-- Start: Tab -->
    <div>
        <!-- Start: Debug Container -->
        <div class="debug-container" style="display: none">
        </div>
        <!-- End: Debug Container -->
        <!-- Start: Canvas Container -->
        <div class="canvas-container">
        </div>
        <!-- End: Canvas Container -->
        <!-- Start: loading-screen -->
        <div class="loading-screen" style="display: none">
            <i class="fw fw-wso2-logo fw-pulse fw-2x"></i>
        </div>
        <!-- End: loading-screen -->
        <!-- Start: Source Container -->
        <div id="siddhi-editor" class="source-container">
        </div>
        <!-- End Source Container -->
        <!-- Start: design view container -->
        <div class="design-view-container" style="display: none">
            <!-- Start: tool-palette -->
            <div id="tool-palette-container" class="tool-palette-container"></div>
            <!-- End: tool-palette -->
            <!-- Start: design-view-grid-container -->
            <div id="grid-container" class="grid-container"></div>
            <!-- Start: pop-over-design-view -->
            <div class="hide pop-over">
                <div class="popover-body">
                    <div class="popover-alert-icon"><i class="fw fw-alert"></i></div>
                    <div class="popover-body-message"><span>Are you sure you want to delete this element?<br>This
                        cannot be undone.</span>
                    </div>
                </div>
                <div class="popover-footer">
                    <button type="button" class="btn btn-xs btn_yes" tabindex="-1">Yes</button>
                    <button type="button"class="btn btn-xs btn_no" tabindex="-1">No</button>
                </div>
            </div>
            <!-- End: pop-over-design-view -->
            <div class = "overlayed-container"></div>
            <!-- End: design-view-grid-container -->
        </div>
        <!-- End: design view container -->
        <!-- Start: Toggle Controls Container -->
        <div class="toggle-controls-container">
            <div class="btn toggle-view-button">
                <i class="fw fw-design-view fw-rotate-90"></i>
                <span class="toggle-button-text" id="design_view_btn">Design View</span>
            </div>
        </div>
        <!-- End: Toggle Controls Container  -->
    </div>
    <!-- End: Tab -->
</div>
<!-- End: Template for service tab -->
<div class="hidden">
    <div class="siddhi-app-list">
        <div class="siddhi_app_mode_config clearfix">
            <div class="clearfix">
                <div class="col-md-6">
                    <h5>Siddhi Apps</h5>
                </div>
                <div class="col-md-6">
                    <h5>Run/Debug Mode</h5>
                </div>
            </div>
            <div class="clearfix">
                <label class="siddhi_app_name col-md-6">SmartHomePlan</label>
                <div class="switch-toggle switch-ios col-md-6">
                    <input id="week11" name="view10" checked="" type="radio">
                    <label for="week11" onclick="">Run</label>
                    <input id="month13" name="view10" type="radio">
                    <label for="month13" onclick="">Debug</label>
                    <a></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start: Modal for file-browser -->
<div class="modal fade" id="fileBrowserModel" tabindex="1000" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="onFileBrowserClose();" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Select root folder</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid  .file-browser-container">
                    <div id="fileTree"></div>
                    <div id="file-browser-error" class="alert alert-danger" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="cancelBtn">Cancel</button>
                <button type="button" class="btn btn-primary" id="selectBtn">Select</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file-browser -->

<!-- Start: Warning validation for number of endpoints on canvas-->
<div id="endpointModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color:lightgoldenrodyellow">Warning!</h4>
            </div>
            <div class="modal-body">
                <p>Only one endpoint per resource is supported in this version.</p>
            </div>
        </div>
    </div>
</div>
<!-- End: Warning validation for number of endpoints on canvas-->

<!-- Start: Modal for file dialog for saving the configuration-->
<div class="modal fade" id="newConfigModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="newConfigModalLabel">Streaming Integrator Configuration Wizard</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="location" class="control-label col-sm-2">Location</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="location"
                                       placeholder="eg: /home/user/wso2-integration-server/siddhi-configs">
                            </div>
                            <div class="col-sm-2" style="float: right">
                                <button type="button" class="btn btn-primary" id="openFileBrowserBtn">Select Folder
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="configName" class="control-label col-sm-2">File Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="configName" placeholder="eg: hotel-check-in.xyz">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-primary" id="createBtn">create
                                </button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal">cancel</button>
                            </div>
                        </div>
                    </form>
                    <div id="newWizardError" class="alert alert-danger">
                        <strong>Error!</strong> Something went wrong.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file dialog for saving the configuration-->

<!-- Start: Set Service Parameters Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="servicePropertiesModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Set Service Parameters</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" style="margin-top: 25px">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="basePath">Base Path</label>
                        <div class="col-md-8">
                            <input id="basePath" name="basePath" type="text" placeholder="/basepath"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="produces">Produces</label>
                        <div class="col-md-8">
                            <input id="produces" name="produces" type="text" placeholder="MediaType.APPLICATION_JSON"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="packageName">Package Name</label>
                        <div class="col-md-8">
                            <input id="packageName" name="packageName" type="text" placeholder="com.sample"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-8">
                            <input id="description" name="description" type="text" placeholder="Your Description Here"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tags">Tags</label>
                        <div class="col-md-8">
                            <input id="tags" name="tags" type="text" placeholder="tag1,tag2"
                                   class="form-control input-md">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveServiceProperties()">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Set Service Parameters Modal -->

<!--Start: simulation index-->
<div class="hidden">
    <div id="simulation-index">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#single-event-configs" aria-controls="single-event-configs" role="tab" data-toggle="tab">
                    Single Simulation
                </a>
            </li>
            <li role="presentation">
                <a href="#event-feed-configs" aria-controls="event-feed-configs" role="tab" data-toggle="tab">
                    Feed Simulation
                </a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="ws-tab-pane fade in active" id="single-event-configs">
                <div class="content">
                    <ul id="single-event-config-tab" class="nav nav-tabs configs" role="tablist">
                        <li id="add-single-event-form" role="presentation">
                            <a>+</a>
                        </li>
                    </ul>
                    <div class="nano">
                        <div id="single-event-config-tab-content" class="tab-content nano-content">
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel"  class="ws-tab-pane fade in active" id="event-feed-configs">
                <div class="content">
                    <button type="button" class="btn btn-primary btn-stack btn-block sidebar" rel="createPage"
                            name="create-new-config">
                        <span class="icon fw-stack fw-lg">
                          <i class="fw fw-circle-outline fw-stack-2x"></i>
                          <i class="fw fw-add fw-stack-1x"></i>
                        </span> Create
                    </button>
                    <div class="notifications" id="createFeedSimulationNotification"
                         style="display: none;">No Saved Siddhi Apps Available!
                    </div>
                    <div class="nano">
                        <div class="simulation-list nano-content">
                            <div id="active-simulation-list" class="nano-content" style="display: none;">
                                <h5>Active Feed Simulations</h5>
                            </div>
                            <div id="inactive-simulation-list" class="nano-content inactive-simulation-list"
                                 style="display: none;">
                                <h5>Inactive Feed Simulations</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End: simulation index-->

<!--Start: single event form-->
<div class="hidden">
    <div id="single-event-form">
        <form role="form" class="single-event-form" data-form-type="single" data-toggle="loading"
              data-loading-style="overlay" data-loading-text="Sending event">
            <div class="form-group">
                <label>
                    Siddhi App Name
                </label>
                <select name="single-event-siddhi-app-name" class="form-control" id="siddhi-app-name">
                </select>
            </div>
            <div class="form-group">
                <label>
                    Stream Name
                </label>
                <select name="stream-name" class="form-control" id="stream-name">
                </select>
            </div>
            <div class="form-group">
                <label>
                    Timestamp(ms)<span class="optional"> - optional</span></label>
                <input type="text" class="form-control" name="sim-timestamp" placeholder="Current System Time">
            </div>
            <div class="form-group" data-name="attributes" id="attribute-table">
            </div>
            <div class="alert alert-warning hidden" role="alert">
                <div data-name="siddhi-app-name-mode">
                </div>
                <div class="form-group clearfix" data-name="run-debug-buttons">
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary" name="send" id="start-and-send">
                    Send
                </button>
            </div>
        </form>
    </div>
</div>
<!--End: single event form-->

<!-- .left-sidebar-sub -->
<div id="sidebar-nav-sub-backdrop" class="modal-backdrop fade in hidden"></div>
<div class="sidebar-wrapper sidebar-nav sidebar-nav-sub" id="left-sidebar-sub" data-side="left" data-width="450"
     data-offset-left="380">
    <div class="nano">
        <div class="nano-content">
            <button class="close close-handle" data-handle="close" rel="createPage"><i class="fw fw-cancel"></i>
            </button>
            <div class="add-padding-3x">
                <!--Start: event feed form-->
                <div id="event-feed-form">
                    <form role="form" class="feedSimulationConfig" data-form-type="feed" data-toggle="loading"
                          data-loading-style="overlay" data-loading-text="Sending event">
                        <div class="form-group">
                            <label>
                                Simulation Name
                            </label>
                            <input type="text" class="form-control" name="simulation-name">
                        </div>
                        <div class="form-group">
                            <label>
                                Description
                            </label>
                            <textarea class="form-control" rows="2" name="feed-description"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        Time Interval(ms)
                                    </label>
                                    <input type="text" class="form-control" id="timeInterval" name="time-interval">
                                </div>
                            </div>
                        </div>

                        <div class="clearfix">
                            <a href="#" class="advanceConfigs pull-right"
                               id="feedAdvanceConfigToggle">Advanced Configurations</a>
                        </div>
                        <div class="feedAdvanceContent" id="feedAdvanceContent" style="display: none;">
                            <div class="form-group">
                                <label>
                                    Event's Timestamp
                                </label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" name="start-timestamp">
                                        <span class="dark text-muted">Starting</span>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" name="end-timestamp">
                                        <span class="dark text-muted">Ending</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>
                                            No. of Events
                                        </label>
                                        <input type="text" class="form-control col-md-6" id="noOfEvents"
                                               name="no-of-events">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="source-accordion" class="panel-group sourceConfigs" role="tablist"
                             aria-multiselectable="true">
                        </div>

                        <hr>

                        <div class="form-inline">
                            <div class="form-group">
                                <label>
                                    Simulation Source
                                </label>
                                <select class="form-control sources" name="sources">
                                    <option value="Random">Random</option>
                                    <option value="CSV file">CSV file</option>
                                    <option value="Database">Database</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-link addNewSource">Add Simulation Source</button>
                            </div>
                        </div>
                        <div id="addNewSourceError" class="hidden">Please Add a Simulation Source</div>

                        <hr>
                        <div class="form-group feed-btn-panel" id="buttons">
                            <button type="submit" class="btn btn-primary" name="save">Save</button>
                            <button type="button" class="btn btn-default" name="cancel" data-handle="close"
                                    rel="createPage">Cancel
                            </button>
                        </div>
                    </form>
                </div>
                <!--End: event feed form-->
            </div>
        </div>
    </div>
</div>

<div class="notification-container" id="notification-container"></div>

<div class="sourceConfigForm" id="csvSourceConfig_dynamicId" data-type="csv" data-uuid="{{dynamicId}}"
     style="display:none;">
    <div class="form-group">
        <label>
            Siddhi App Name<span class="required_astrix"> *</span>
        </label>
        <select id="siddhi-app-name_{{dynamicId}}" name="siddhi-app-name" class="form-control">
        </select>
        <div data-name="siddhi-app-name-mode">
        </div>
    </div>

    <div class="dynamicToggleFormContent" style="display: none;">
        <div class="form-group">
            <label>
                Stream Name<span class="required_astrix"> *</span>
            </label>
            <select name="stream-name" class="form-control">
            </select>
        </div>

        <div class="form-group">
            <label>
                CSV file<span class="required_astrix"> *</span>
            </label>
            <select id="file-name_{{dynamicId}}" name="file-name" class="form-control"></select>
            <button type="button" class="btn btn-secondary" id="upload-csv-file_{{dynamicId}}" name="upload-csv-file">
                Upload
            </button>
        </div>

        <div class="form-group">
            <label>Delimiter<span class="required_astrix"> *</span>
                <input type="text" value="," class="form-control" name="delimiter">
            </label>
        </div>

        <div class="clearfix">
            <a href="#" class="advanceConfigs pull-right" id="csvAdvanceConfigToggle_{{dynamicId}}">Advance
                Configuration</a>
        </div>
        <div class="feedAdvanceContent clearfix" id="csvAdvanceContent_{{dynamicId}}" style="display: none;">
            <div class="form-inline clearfix">
                <div class="form-group col-md-6">
                    <label class="custom-radio two-line-radio">
                        <input type="radio" name="timestamp-option" value="attribute">
                        <span class="helper">CSV event record timestamp index</span>
                        <!--<select name="timestamp-attribute" class="form-control" disabled></select>-->
                    </label>
                    <input type="text" class="form-control" name="timestamp-attribute" style="width: 100%" disabled>
                </div>
                <div class="form-group col-md-6">
                    <label class="custom-radio two-line-radio">
                        <input type="radio" name="timestamp-option" value="interval" checked>
                        <span class="helper">Increment event time by(ms)</span>
                    </label>
                    <input class="form-control" name="timestamp-interval" value="1000" style="width: 100%">
                </div>
            </div>

            <div class="form-group col-md-12 add-margin-top-3x">
                <label>CSV file is ordered by timestamp</label>
                <div class="form-group">
                    <label class="custom-radio">
                        <input type="radio" name="ordered" value="ordered" checked disabled>
                        <span class="helper">Yes</span>
                    </label>
                    <label class="custom-radio">
                        <input type="radio" name="ordered" value="not-ordered" disabled>
                        <span class="helper">No</span>
                    </label>
                </div>
            </div>
            <div class="form-group attributes-section">
            </div>
        </div>
    </div>
</div>

<div class="sourceConfigForm" id="dbSourceConfig_dynamicId" data-type="db" data-uuid="{{dynamicId}}"
     style="display:none">

    <div class="form-group">
        <label>
            Siddhi App Name<span class="required_astrix"> *</span>
        </label>
        <select id="siddhi-app-name_{{dynamicId}}" name="siddhi-app-name" class="form-control">
        </select>
        <div data-name="siddhi-app-name-mode">
        </div>
    </div>

    <div class="form-group">
        <label>
            Stream Name<span class="required_astrix"> *</span>

        </label>
        <select name="stream-name" class="form-control">
        </select>
    </div>
    <!--todo remove the values of dataSourceLocation, driver, username, password-->
    <div class="form-group">
        <label>
            Data Source<span class="required_astrix"> *</span>
        </label>
        <input type="text" class="form-control required-for-db-connection" id="dataSourceLocation_{{dynamicId}}"
               name="data-source-location"
               value="jdbc:mysql://localhost:3306/simulator?autoReconnect=true&useSSL=false">
    </div>

    <div class="form-group">
        <label>
            Driver Class<span class="required_astrix"> *</span>
        </label>
        <input type="text" class="form-control required-for-db-connection"
               name="driver-class" value="com.mysql.jdbc.Driver">
    </div>

    <div class="form-group">
        <label>
            Username<span class="required_astrix"> *</span>
        </label>
        <input type="text" class="form-control required-for-db-connection"
               name="username" value="root">
    </div>

    <div class="form-group">
        <label>
            Password<span class="required_astrix"> *</span>
        </label>
        <input type="password" class="form-control required-for-db-connection"
               name="password" value="root">
    </div>

    <div class="form-group">
        <button type="button" class="btn btn-secondary" name="loadDbConnection">
            Connect to database
        </button>
        <span class="helper connectionSuccessMsg"></span>
    </div>

    <div class="form-group">
        <label>
            Table name<span class="required_astrix"> *</span>
        </label>
        <select name="table-name" class="form-control">
        </select>
    </div>


    <div class="form-inline inline-radio-group">
        <div class="form-group">
            <label class="custom-radio">
                <input type="radio" name="timestamp-option" value="attribute">
                <span class="helper">Timestamp Attribute</span>
                <select name="timestamp-attribute" class="form-control feed-attribute-db" disabled></select>
                <!--<input type="text" class="form-control" name="timestamp-attribute" disabled>-->
            </label>
        </div>
        <div class="form-group">
            <label class="custom-radio">
                <input type="radio" name="timestamp-option" value="interval" checked>
                <span class="helper">Timestamp Interval</span>
                <input class="form-control" name="timestamp-interval" value="1000">
            </label>
        </div>
    </div>


    <div class="attributes-section">
    </div>
</div>

<div class="hidden">
    <div class="sourceConfigForm" id="randomSourceConfig_dynamicId" data-type="random" data-uuid="{{dynamicId}}">
        <div class="form-group">
            <label>
                Siddhi App Name<span class="required_astrix"> *</span>
            </label>
            <select id="siddhi-app-name_{{dynamicId}}" name="siddhi-app-name" class="form-control">
            </select>
            <div id="siddhi-app-name-mode">
            </div>
        </div>

        <div class="dynamicToggleFormContent" style="display: none;">
            <div class="form-group">
                <label>
                    Stream Name<span class="required_astrix"> *</span>
                </label>
                <select name="stream-name" class="form-control">
                </select>
            </div>
            <div class="clearfix">
                <a href="#" class="advanceConfigs pull-right"
                   id="randomAdvanceConfigToggle_{{dynamicId}}">Advanced Configurations</a>
            </div>
            <div class="feedAdvanceContent" id="randomAdvanceContent_dynamicId" style="display: none;">
                <div class="form-group">
                    <label>
                        Increment Event’s Timestamp by(ms)
                    </label>
                    <input type="text" class="form-control" name="timestamp-interval"
                           value="1000">
                </div>
            </div>
        </div>


        <div class="form-group attributes-section">
        </div>
    </div>
</div>

<div class="hidden">
    <div role="form" id="singleEventForm_{{dynamicId}}" class="singleEventForm">

        <div class="form-group">
            <label for="single_executionPlanName_{{dynamicId}}">
                Siddhi App Name
                <span class="required_astrix"> *</span></label>
            <select id="single_executionPlanName_{{dynamicId}}" name="single_executionPlanName_{{dynamicId}}"
                    class="form-control">
            </select>
        </div>

        <div class="form-group">
            <label for="single_streamName_{{dynamicId}}">
                Stream Name
                <span class="required_astrix"> *</span>
            </label>
            <select id="single_streamName_{{dynamicId}}" name="single_streamName_{{dynamicId}}" class="form-control">
            </select>
        </div>

        <div class="form-group">
            <label for="single_timestamp_{{dynamicId}}">
                Timestamp
                <span class="optional"> - optional</span>
            </label>
            <input type="text" class="form-control" id="single_timestamp_{{dynamicId}}"
                   name="single_timestamp_{{dynamicId}}">
        </div>

        <div class="form-group" id="single_attributes_{{dynamicId}}">
        </div>

        <div class="form-group clearfix" id="single_runDebugButtons_{{dynamicId}}">
        </div>


        <div class="form-group">
            <button type="submit" class="btn btn-default" id="send_singleEvent_{{dynamicId}}" name="send">
                Send
            </button>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="csv_upload_modal" class="modal fade csv-upload" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form enctype="multipart/form-data" id="csv_upload_modal_form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Upload CSV</h4>
                </div>
                <div class="modal-body">

                    <input type="file">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary upload-csv">Upload</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="clear_confirmation_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
                <p>The entered values will be discarded. Are you sure?&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" name="confirm">Confirm</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" name="cancel">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="clear_confirmation_modal_for_create" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
                <p>The entered values will be discarded. Are you sure?&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" name="confirm">Confirm</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" name="cancel">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal -->
<div id="run_debug_app_modal" class="modal fade csv-upload" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Run or Debug</h4>
            </div>
            <div class="modal-body">
                <p>Please select the mode to deploy the Siddhi Apps to simulate.&hellip;</p>
                <div class="siddhi-app-list"></div>
            </div>
            <div class="modal-footer" style="clear:both;">
                <button type="button" class="btn btn-primary" data-dismiss="modal" name="confirm">Start Simulation
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal" name="cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script id = "attribute-form-template" type = "text/x-handlebars-template">
    <div class="attributes-container">
        <label>Attributes</label>
        <ul>
            <div id = "attribute-div">
                {{#each this}}
                <li class = "attribute clearfix">
                    <div class = "clearfix">
                        <div class = "attr-content">
                            <input type = "text" value = "{{name}}" class = "attr-name"/>
                            <select class = "attr-type">
                                <option value = "string"> string </option>
                                <option value = "int"> int </option>
                                <option value = "long"> long </option>
                                <option value = "float"> float </option>
                                <option value = "double"> double </option>
                                <option value = "bool"> bool </option>
                                <option value = "object"> object </option>
                            </select>
                        </div>
                        <div class = "attr-nav"></div>
                    </div>
                    <label class = "error-message"></label>
                </li>
                {{/each}}
            </div>
        </ul>
        <button id="btn-add-attribute" class="btn btn-default"> + Attribute </button>
    </div>
</script>

<script id = "annotation-form-template" type = "text/x-handlebars-template">
    <label>Annotations</label>
    <div id = "annotation-div">
        {{#if this}}
        <ul>
            {{#each this}}
                {{> recursiveAnnotation this}}
            {{/each}}
        </ul>
        {{/if}}
    </div>
    <button id = "btn-add-annotation" class = "btn btn-default"> + Annotation </button>
    <button id = "btn-add-key-val" class = "btn btn-default" style = "display: none"> + Property </button>
    <button id = "btn-del-annotation" class = "btn btn-default" style = "display: none"> Delete </button>
</script>

<script id = "recursiveAnnotationPartial" type = "text/template">
    {{#if predefined}}
        <li data-jstree = '{"icon":"/editor/commons/images/annotation.png"}' class = "{{class}}"> {{name}}
            <ul>
                {{#each elements}}
                <li data-jstree = '{"icon":"/editor/commons/images/properties.png"}' class="{{class}}"> {{name}}
                    <ul>
                        <li data-jstree = '{"icon":"/editor/commons/images/value.png"}'
                            class = "annotation-value"> {{defaultValue}} </li>
                    </ul>
                </li>
                {{/each}}
    {{else}}
        <li data-jstree = '{"icon":"/editor/commons/images/annotation.png"}' class = "annotation"> {{name}}
            <ul>
                {{#each elements}}
                <li data-jstree = '{"icon":"/editor/commons/images/properties.png"}' class = "annotation-key"> {{key}}
                    <ul>
                        <li data-jstree = '{"icon":"/editor/commons/images/value.png"}'
                            class = "annotation-value"> {{value}} </li>
                    </ul>
                </li>
                {{/each}}
    {{/if}}

        {{#if annotations}}
            {{#each annotations}}
                {{> recursiveAnnotation this}}
            {{/each}}
        {{/if}}
            </ul>
        </li>
</script>

<script id="predefined-annotation-form-template" type="text/template">
    <div class = "define-predefined-annotations">
        {{#if this}}
        <div>
            {{#each this}}
            <div class="main-annotation predefined-annotation">
                {{> recursive-predefined-annotation this}}
            </div>
            {{/each}}
        </div>
        {{/if}}
    </div>
</script>

<script id="recursive-predefined-annotation-partial" type="text/template">
    <div id="{{name}}-annotation">
        {{#if optional}}
            {{#if isChecked}}
                <label class = "annotation-name optional-annotation">
                    <input type = "checkbox" class = "annotation-checkbox" checked> @{{name}}
                </label>
            {{else}}
                <label class = "annotation-name optional-annotation">
                    <input type = "checkbox" class = "annotation-checkbox"> @{{name}}
                </label>
            {{/if}}
        {{else}}
            <label class = "mandatory-annotation-symbol"> * </label>
            <label class = "annotation-name mandatory-annotation">
                @{{name}}
            </label>
        {{/if}}
        {{#if isChecked}}
            <div class="annotation-content">
        {{else}}
            <div class="annotation-content" style="display: none">
        {{/if}}
            <div id = "{{name}}-options-div" class="annotation-options"> </div>
            {{#if annotations}}
                {{#each annotations}}
                    <div class="sub-annotation predefined-annotation">
                        {{> recursive-predefined-annotation this}}
                    </div>
                {{/each}}
            {{/if}}
        </div>
    </div>
</script>

<script id="type-selection-form-template" type="text/template">
    {{#ifSourceOrSinkOrStoreOrWindow id}}
        <label class="clearfix"> <span class="mandatory-symbol"> * </span> {{addTitle id}} Type </label>
    {{else}}
        <label class="clearfix"> {{addTitle id}} Type </label>
    {{/ifSourceOrSinkOrStoreOrWindow}}

    {{#ifSourceOrSink id}}
        <select id="{{id}}-type">
            <option style = "display:none" disabled selected value > -- select a type -- </option>
    {{else}}
          <select id="{{id}}-type">
    {{/ifSourceOrSink}}

            {{#each types}}
                <option value="{{name}}">{{name}}</option>
            {{/each}}
    </select>
</script>

<script id = "source-sink-store-options-template" type = "text/template">
    {{#if options}}
        <h4> Options </h4>
        <div id = "{{id}}-options">
            {{#ifSourceOrSinkOrStore id}}
                <div class = "sub-{{id}}-options-div">
            {{/ifSourceOrSinkOrStore}}
            {{#each options}}
                <div class = "option">
                {{#if optional}}
                    {{#if value}}
                        <div class = "clearfix">
                            <label class = "option-name optional-option">
                                <input type = "checkbox" class = "option-checkbox" checked> {{name}}
                            </label>
                            <i class = "fw fw-info">
                                <span style = "display:none"> {{description}} </span>
                            </i>
                        </div>
                        <div class = "clearfix">
                            <input class = "option-value" type = "text" value = "{{value}}">
                        </div>
                    {{else}}
                        <div class="clearfix">
                            <label class = "option-name optional-option">
                                <input type = "checkbox" class = "option-checkbox"> {{name}}
                            </label>
                            <i class = "fw fw-info">
                                <span style = "display:none"> {{description}} </span>
                            </i>
                        </div>
                        <div class="clearfix">
                            <input class = "option-value" type = "text" value="{{defaultValue}}" style ="display:none">
                        </div>
                    {{/if}}
                        <label class = "error-message"></label>
                {{else}}
                    <div class="clearfix">
                        <span class = "mandatory-symbol"> * </span>
                        <label class = "option-name mandatory-option">
                            {{name}}
                        </label>
                        <i class="fw fw-info">
                            <span style="display:none"> {{description}} </span>
                        </i>
                    </div>
                    <div class = "clearfix">
                        <input class = "option-value" type = "text" value = "{{value}}">
                    </div>
                    <label class = "error-message"></label>
                {{/if}}
                </div>
            {{#ifSourceOrSinkOrStore ../id}}
                {{#if (isDivisor (sum @index 1) ../options)}}
                    </div>
                    <div class = "sub-{{../id}}-options-div">
                {{/if}}
            {{/ifSourceOrSinkOrStore}}
            {{/each}}
            {{#ifSourceOrSinkOrStore id}}
                </div>
            {{/ifSourceOrSinkOrStore}}
    {{/if}}
    </div>
    <div class = "customized-options" id = "customized-{{id}}-options">
        <h4> Customized Options </h4>
        <ul class = "cust-options">
            {{#each customizedOptions}}
                <li class="option">
                    <div class = "clearfix">
                        <label> option.key </label>
                        <input type="text" class="cust-option-key" value="{{name}}">
                    </div>
                    <label class = "error-message"> </label>
                    <div class = "clearfix">
                        <label> option.value </label>
                        <input type = "text" class = "cust-option-value" value = "{{value}}">
                        <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                    </div>
                    <label class = "error-message"></label>
                </li>
            {{/each}}
        </ul>
        <button type = "button" class = "btn btn-default btn-add-options" id = "btn-add-{{id}}-options"> </button>
    </div>
</script>

<script id = "source-sink-map-attribute-template" type = "text/template">
    <div id = "mapper-attributes">
        {{#ifId id "sink"}}
            <div class="clearfix" id="stream-attributes"></div>
        {{/ifId}}
        <div class = "attribute-labels clearfix">
                {{#if attributes.0.key }} <label class = "attribute-mapping-label"> Key </label> {{/if}}
                <label class = "attribute-mapping-label"> Value </label>
        </div>
        <div id="attributes">
        {{#each attributes}}
            <div class = "attribute">
                    <div class = "clearfix">
                        {{#if key}}
                            {{#ifId ../id "sink"}}
                                <input type = "text" value = "{{key}}" class = "attr-key"/>
                            {{else}}
                                <input type = "text" value = "{{key}}" class = "attr-key" readonly/>
                            {{/ifId}}
                            <input type = "text" value = "{{value}}" class = "attr-value"/>
                        {{else}}
                            <textarea class = "attr-value"> {{value}} </textarea>
                        {{/if}}
                    </div>
                    <label class = "error-message"></label>
            </div>
        {{/each}}
        </div>
        <button type="button" class="btn btn-default" id="btn-add-payload-map" style="display:none"> + Key Value</button>
    </div>
</script>

<script id = "primary-index-annotation-template" type = "text/template">
    <h4> Annotations </h4>
    <div id = "primary-index-annotations">
            {{#each this}}
                <div class = "clearfix annotation">
                    <div class="clearfix">
                        <label class = "annotation-name">
                            {{#if isChecked}}
                                <input type = "checkbox" class="annotation-checkbox" checked> @{{name}}
                            {{else}}
                                <input type = "checkbox" class="annotation-checkbox"> @{{name}}
                            {{/if}}
                        </label>
                    </div>
                    {{#if isChecked}}
                        <div class="annotation-content">
                     {{else}}
                            <div class="annotation-content" style="display:none">
                    {{/if}}
                        <ul>
                        {{#each values}}
                            <li class = "clearfix primary-index-annotation-value">
                                <div class="clearfix">
                                    <input type = "text" value = "{{value}}" class = "annotation-value"/>
                                    <a class = "btn-del-annot-value"> <i class = "fw fw-delete"> </i></a>
                                </div>
                                <label class="error-message"></label>
                            </li>
                        {{/each}}
                        </ul>
                        <button type = "button" class = "btn btn-default btn-add-annot-value"> + Value </button>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</script>

<script id="window-function-unknown-parameters-template" type = "text/template">
    {{#if predefinedParameters}}
    <div class="display-predefined-parameters">
        <div class="clearfix collapse-div" data-toggle="collapse" href="#predefined-param-content"
             aria-controls="join-{{type}}-content" aria-expanded="false">
            <label class="parameter-label"> Supported Parameters </label>
            <a class="collapse-icon"> </a>
        </div>
        <div class = "collapse" id ="predefined-param-content">
            {{#each predefinedParameters}}
            <div class="predefined-param">
                {{#if optional}}
                <label class = "predefined-param-name clearfix"> {{name}}
                    <span class="optional-label"> (optional) </span>
                </label>
                {{else}}
                <label class = "clearfix predefined-param-name"> {{name}}
                    <span class = "optional-label"> (mandatory)</span>
                </label>
                {{/if}}
                <label class="clearfix predefined-param-desc"> {{description}} </label>
            </div>
            {{/each}}
        </div>
    </div>
    {{/if}}

    {{#if parameters}}
    <h4> Parameters </h4>
    <div id = "{{id}}-unknown-parameters">
        <div class = "sub-{{id}}-parameter-div">
            {{#each parameters}}
            <div class = "parameter" id="{{name}}">
                {{#if optional}}
                <div class = "clearfix">
                    <label class = "parameter-name optional-parameter"> {{name}} </label>
                </div>
                {{else}}
                <div class="clearfix">
                    <span class = "mandatory-symbol"> * </span>
                    <label class = "parameter-name mandatory-parameter"> {{name}} </label>
                </div>
                {{/if}}
                {{#if isMultiValue}}
                <div class = "clearfix param-content attribute-param">
                    {{#each value}}
                    <div class="attribute-param-value">
                        <input class = "parameter-value" type = "text" value = "{{this}}">
                        <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                    </div>
                    {{/each}}
                </div>
                {{else}}
                <div class = "clearfix param-content">
                    <input class = "parameter-value" type = "text" value = "{{value}}">
                </div>
                {{/if}}
                <label class = "error-message"></label>
            </div>
            {{#if (isDivisor (sum @index 1) ../parameters)}}
        </div>
        <div class = "sub-{{../id}}-parameter-div">
            {{/if}}
            {{/each}}
        </div>
    </div>
    {{/if}}
</script>

<script id="window-function-parameters-template" type = "text/template">
    {{#if parameters}}
    <h4> Parameters </h4>
    <div id = "{{id}}-parameters">
        <div class = "sub-{{id}}-parameter-div">
            {{#each parameters}}
            <div class = "parameter" id="{{name}}-parameter">
                {{#if optional}}
                <div class = "clearfix">
                    <label class = "parameter-name optional-parameter">{{name}} </label>
                    <i class = "fw fw-info">
                        <span style = "display:none"> {{description}} </span>
                    </i>
                </div>
                {{else}}
                <div class="clearfix">
                    <span class = "mandatory-symbol"> * </span>
                    <label class = "parameter-name mandatory-parameter">
                        {{name}}
                    </label>
                    <i class="fw fw-info">
                        <span style="display:none"> {{description}} </span>
                    </i>
                </div>
                {{/if}}
                {{#if isMultiValue}}
                <div class = "param-content attribute-param clearfix">
                    {{#each value}}
                    <div class="attribute-param-value">
                        <input class = "parameter-value" type = "text" value = "{{this}}">
                        <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                    </div>
                    {{/each}}
                </div>
                {{else}}
                <div class = "param-content clearfix">
                    <input class = "parameter-value" type = "text" value = "{{value}}">
                </div>
                {{/if}}
                <label class = "error-message"></label>
            </div>
            {{#if (isDivisor (sum @index 1) ../parameters)}}
        </div>
        <div class = "sub-{{../id}}-parameter-div">
            {{/if}}
            {{/each}}
        </div>
    </div>
    {{/if}}
</script>

<script id="partition-by-template" type = "text/template">
    <label> Partition By </label>
    <div class="clearfix">
        <label class = "partition-by-label"> Expression </label>
        <label class = "partition-by-label"> Stream Name </label>
    </div>
    <div id = "partition-by-content">
        {{#each this}}
        <div class="partition-key">
            <div class="clearfix">
                <div class="partition-expression"> {{> renderDropDown streamAttributes}} </div>
                <div class="partition-stream-name">
                    <input type = "text" class="partition-by-stream-name" value="{{streamName}}" readonly>
                </div>
            </div>
            <label class="error-message"></label>
        </div>
        {{/each}}
    </div>
</script>

<script id="aggregate-projection-template" type = "text/template">
    <label class="clearfix"> <span class="mandatory-symbol"> * </span> Select </label>
    <select class="attribute-selection-type clearfix">
        <option style = "display:none" disabled selected value> -- select a value --</option>
        <option value="all"> All Attributes </option>
        <option value="user_defined"> User Defined Attributes </option>
    </select>
    <label class="error-message"> Value is required </label>
    <div class="define-user-defined-attributes">
        <ul class="user-defined-attributes">
            {{#each this}}
                <li class="attribute">
                    <div class="clearfix">
                        <div class="clearfix">
                            <input type="text" class = "attribute-expression name" value="{{this}}">
                            <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                        </div>
                        <label class = "error-message"></label>
                    </div>
                </li>
            {{/each}}
        </ul>
        <button class="btn btn-default btn-add-user-defined-attribute"> + Attribute </button>
    </div>
</script>

<script id="query-projection-template" type = "text/template">
    <label class="clearfix"> <span class="mandatory-symbol"> * </span> Select </label>
    <select class="attribute-selection-type clearfix">
        <option style = "display:none" disabled selected value> ---- select a value ----</option>
        <option value="all"> All Attributes </option>
        <option value="user_defined"> User Defined Attributes </option>
    </select>
    <label class="error-message"> Value is required </label>
    <div class="define-user-defined-attributes">
        <div class="clearfix">
            <label class="projection-expression-label"> Expression </label>
            <label class="projection-as-label"> As </label>
        </div>
        <ul class="user-defined-attributes">
            {{#each this}}
            <li class="attribute">
                <div class="clearfix">
                    <div class="clearfix">
                        <input type="text" class = "attribute-expression" value="{{expression}}">
                        <input type = "text" class = "attribute-as" value="{{as}}" readonly>
                    </div>
                    <label class = "error-message"></label>
                </div>
            </li>
            {{/each}}
        </ul>
    </div>
</script>

<script id = "drop-down-template" type="text/template">
    <select class="{{id}}-selection">
        <option style = "display:none" disabled selected value> -- select a value --</option>
        {{#each options}}
            <option value="{{this}}"> {{this}} </option>
        {{/each}}
    </select>
</script>

<script id="group-by-template" type = "text/template">
    <label> <input type = "checkbox" class="group-by-checkbox"> Group By Attributes </label>
    <div class="group-by-content order-group-by-content">
        <ul class="group-by-attributes">
            {{#each groupBy}}
            <li>
                <div class="clearfix">
                    <div class="group-by-attribute-content">
                        <div class="define-attribute-drop-down">
                            {{> renderDropDown ../possibleGroupByAttributes}}
                        </div>
                        <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                    </div>
                </div>
                <label class="error-message"> </label>
            </li>
            {{/each}}
        </ul>
        <button class="btn btn-default btn-add-group-by-attribute"> + Attribute </button>
    </div>
</script>

<script id="order-by-template" type="text/template">
    <label> <input type = "checkbox" class="order-by-checkbox"> Order By Attributes </label>
    <div class="order-by-content order-group-by-content">
        <ul class="order-by-attributes">
            {{#each orderBy}}
                <li>
                    <div class="clearfix">
                        <div class="order-by-attribute-content">
                            <div class="define-attribute-drop-down">
                                {{> renderDropDown ../possibleOrderByAttributes}}
                            </div>
                            <div class="define-order-del">
                                <select class="order-selection">
                                    <option value="asc"> asc </option>
                                    <option value="desc"> desc </option>
                                </select>
                                <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                            </div>
                        </div>
                    </div>
                    <label class="error-message"> </label>
                </li>
            {{/each}}
        </ul>
        <button class="btn btn-default btn-add-order-by-attribute"> + Attribute </button>
    </div>
</script>

<script id="aggregation-by-interval-template" type = "text/template">
    <div class="interval-content">
        <div class="clearfix">
        {{#each this}}
            <label class="interval-option">
                <input type="checkbox" class="{{this}}-checkbox interval-checkbox"> {{this}}
            </label>
            {{#if (isDivisor (sum @index 1) ../this)}}
                </div>
                <div class = "interval-content">
            {{/if}}
        {{/each}}
        </div>
        <label class="error-message"> </label>
    </div>
</script>

<script id="aggregation-form-template" type = "text/template">
    <div class = "aggregation-form-container">
        <h3> Aggregation Meta Information </h3>
            <div id="aggregation-name-div" class="aggregation-info">
                <label> <span class="mandatory-symbol"> * </span> Name </label>
                <input type="text" id="aggregationName" class="clearfix name" value="{{name}}">
                <label class="error-message" id="aggregationNameErrorMessage"> </label>
            </div>
            <div id="aggregation-from-div" class="aggregation-info">
                <label> From </label>
                <input type = "text" id="aggregation-from" class="clearfix name" value="{{from}}" readonly>
            </div>
            <div id="define-aggregate-annotations">
                <h4> Annotations </h4>
                <div class="define-store-annotation">
                    <label><input type = "checkbox" class="store-annotation-checkbox"> @store </label>
                    <div class = "store-content">
                        <div id="define-store"> </div>
                        <div id = "define-rdbms-type"> </div>
                        <div id ="store-options-div"> </div>
                    </div>
                </div>
                <div class="define-index-annotation"> </div>
                <div class ="define-predefined-aggregation-annotation"> </div>
                <div class="define-user-defined-annotations"> </div>
            </div>
    </div>
    <div class = "aggregation-form-container">
        <h3> Projection </h3>
        <div class = "define-select"> </div>
        <div class="define-group-by-attributes"> </div>
    </div>
    <div class = "aggregation-form-container">
        <div id = "define-aggregate-by">
            <h3> Aggregation Criteria </h3>
            <div id ="aggregate-by-time-period" class="aggregate-by-content">
                <h4> <span class="mandatory-symbol"> * </span> By Time Period </h4>
                <select class="aggregate-by-time-period-selection">
                    <option value="interval"> Interval </option>
                    <option value="range"> Range </option>
                </select>
            </div>
            <div class="aggregate-by-time-period-content"> </div>
            <div id="aggregate-by-attribute" class="aggregate-by-content">
                <div class="clearfix">
                    <label>
                        <input type = "checkbox" id="aggregate-by-attribute-checkbox"> By Attribute
                    </label>
                    <i class = "fw fw-info">
                        <span style = "display:none"> Attribute of timestamp is required </span>
                    </i>
                </div>
                <div class="aggregate-by-attribute-content clearfix">
                    <label class="clearfix"> Attribute Name </label>
                </div>
                <label class="error-message"> </label>
            </div>
        </div>
    </div>
</script>

<script id="join-query-form-template" type = "text/template">
    <div class = "join-query-form-container">
        <h3> Query Meta Information </h3>
        <div class="query-name-div">
            <label> Name </label>
            <input type="text"  class="clearfix query-name name" value="{{name}}">
            <label class="error-message"> </label>
        </div>
        <div class ="define-annotations">
            <h4> Annotations </h4>
            <div class ="define-predefined-annotations"> </div>
            <div class="define-user-defined-annotations"></div>
        </div>
    </div>
    <div class = "join-query-form-container">
        <h3> Input </h3>
        <div class="query-input-container">
            <div class="define-left-source define-source"></div>
            <div class="define-join-type">
                <div class="join-type-div">
                    <label class="clearfix"> Join Type </label>
                    <div class="define-join-type-selection clearfix"> </div>
                    <label class="error-message"> Value is required </label>
                </div>
            </div>
            <div class="define-right-source define-source"></div>
            <div class="define-on-condition define-content">
                <label>
                    <input type="checkbox" class="on-condition-checkbox query-checkbox"> On Condition
                </label>
                <div class="on-condition-content query-content">
                    <input type="text"  class="clearfix name on-condition-value query-content-value symbol-syntax-required-value">
                    <label class="error-message"> </label>
                </div>
            </div>
            <div class="define-aggregate-per-within-condition"> </div>
        </div>
    </div>
    <div class = "join-query-form-container">
        <h3> Projection </h3>
        <div class = "define-select"> </div>
        <div class="define-group-by-attributes"> </div>
        <div class="define-having-condition define-content">
            <label>
                <input type="checkbox" class="having-checkbox query-checkbox"> Having condition
            </label>
            <div class="having-condition-content query-content">
                <input type="text"
                       class="clearfix having-value query-content-value name symbol-syntax-required-value">
                <label class="error-message"> </label>
            </div>
        </div>
    </div>
    <div class="join-query-form-container">
        <div class="define-query-output"> </div>
    </div>
</script>

<script id="query-output-template" type = "text/template">
    <h3> Output </h3>
    <div class="define-order-by-attributes"> </div>
    {{#each outputConfig}}
        <div class = "define-{{name}} define-content">
            <div class="clearfix">
                <label>
                    <input type="checkbox" class="{{name}}-checkbox query-checkbox"> {{addTitle name}}
                </label>
                <i class = "fw fw-info">
                    <span style = "display:none"> {{description}} </span>
                </i>
            </div>
            <div class="{{name}}-content query-content">
                <input type="text"  class="clearfix {{name}}-value query-content-value name">
                <label class="error-message"> </label>
            </div>
        </div>
    {{/each}}
    <div class="define-query-operation define-output-content">
        <label class="clearfix"> Operation </label>
    </div>
    <div class="define-query-into define-output-content">
        <label> Into </label>
        <input type = "text" class="clearfix name query-into" value="{{into}}" readonly>
    </div>
    <div class="define-output-events define-output-content"> </div>
</script>

<script id="store-query-output-template" type = "text/template">
    <div class="define-query-operation-types">
        {{> renderDropDown possibleOperations}}
    </div>

    <div class="define-operation-set-condition define-output-content">
        <label> <input type="checkbox" class="set-checkbox"> Set </label>
        <div class="set-content">
            <div class="clearfix">
                <label class = "set-attribute-label"> Attribute </label>
                <label class = "set-attribute-label"> Value </label>
            </div>
            <ul class="set-condition">
                {{#each set}}
                    <li class="setAttributeValue">
                        <div class="clearfix">
                            <input type="text" class="setAttribute" value="{{attribute}}">
                            <input type="text" class="setValue" value="{{value}}">
                            <a class = "btn-del-option"> <i class = "fw fw-delete"> </i></a>
                        </div>
                        <label class="error-message"> </label>
                    </li>
                {{/each}}
            </ul>
            <button class="btn btn-default btn-add-set"> + Set </button>
        </div>
    </div>

    <div class="define-operation-on-condition define-content">
        <label> On </label>
        <input type="text" class="clearfix name query-content-value symbol-syntax-required-value" value="{{on}}">
        <label class="error-message"> </label>
    </div>
</script>

<script id="query-source-form-template" type = "text/template">
    <div class="clearfix collapse-div" data-toggle="collapse" href="#join-{{type}}-content"
         aria-controls="join-{{type}}-content" aria-expanded="false">
            <label> {{addTitle type}}</label>
            <a class="collapse-icon"> </a>
    </div>
    <div class = "{{type}}-source-content collapse join-source-content" id ="join-{{type}}-content">
        <div class="input-from">
            <label class="clearfix"> <span class="mandatory-symbol"> * </span> Input From </label>
            <div class="input-from-drop-down"> </div>
        </div>
        <div class="define-as define-content">
            <label>
                <input type="checkbox" class="source-as-checkbox query-checkbox"> As
            </label>
            <div class="source-as-content query-content">
                <input type="text"  class="clearfix as-content-value query-content-value">
                <label class="error-message"> </label>
            </div>
        </div>
        <div class="define-unidirectional">
            <label class = "clearfix">
                <input type="checkbox" class="is-unidirectional-checkbox"> Is Unidirectional
            </label>
            <label class="error-message"></label>
        </div>
        <div class="define-stream-handler">
            <label> <input type="checkbox" class="stream-handler-checkbox"> Stream Handler </label>
            <div class="define-stream-handler-section"> </div>
            <div class = "define-stream-handler-buttons">
                <button class="btn btn-default btn-add-filter"> + Filter </button>
                <button class="btn btn-default btn-add-function"> + Function </button>
                <button class="btn btn-default btn-add-window"> + Window </button>
            </div>
        </div>
    </div>
</script>

<script id="pattern-sequence-query-form-template" type = "text/template">
    <div class="pattern-sequence-query-form-container">
        <h3> Query Meta Information</h3>
        <div class="query-name-div">
            <label> Name </label>
            <input type="text"  class="clearfix query-name name" value="{{name}}">
            <label class="error-message"> </label>
        </div>
        <div class ="define-annotations">
            <h4> Annotations </h4>
            <div class ="define-predefined-annotations"> </div>
            <div class="define-user-defined-annotations"></div>
        </div>
    </div>
    <div class="pattern-sequence-query-form-container">
        <h3> Input </h3>
        <div class="input-container">
            <div class="define-conditions">
                <label class="clearfix"> <span class="mandatory-symbol"> * </span> Conditions </label>
                <div class="condition-container">
                    <ul class="nav nav-tabs"> </ul>
                    <div class="tab-content"> </div>
                </div>
            </div>
            <div class="define-logic-statement define-content">
                <label class="clearfix"> <span class="mandatory-symbol"> * </span> Logic Statement </label>
                <div class="query-content">
                    <input type="text" class="clearfix logic-statement name">
                    <label class="error-message"> </label>
                </div>
            </div>
        </div>
    </div>
    <div class = "pattern-sequence-query-form-container">
        <h3> Projection </h3>
            <div class = "define-select"> </div>
            <div class="define-group-by-attributes"> </div>
            <div class="define-having-condition define-content">
                <label>
                    <input type="checkbox" class="having-checkbox query-checkbox"> Having condition
                </label>
                <div class="having-condition-content query-content">
                    <input type="text"
                           class="clearfix having-value query-content-value name symbol-syntax-required-value">
                    <label class="error-message"> </label>
                </div>
            </div>
    </div>
    <div class="pattern-sequence-query-form-container">
        <div class="define-query-output"> </div>
    </div>
</script>

<script id ="stream-handler-form-template" type = "text/template">
    <ul class = "stream-handler-list">
        {{#each streamHandlerList}}
        <li class="define-stream-handler-content">
            <div>
                <div class="collapse-div" href="#{{@index}}-{{../className}}-stream-handler-content"
                 data-toggle="collapse" aria-expanded="false">
                    <label class="clearfix">
                        <span class="mandatory-symbol"> * </span> Type <a class="collapse-icon"> </a>
                    </label>
                    <div class = "define-stream-handler-type"> {{> renderDropDown ../types}} </div>
                </div>
                <div class="collapse" id="{{@index}}-{{../className}}-stream-handler-content">
                    <div class="clearfix">
                        <div class = "define-stream-handler-type-content"> </div>
                        <div class = "attr-nav"> </div>
                    </div>
                    <label class = "error-message"> </label>
                </div>
            </div>
        </li>
        {{/each}}
    </ul>
</script>

<script id="pattern-sequence-condition-navigation-form-template" type = "text/template">
    <li class="condition-navigation">
        <a href=".define-{{conditionId}}-source" data-toggle="tab"> {{conditionId}}
            <button type="button" class="close btn-del-condition" name="delete" data-form-type="single" aria-label="Close">
                <i class="fw fw-cancel"></i>
            </button>
        </a>
    </li>
</script>

<script id="pattern-sequence-condition-content-form-template" type = "text/template">
    <div class="ws-tab-pane condition-content define-source define-{{condition.conditionId}}-source">
        <div class="define-source">
            <label class="clearfix"> Condition ID </label>
            <input type="text" class="condition-id clearfix name" value="{{condition.conditionId}}" min="1">
            <label class="error-message"></label>
            <div class="define-stream">
                <label class="clearfix"> Stream </label>
                <div class="clearfix">{{> renderDropDown inputStreamNames}}</div>
                <label class="error-message"></label>
            </div>
            <div class="define-stream-handler">
                <label> <input type="checkbox" class="stream-handler-checkbox"> Stream Handler </label>
                <div class="define-stream-handler-section"> </div>
                <div class = "define-stream-handler-buttons">
                    <button class="btn btn-default btn-add-filter"> + Filter </button>
                    <button class="btn btn-default btn-add-function"> + Function </button>
                </div>
            </div>
        </div>
    </div>
</script>

<script id = "window-filter-projection-query-form-template" type="text/template">
    <div class="query-form-container">
        <h3> Query Meta Information </h3>
        <div class="query-name-div">
            <label> Name </label>
            <input type="text"  class="clearfix query-name name" value="{{name}}">
            <label class="error-message"> </label>
        </div>
        <div class="query-from-div">
            <label> From </label>
            <input type = "text" class="clearfix name query-from" value="{{from}}" readonly>
        </div>
        <div class="define-query-source define-source">
            <div class="define-stream-handler">
                <label> <input type="checkbox" class="stream-handler-checkbox"> Stream Handler </label>
                <div class="define-stream-handler-section"> </div>
                <div class = "define-stream-handler-buttons">
                    <button class="btn btn-default btn-add-filter"> + Filter </button>
                    <button class="btn btn-default btn-add-function"> + Function </button>
                    <button class="btn btn-default btn-add-window"> + Window </button>
                </div>
            </div>
        </div>
        <div class ="define-annotations">
            <h4> Annotations </h4>
            <div class ="define-predefined-annotations"> </div>
            <div class="define-user-defined-annotations"></div>
        </div>
    </div>
    <div class="query-form-container">
        <h3> Projection </h3>
        <div class = "define-select"> </div>
        <div class="define-group-by-attributes"> </div>
        <div class="define-having-condition define-content">
            <label>
                <input type="checkbox" class="having-checkbox query-checkbox"> Having condition
            </label>
            <div class="having-condition-content query-content">
                <input type="text"
                       class="clearfix having-value query-content-value name symbol-syntax-required-value">
                <label class="error-message"> </label>
            </div>
        </div>
    </div>
    <div class="query-form-container">
        <div class="define-query-output"> </div>
    </div>
</script>

<!--Start: Settings Modal-->
<div class="modal fade modalSettings" id="modalSettings" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <h3 class="modal-title file-dialog-title" id="aboutSettingsLabel">Settings - Source View</h3>
                <hr class="style1"/>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <form>
                    <div class="form-group">
                        <label for="sourceViewTheme">Theme</label>
                        <select class="form-control" id="sourceViewTheme">
                            <optgroup label="Bright">
                                <option value="ace/theme/chrome">Chrome</option>
                                <option value="ace/theme/clouds">Clouds</option>
                                <option value="ace/theme/crimson_editor">Crimson Editor</option>
                                <option value="ace/theme/dawn">Dawn</option>
                                <option value="ace/theme/dreamweaver">Dreamweaver</option>
                                <option value="ace/theme/eclipse">Eclipse</option>
                                <option value="ace/theme/github">GitHub</option>
                                <option value="ace/theme/iplastic">IPlastic</option>
                                <option value="ace/theme/solarized_light">Solarized Light</option>
                                <option value="ace/theme/textmate">TextMate</option>
                                <option value="ace/theme/tomorrow">Tomorrow</option>
                                <option value="ace/theme/xcode">XCode</option>
                                <option value="ace/theme/kuroir">Kuroir</option>
                                <option value="ace/theme/katzenmilch">KatzenMilch</option>
                                <option value="ace/theme/sqlserver">SQL Server</option>
                            </optgroup>
                            <optgroup label="Dark">
                                <option value="ace/theme/ambiance">Ambiance</option>
                                <option value="ace/theme/chaos">Chaos</option>
                                <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
                                <option value="ace/theme/cobalt">Cobalt</option>
                                <option value="ace/theme/idle_fingers">idle Fingers</option>
                                <option value="ace/theme/kr_theme">krTheme</option>
                                <option value="ace/theme/merbivore">Merbivore</option>
                                <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
                                <option value="ace/theme/mono_industrial">Mono Industrial</option>
                                <option value="ace/theme/monokai">Monokai</option>
                                <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
                                <option value="ace/theme/solarized_dark">Solarized Dark</option>
                                <option value="ace/theme/terminal">Terminal</option>
                                <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
                                <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
                                <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
                                <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
                                <option value="ace/theme/twilight" selected="selected">Twilight (Default)</option>
                                <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="sourceViewFontSize">Font Size(px)</label>
                        <select class="form-control" id="sourceViewFontSize">
                            <option value="10px">10</option>
                            <option value="11px">11</option>
                            <option value="12px" selected="selected">12</option>
                            <option value="13px">13</option>
                            <option value="14px">14</option>
                            <option value="15px">15</option>
                            <option value="16px">16</option>
                            <option value="17px">17</option>
                            <option value="18px">18</option>
                            <option value="19px">19</option>
                            <option value="20px">20</option>
                            <option value="21px">21</option>
                            <option value="22px">22</option>
                            <option value="23px">23</option>
                            <option value="24px">24</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="saveSettingsButton">Close</button>
            </div>
        </div>
    </div>
</div>
<!--Start: Store Query Modal-->
<div class="modal fade" id="modalStoreQuery" tabindex="-1" role="dialog">
    <div class="modal-dialog store-query" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel  about-dialog-close"></i></button>
                <h4 class="modal-title file-dialog-title">On-Demand Query</h4>
                <hr class="style1">
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form id="storeQueryForm" class="form-horizontal" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-12">
                                Siddhi App Name
                            </label>
                            <div class="col-sm-12">
                                <select name="siddhi-app-name" id="store-query-siddhi-app-name" class="form-control">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="location" class="col-sm-12">Query</label>
                            <div class="col-sm-12">
                                <textarea id="curlEditor" class="curl-editor form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="file-dialog-form-btn">
                                <button id="executeQuery" type="submit" class="btn btn-primary">Execute</button>
                                <div class="divider"></div>
                                <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
                            </div>
                        </div>
                        <div class="form-group" style="padding-left: 15px;">
                            <div id="error-box" class="alert alert-danger" style="display: none;"></div>
                        </div>
                        <div id="simulator_output">
                            <table id="query_data" class="table table-striped table-hover table-bordered data-table
                            compact hidden">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<iframe id="frm-download" style="display: none;"></iframe>

<div class="modal fade" id="guideDialog" tabindex="-1" role="dialog" aria-tydden="true">
    <div class="modal-dialog file-dialog" role="document">
        <div class="modal-content" style="padding-bottom: 18px;padding-right: 10px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden='true'>&times;</span>
                </button>
                <h4 class="modal-title file-dialog-title text-center" id="whereToStart">
                    Welcome to the Streaming Integrator Tooling - Editor Tour Guide</h4>
                <hr class="style1">
                <div class="divider"></div>
            </div>
            <div class="modal-body">
                <div class="text-center"><p>For the complete tour from application design to test simulation, click <b>Complete Tour.</b>
                    <br>To skip the application creation tour and move on to the test simulation tour, click <b>Simulation Tour.</b>
                    <br>To use samples, click <b>Samples.</b> You can always try the guide using <b>Tools menu.</b></p><br></div>
                <div class="row">
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-lg btn-primary tour-guide-button" id="fullGuide">Complete tour</button></div>
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-lg btn-primary tour-guide-button" id="simulationGuide">Simulation tour</button></div>
                    <div class="col-sm-4">
                        <button class="btn btn-block btn-lg btn-primary tour-guide-button" id="sampleGuide">Samples</button></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modalSampleEvent" id="modalSampleEvent" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fw fw-cancel  about-dialog-close"></i></button>
                <h4 class="modal-title file-dialog-title" id="sampleEvent">Generate Sample Event</h4>
                <hr class="style1">
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <form id="sampleEventForm">
                    <div class="form-group">
                        <label>
                            Siddhi App Name
                        </label>
                        <select name="siddhi-app-name" id="sample-event-siddhi-app-name" class="form-control">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>
                            Stream Name
                        </label>
                        <select name="stream-name" class="form-control">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>
                            Event Format
                        </label>
                        <select class="form-control" name="event-format">
                            <option value="json" selected="selected">JSON</option>
                            <option value="xml">XML</option>
                            <option value="text">text</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary" name="generateSampleEvent"
                                id="generateSampleEventButton">
                            Generate
                        </button>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="generatedSampleEvent"
                                  style="height: 250px">Select App, Stream and event type to get the sample event here..
                        </textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- More info modal for operator finder -->
<div class="modal fade modal-operator-details" id="modalOperatorDetails" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix"></div>
    </div>
</div>

<!-- Handlebar template for operator finder side-panel content -->
<script id="operators-side-panel-template" type="text/x-handlebars-template">
    <div id="operator-finder" role="tabpanel" class="ws-tab-pane operator-finder">
        <div class="content">
            <h3>Operators</h3>
            <div class="form-group">
                <input type="text" class="form-control" id="operator-search-input-field"
                       placeholder="Search operators..." />
            </div>
            <div class="results nano">
                <div class="result-content nano-content"></div>
            </div>
        </div>
        <input type="text" class="copyable-text" />
    </div>
</script>

<!-- Handlebar template for operator finder search results -->
<script id="operators-search-results-template" type="text/x-handlebars-template">
    {{#if hasQuery}}
    {{#if hasResults}}
    {{#each results}}
    <div class="result less" data-index="{{index}}">
        <div class="heading">
            <h4 data-placement="right" data-container="body" title="{{fqn}}">
                <i class="fw fw-extensions" title="{{type}}"></i> {{{htmlFqn}}}
            </h4>
            <a href="#" class="more-info">
                <i class="fw fw-info"></i>
            </a>
        </div>
        <p class="description">{{{description}}}</p>
        <div class="icon-bar">
            <a href="#" class="expand-description">More...</a>
            <ul>
                <li>
                    <span class="copy-status-msg" style="display: none">Copied to Clipboard!</span>
                    <a href="#" title="Copy to Clipboard" class="copy-to-clipboard">
                        <i class="fw fw-copy"></i>
                    </a>
                </li>
                <li>
                    <a href="#" title="Add to Source" class="add-to-source">
                        <i class="fw fw-add"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="alert alert-danger">
        Sorry! No results found.
    </div>
    {{/if}}
    {{else}}
    <ul>
        {{#each namespaces}}
        <li><a href="#" class="namespace-entry">{{this}}</a></li>
        {{/each}}
    </ul>
    {{/if}}
</script>

<!-- Handlebar template for operator finder's operator more details -->
<script id="operator-details-template" type="text/x-handlebars-template">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <i class="fw fw-cancel about-dialog-close"></i>
        </button>
        <h3 class="modal-title" id="operator-name" data-index="{{index}}">{{fqn}}</h3>
        <hr />
    </div>
    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
        <div class="operator-details-content nano">
            <div class="nano-content">
                <h4>Parameters: </h4>
                {{#if hasParameters}}
                <table class="table table-striped table-dark table-hover">
                    <thead>
                    <tr>
                        <td>Name</td>
                        <td>Type</td>
                        <td>Description</td>
                    </tr>
                    </thead>
                    <tbody>
                    {{#each parameters}}
                    <tr>
                        <td>{{name}}</td>
                        <td>{{{dataTypes}}}</td>
                        <td>{{description}}</td>
                    </tr>
                    {{/each}}
                    </tbody>
                </table>
                {{else}}
                <p class="info-text">No parameters available.</p>
                {{/if}}

                <h4>Return Attributes: </h4>
                {{#if hasReturnAttributes}}
                <table class="table table-striped table-dark table-hover">
                    <thead>
                    <tr>
                        <td>Name</td>
                        <td>Type</td>
                        <td>Description</td>
                    </tr>
                    </thead>
                    <tbody>
                    {{#each returnAttributes}}
                    <tr>
                        <td>{{name}}</td>
                        <td>{{{dataTypes}}}</td>
                        <td>{{description}}</td>
                    </tr>
                    {{/each}}
                    </tbody>
                </table>
                {{else}}
                <p class="info-text">No return attributes available.</p>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="text" class="copyable-text" />
        <span class="copy-status-msg" style="display: none">Copied to Clipboard!</span>
        <button type="button" class="btn btn-primary" id="btn-copy-to-clipboard">
            <i class="fw fw-copy"></i> Copy to Clipboard
        </button>
        {{#if enableAddToSource}}
        <button type="button" class="btn btn-primary" id="btn-add-to-source">
            <i class="fw fw-add"></i> Add to Source
        </button>
        {{/if}}
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</script>

<!-- Export Dialog -->
<div class='modal fade' id='openExportModal' tabindex='-1' role='dialog'>
    <div class='modal-dialog' role='document'>
        <iframe name="export-download" style="display: none;"></iframe>
        <div class='modal-content export-dialog'>
            <div class='modal-header'>
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                    <i class='fw fw-cancel about-dialog-close'></i>
                </button>
                <h4 class='modal-title export-dialog-title' id='initialHeading'>Exporting Siddhi Apps For Docker</h4>
                <hr class='export-dialog-hr'>
            </div>
            <div class='modal-body'>
                <div id='export-form' class="clearfix" >
                    <ul id="form-steps" class="k8_export_header_item">
                        <li><a href="#step-1" class="link-disabled">Step 1<br/><small>Select Siddhi Apps</small></a></li>
                        <li><a href="#step-2" class="link-disabled">Step 2<br/><small>Template Siddhi Apps</small></a></li>
                        <li><a href="#step-3" class="link-disabled">Step 3<br/><small>Update Siddhi Integrator<br/>Configurations</small></a></li>
                        <li><a href="#step-4" class="link-disabled">Step 4<br/><small>Populate arguments <br/>template</small></a></li>
                        <li><a href="#step-5" class="link-disabled">Step 5<br/><small>Bundle additional <br/>dependencies</small></a></li>
                    </ul>
                    <div id="form-containers">
                        <div id="step-1" class="export-selector">
                            <div class='export-siddhi-app-list' id='siddhi-app-list' style='display: block'>
                                <div id='select-siddhi-app' class='step-description openDockerWizardError-container'>Select Siddhi Apps to export</div>
                                <div class='form-group'>
                                    <div class='export-dialog-form-scrollable-block-list'>
                                        <div id='siddiAppsTree'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-2" >
                            <div class="step-description">Use ${...} format to template siddhi apps</div>
                            <div id='siddhi-app-template-container-id'
                                 style='display: block'>
                            </div>
                        </div>
                        <div id="step-3" >
                            <div class="step-description">Use ${...} format to template the configurations</div>
                            <div class='config-template-container' id='config-template-container-id'
                                 style='display: block'>
                            </div>
                        </div>
                        <div id="step-4" >
                            <div id="fill-template-container-id">
                            </div>
                        </div>
                        <div id="step-5" class="export-selector">
                            <div class='export-siddhi-app-list' id='additional-bundles-list' style='display: block'>
                                Add additional JARS
                                <div class='form-group'>
                                    <div class='export-dialog-form-scrollable-block-list'>
                                        <div id='bundlesTree'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/editor/commons/lib/requirejs-2.3.2/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl: window.location.protocol + "//" + window.location.host + '/editor',
        paths: {
            lib: "commons/lib",
            app: "js",
            commons_app: "commons",
            /////////////////////////
            // third party modules //
            ////////////////////////
            handlebar: "commons/lib/handlebar/handlebars-v4.0.11",
            jquery: "commons/lib/jquery_v1.9.1/jquery-1.9.1.min",
            jquery_ui: "commons/lib/jquery-ui_v1.12.1/jquery-ui",
            bootstrap: "commons/lib/theme-wso2-2.0.0/js/bootstrap.min",
            dagre: "commons/lib/dagre-0.7.4/dagre.min",
            dragSelect: "commons/lib/dragSelect/ds.min",
            jquery_validate: "commons/lib/jquery_validate/jquery.validate.min",
            jquery_timepicker: "commons/lib/jquery_timepicker/jquery-ui-timepicker-addon",
            log4javascript: "commons/lib/log4javascript-1.4.13/log4javascript",
            lodash: "commons/lib/lodash_v4.13.1/lodash",
            backbone: "commons/lib/backbone_v1.3.3/backbone",
            file_saver: "commons/lib/file_saver/FileSaver",
            mousetrap: "commons/lib/mousetrap_v1.6.0/mousetrap.min",
            jquery_mousewheel: "commons/lib/jquery-mousewheel_v3.1.13/jquery.mousewheel",
            jquery_context_menu: "commons/lib/context-menu_v2.4.2/jquery.contextMenu.min",
            js_tree: "commons/lib/js-tree-v3.3.2/jstree",
            render_json: "commons/lib/renderjson/renderjson",
            nano_scroller: "commons/lib/nanoscroller_0.8.7/jquery.nanoscroller.min",
            perfect_scrollbar: "commons/lib/perfect-scrollbar-1.4.0/perfect-scrollbar",
            theme_wso2: "commons/lib/theme-wso2-2.0.0/js/theme-wso2.min",
            ace: "commons/lib/ace-editor",
            overlay_scroller: "commons/lib/overlay_scroll/js/jquery.overlayScrollbars.min",
            datatables: "commons/lib/data-table/jquery.dataTables.min",
            datatables_bootstrap: "commons/lib/data-table/dataTables.bootstrap.min",
            datatables_wso2: "commons/lib/theme-wso2-2.0.0/extensions/datatables/js/dataTables.wso2",
            enjoyhint: "commons/lib/enjoyhint/enjoyhint.min",
            smart_wizard: "commons/lib/smartWizard/js/jquery.smartWizard.min",
            //beautify: "commons/lib/beautify",
            ///////////////////////
            // custom modules ////
            //////////////////////
            log: "commons/js/log/log",
            menu_bar: "commons/js/menu-bar/menu-bar",
            tool_bar: "commons/js/tool-bar/tool-bar",
            context_menu: "commons/js/context-menu/context-menu",
            tool_palette: "js/design-view/tool-palette",
            tab: "js/tab/",
            toolEditor: "js/tool-editor/module",
            command: "commons/js/command/command",
            alerts: "commons/js/utils/alerts",
            workspace: "commons/js/workspace/workspace",
            event_channel: "commons/js/event/channel",
            menu_group: "commons/js/menu-bar/menu-group",
            menu_definitions: "commons/js/menu-bar/menu-definitions",
            file_menu: "commons/js/menu-bar/file-menu",
            edit_menu: "commons/js/menu-bar/edit-menu",
            run_menu: "commons/js/menu-bar/run-menu",
            tools_menu: "commons/js/menu-bar/tools-menu",
            deploy_menu: "commons/js/menu-bar/deploy-menu",
            export_menu: "commons/js/menu-bar/export-menu",
            menu_item: "commons/js/menu-bar/menu-item",
            file_browser: "commons/js/file-browser/file-browser",
            undo_manager: "commons/js/undo-manager/undo-manager",
            launcher: "js/launcher/launcher",
            launch_manager: "js/launcher/launch-manager",
            undoable_operation_factory: "commons/js/undo-manager/undoable-operation-factory",
            source_modify_operation: "commons/js/undo-manager/source-modify-operation",
            undoable_operation: "commons/js/undo-manager/undoable-operation",
            sample_preview: "js/sample-preview/sample-preview-view",
            sample_view: "js/sample-view/sample-view",
            output_console_list: "js/output-console/console-list",
            console: "js/output-console/console",
            service_console: "js/output-console/service-console-manager",
            debugger_console: "js/debugger/debugger",
            design_view: "js/design-view/design-view",
            initialiseData: "js/design-view/initialise-data",
            jsonValidator: "js/design-view/JSON-validator",
            designViewGrid: "js/design-view/design-grid",
            designViewUtils: "js/design-view/util/design-view-utils",
            dropElements: "js/design-view/drop-elements",
            configurationData: "js/design-view/configuration-data/configuration-data",
            appData: "js/design-view/configuration-data/app-data",
            elementUtils: "js/design-view/elements/element-utils",
            formBuilder: "js/design-view/form-builder/form-builder",
            formUtils: "js/design-view/form-builder/form-utils",
            sourceForm: "js/design-view/form-builder/forms/source-form",
            sinkForm: "js/design-view/form-builder/forms/sink-form",
            streamForm: "js/design-view/form-builder/forms/stream-form",
            tableForm: "js/design-view/form-builder/forms/table-form",
            windowForm: "js/design-view/form-builder/forms/window-form",
            aggregationForm: "js/design-view/form-builder/forms/aggregation-form",
            triggerForm: "js/design-view/form-builder/forms/trigger-form",
            windowFilterProjectionQueryForm: "js/design-view/form-builder/forms/window-filter-projection-query-form",
            patternQueryForm: "js/design-view/form-builder/forms/pattern-query-form",
            sequenceQueryForm: "js/design-view/form-builder/forms/sequence-query-form",
            joinQueryForm: "js/design-view/form-builder/forms/join-query-form",
            partitionForm: "js/design-view/form-builder/forms/partition-form",
            functionForm: "js/design-view/form-builder/forms/function-form",
            appAnnotationForm: "js/design-view/form-builder/forms/app-annotation-form",
            guide: "js/guide/guide",
            utils: "commons/js/utils/utils",
            // element data holding objects starts here
            // annotations
            sourceOrSinkAnnotation: "js/design-view/elements/annotations/source-or-sink-annotation",
            mapAnnotation: "js/design-view/elements/annotations/map",
            storeAnnotation: "js/design-view/elements/annotations/store-annotation",
            payloadOrAttribute: "js/design-view/elements/annotations/source-or-sink-annotation-sub-elements/payload-or-attribute",
            annotationObject: "js/design-view/elements/annotation-object",
            annotationElement: "js/design-view/elements/annotation-element",
            // definitions
            stream: "js/design-view/elements/definitions/stream",
            table: "js/design-view/elements/definitions/table",
            window: "js/design-view/elements/definitions/window",
            trigger: "js/design-view/elements/definitions/trigger",
            aggregation: "js/design-view/elements/definitions/aggregation",
            functionDefinition: "js/design-view/elements/definitions/function",
            aggregateByTimePeriod: "js/design-view/elements/definitions/aggregation-definition-sub-elements/aggregate-by-time-period",
            // query sub elements
            querySelect: "js/design-view/elements/queries/query-sub-elements/query-select/query-select",
            queryOrderByValue: "js/design-view/elements/queries/query-sub-elements/query-orderBy/query-orderBy-value",
            queryOutput: "js/design-view/elements/queries/query-sub-elements/query-output/query-output",
            queryOutputInsert: "js/design-view/elements/queries/query-sub-elements/query-output/query-output-types/query-output-insert",
            queryOutputDelete: "js/design-view/elements/queries/query-sub-elements/query-output/query-output-types/query-output-delete",
            queryOutputUpdate: "js/design-view/elements/queries/query-sub-elements/query-output/query-output-types/query-output-update",
            queryOutputUpdateOrInsertInto: "js/design-view/elements/queries/query-sub-elements/query-output/query-output-types/query-output-update-or-insert-into",
            // queries
            joinQuerySource: "js/design-view/elements/queries/query-sub-elements/query-input/join-query-input/sub-elements/join-query-source",
            joinQueryInput: "js/design-view/elements/queries/query-sub-elements/query-input/join-query-input/join-query-input",
            partition: "js/design-view/elements/partitions/partition",
            partitionWith: "js/design-view/elements/partitions/partition-sub-elements/partition-with",
            patternOrSequenceQueryInput: "js/design-view/elements/queries/query-sub-elements/query-input/pattern-or-sequence-query-input/pattern-or-sequence-query-input",
            patternOrSequenceQueryCondition: "js/design-view/elements/queries/query-sub-elements/query-input/pattern-or-sequence-query-input/sub-elements/pattern-or-sequence-query-condition",
            windowFilterProjectionQueryInput: "js/design-view/elements/queries/query-sub-elements/query-input/window-filter-projection-query/window-filter-projection-query-input",
            queryWindowOrFunction: "js/design-view/elements/queries/query-sub-elements/query-input/query-window-or-function",
            streamHandler: "js/design-view/elements/queries/query-sub-elements/query-input/stream-handler",
            query: "js/design-view/elements/queries/query",
            edge: "js/design-view/configuration-data/edge",
            annotation: "js/design-view/elements/annotation",
            attribute: "js/design-view/elements/attribute",
            // element data holding objects ends here
            //constants
            constants: "js/design-view/constants",
            guideConstants: "js/guide/constants",
            templateAppDialog: "js/export-deployment-artifacts/template-app-dialog",
            jarsSelectorDialog: "js/export-deployment-artifacts/jars-selector-dialog",
            siddhiAppSelectorDialog: "js/export-deployment-artifacts/siddhiapp-selector-dialog",
            templateConfigDialog: "js/export-deployment-artifacts/template-config-dialog",
            fillTemplateValueDialog: "js/export-deployment-artifacts/fill-template-value-dialog",
            kubernetesConfigDialog : "js/export-deployment-artifacts/kubernetes-config-dialog"
        },
        map: {
            "*": {
                // use lodash instead of underscore
                underscore: "lodash",
                jQuery: "jquery",
                'datatables.net': "datatables"
            }
        },
        packages: [
            {
                name: 'welcome-page',
                location: 'commons/js/welcome-page',
                main: 'module'
            },
            {
                name: 'tab',
                location: 'js/tab',
                main: 'module'
            },
            {
                name: 'workspace',
                location: 'commons/js/workspace',
                main: 'module'
            },
            {
                name: 'dialogs',
                location: 'commons/js/dialog',
                main: 'module'
            },
            {
                name: 'event_simulator',
                location: 'js/event-simulator',
                main: 'module'
            },
            {
                name: 'operator_finder',
                location: 'js/operator-finder',
                main: 'module'
            }
        ]
    });
    require(['app/main'], function (Application) {
        var app, config;
        config = {
            baseUrl: window.location.protocol + "//" + window.location.host + '/editor',
            baseUrlHost: window.location.host,
            container: "#page-content",
            welcome: {
                container: "#welcome-container",
                cssClass: {
                    parent: "initial-background-container",
                    outer: "initial-welcome-container",
                    leftPane: "left-pane",
                    buttonWrap: "btn-wrap",
                    productNameWrap: "productname-wrap",
                    contentPane: "content-pane",
                    recentFilesPane: "recent-file-pane",
                    samplesPane: "samples-pane",
                    quickLinksPane: "quick-links-pane",
                    buttonNew: " btn btn-block new-welcome-button",
                    buttonOpen: " btn btn-block open-welcome-button"
                },
                samples: ["artifacts/ReceiveAndCount/ReceiveAndCount.siddhi",
                    "artifacts/AlertsAndThresholds/AlertsAndThresholds.siddhi",
                    "artifacts/AggregateOverTime/AggregateOverTime.siddhi",
                    "artifacts/DataPreprocessing/DataPreprocessing.siddhi",
                    "artifacts/JoinWithStoredData/JoinWithStoredData.siddhi",
                    "artifacts/HelloKafka/HelloKafka.siddhi",
                    "artifacts/StreamingRegressor/StreamingRegressor.siddhi",
                    "artifacts/PatternMatching/PatternMatching.siddhi",
                    "artifacts/AggregateDataIncrementally/AggregateDataIncrementally.siddhi"]
            },
            stream_predefined_annotations: [
            {
                predefined: true,
                name: 'Async',
                class: 'optional-annotation',
                isMandatory: false,
                elements: [
                    {
                        name: 'buffer.size',
                        defaultValue: '256',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                    {
                        name: 'workers',
                        defaultValue: '2',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                    {
                        name: 'batch.size.max',
                        defaultValue: '5',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                ]
            }
            ],
            type_table_predefined_annotations: [
            {
                name: "primaryKey",
                optional: true
            },
            {
                name: "index",
                optional: true
            }
            ],
            type_aggregation_predefined_annotations: [
                {
                    name: "purge",
                    optional: true,
                    parameters: [
                        {
                            name: "enable",
                            defaultValue: "true",
                            description: "Data purging can be enabled or disabled using this option.",
                            optional: true,
                            type: ["BOOL"]
                        },
                        {
                            name: "interval",
                            defaultValue: "10 sec",
                            description: "The interval to purge data can be mentioned using this option.",
                            optional: true,
                            type: ["INT", "LONG", "TIME"]
                        }
                    ],
                    annotations: [{
                        name: "retentionPeriod",
                        optional: true,
                        parameters: [
                            {
                                name: "sec",
                                defaultValue: "120 sec",
                                description: "The amount of data to be kept in the database in seconds.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            },
                            {
                                name: "min",
                                defaultValue: "24 hours",
                                description: "The amount of data to be kept in the database in minutes.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            },
                            {
                                name: "hours",
                                defaultValue: "30 days",
                                description: "The amount of data to be kept in the database in hours.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            },
                            {
                                name: "days",
                                defaultValue: "1 year",
                                description: "The amount of data to be kept in the database in days.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            },
                            {
                                name: "months",
                                defaultValue: "all",
                                description: "The amount of data to be kept in the database in months.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            },
                            {
                                name: "years",
                                defaultValue: "all",
                                description: "The amount of data to be kept in the database in years.",
                                optional: true,
                                type: ["INT", "LONG", "TIME"]
                            }
                        ]
                    }
                    ]
                },
                {
                    name: "partitionById",
                    optional: true,
                    parameters: [
                        {
                            name: "enable",
                            defaultValue: "true",
                            description: "The distributed aggregation can be enabled or disabled using this option.",
                            optional: true,
                            type: ["BOOL"]
                        }
                    ]
                },
                {
                    name: "index",
                    optional: true
                }
            ],
            type_query_predefined_annotations: [
                {
                    name: "dist",
                    optional: true,
                    parameters: [
                        {
                            name: "execGroup",
                            defaultValue: "group-1",
                            description: "The name of the execution group. Elements with the same execution group are " +
                                "executed in the same siddhi application. Elements with different execution group are executed " +
                                "in separate siddhi Application per execution group",
                            optional: true,
                            type: ["STRING"]
                        },
                        {
                            name: "parallel",
                            defaultValue: "1",
                            description: "The number of instances in which the execution element must be executed in parallel." +
                                "If there is a mismatch in the parallel instances specified for an execution group, an exception occurs.",
                            optional: true,
                            type: ["INT"]

                        }
                    ]

                }
            ],
            query_output_options: [
                {
                    name: "limit",
                    description: "When events are emitted as a batch, limit allows to limit the number\n" +
                        " of events in the batch from the defined offset."
                },
                {
                    name: "offset",
                    description: "When events are emitted as a batch, offset allows to offset beginning\n" +
                        " of the output event batch."
                },
                {
                    name: "rate-limiting",
                    description: "It allows queries to output events periodically based on a specified\n" +
                        "condition."
                }
            ],
            query_operators: ["==", ">=", ">", "<=", "<", "AND", "OR", "NOT", "IN", "IS NULL"],
            output_rate_limit_keywords: ["snapshot", "every", "within", "events", "ALL", "LAST", "FIRST"],
            logic_statement_keywords: ["for", "every", "within"],
            join_types: ["join", "left_outer_join", "right_outer_join", "full_outer_join"],
            stream_handler_types: ["filter", "function","window"],
            query_output_operations: ["insert", "delete", "update", "update_or_insert_into"],
            stream_handler_types_without_window: ["filter","function"],
            trigger: [
            {
                name: "start",
                description: "An event is triggered when Siddhi is started.",
                defaultValue: ""
            },
            {
                name: "cron-expression",
                description: "An event is triggered periodically based on the given cron expression",
                defaultValue: "0 15 10 ? * MON-FRI"
            },
            {
                name: "every",
                description: "An event is triggered periodically at the given time interval",
                defaultValue: "5 min"
            }
            ],
            rdbms_types: [
                {
                    name: "inline-config",
                    parameters: [
                        {
                            name: "jdbc.url",
                            optional: false,
                            description: "The JDBC URL via which the RDBMS data store is accessed.",
                            defaultValue: ""
                        },
                        {
                            name: "username",
                            optional: false,
                            description: "The username to be used to access the RDBMS data store.",
                            defaultValue: ""
                        },
                        {
                            name: "password",
                            optional: false,
                            description: "The password to be used to access the RDBMS data store.",
                            defaultValue: ""
                        },
                        {
                            name: "jdbc.driver.name",
                            optional: false,
                            description: "The driver class name for connecting the RDBMS data store.",
                            defaultValue: ""
                        },
                        {
                            name: "pool.properties",
                            optional: true,
                            description: "Any pool parameters for the database connection must be specified as " +
                                "key-value pairs.",
                            defaultValue: "null"
                        },
                        {
                            name: "table.name",
                            optional: true,
                            description: "The name with which the event table should be persisted in the store." +
                                " If no name is specified via this parameter, the event table is persisted with " +
                                "the same name as the Siddhi table.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        },
                        {
                            name: "field.length",
                            optional: true,
                            description: "The number of characters that the values for fields of the 'STRING' type in" +
                                " the table definition must contain. Each required field must be provided as a " +
                                "comma-separated list of key-value pairs in the [field.name:length] format." +
                                "If this is not specified, the default number of characters specific to the database type is considered.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        }

                    ]

                },
                {
                    name: "datasource",
                    parameters: [
                        {
                            name: "datasource",
                            optional: false,
                            description: "The name of the Carbon datasource that should be used for creating the " +
                                "connection with the database. If this is found, neither the pool properties nor the " +
                                "JNDI resource name described above are taken into account and the connection is " +
                                "attempted via Carbon datasources instead. ",
                            defaultValue: ""
                        },
                        {
                            name: "pool.properties",
                            optional: true,
                            description: "Any pool parameters for the database connection must be specified as " +
                                "key-value pairs.",
                            defaultValue: "null"
                        },
                        {
                            name: "table.name",
                            optional: true,
                            description: "The name with which the event table should be persisted in the store." +
                                " If no name is specified via this parameter, the event table is persisted with " +
                                "the same name as the Siddhi table.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        },
                        {
                            name: "field.length",
                            optional: true,
                            description: "The number of characters that the values for fields of the 'STRING' type in" +
                                " the table definition must contain. Each required field must be provided as a " +
                                "comma-separated list of key-value pairs in the [field.name:length] format." +
                                "If this is not specified, the default number of characters specific to the database type is considered.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        }
                    ]
                },
                {
                    name: "jndi-resource",
                    parameters: [
                        {
                            name: "jndi.resource",
                            optional: false,
                            description: "The name of the JNDI resource through which the connection is attempted. " +
                                "If this is found, the pool properties described above are not taken into account and " +
                                "the connection is attempted via JNDI lookup instead.",
                            defaultValue: ""
                        },
                        {
                            name: "pool.properties",
                            optional: true,
                            description: "Any pool parameters for the database connection must be specified as " +
                                "key-value pairs.",
                            defaultValue: "null"
                        },
                        {
                            name: "table.name",
                            optional: true,
                            description: "The name with which the event table should be persisted in the store." +
                                " If no name is specified via this parameter, the event table is persisted with " +
                                "the same name as the Siddhi table.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        },
                        {
                            name: "field.length",
                            optional: true,
                            description: "The number of characters that the values for fields of the 'STRING' type in" +
                                " the table definition must contain. Each required field must be provided as a " +
                                "comma-separated list of key-value pairs in the [field.name:length] format." +
                                "If this is not specified, the default number of characters specific to the database type is considered.",
                            defaultValue: "The table name defined in the Siddhi App query."
                        }

                    ]

                }
            ],
            services:   {
                workspace:  {
                   endpoint: window.location.protocol + "//" + window.location.host + '/editor/workspace'
                },
                deploymentConfigs: {
                    endpoint: window.location.protocol + "//" + window.location.host + '/editor/deploymentConfigs'
                }
            },
            alerts: {
                container: "#alerts-container",
                cssClass: {
                }
            },
            menu_bar: {
                container: "#menu-bar-container",
                menu_group: {
                    menu_item: {
                        cssClass: {
                            label: "menu-label pull-left",
                            shortcut: "shortcut-label pull-right",
                            active: "menu-item-enabled",
                            inactive: "menu-item-disabled"
                        }
                    },
                    cssClass: {
                        group: "menu-group file-menu-group",
                        menu: "dropdown-menu file-dropdown-menu",
                        toggle: "dropdown-toggle"
                    }
                },
                cssClass: {
                    menu_bar: "dropdown-menu file-dropdown-menu",
                    active: "active",
                    menu: "dropdown-menu",
                    item: "dropdown-toggle",
                    menu_group: "menu-group"
                }
            },
            tool_bar: {
                container: "#tool-bar-container",
                runIconBtn: '.run_btn',
                debugIconBtn: '.debug_btn',
                stopIconBtn: '.stop_btn',
                revertIconBtn: '.revert_btn',
                commandRun: {
                    id: "run_icon-siddhi-app"
                },
                commandDebug: {
                    id: "debug_icon-siddhi-app"
                },
                commandStop: {
                    id: "stop_icon-siddhi-app"
                },
                commandRevert: {
                    id: "revert_icon-siddhi-app"
                }
            },
            event_simulator : {
                container: ".sidebar-left",
                activateBtn: '.event-simulator-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: "#right-container",
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 380,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: "event-simulator",
                cssClass: {
                    container: 'event-simulator-container ws-tab-pane'
                },
                command: {
                    id: "toggle-event-simulator",
                    shortcuts: {
                        mac: {
                            key: "command+shift+i",
                            label: "\u2318\u21E7I"
                        },
                        other: {
                            key: "ctrl+shift+i",
                            label: "Ctrl+Shift+I"
                        }
                    }
                },
                commandAddSingleSimulatorForm: {
                    id: "add-single-simulator"
                }
            },
            operator_finder : {
                container: '.sidebar-left',
                activateBtn: '.operator-finder-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: '#right-container',
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 380,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: 'operator-finder',
                command: {
                    id: 'toggle-operator-finder',
                    shortcuts: {
                        mac: {
                            key: 'command+shift+x',
                            label: '\u2318\u21E7X'
                        },
                        other: {
                            key: 'ctrl+shift+x',
                            label: 'Ctrl+Shift+X'
                        }
                    }
                }
            },
            workspace_explorer: {
                container: ".sidebar-left",
                activateBtn: '.workspace-explorer-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: "#right-container",
                command: {
                    id: "toggle-file-explorer",
                    shortcuts: {
                        mac: {
                            key: "command+shift+e",
                            label: "\u2318\u21E7E"
                        },
                        other: {
                            key: "ctrl+shift+e",
                            label: "Ctrl+Shift+E"
                        }
                    }
                },
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 290,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: 'workspace-explorer',
                cssClass: {
                    container: 'workspace-explorer-container ws-tab-pane',
                    openFolderButton: 'btn  btn-default open-folder-button'
                }
            },
            settings_dialog:{
                selector: "#modalSettings",
                submit_button: "#saveSettingsButton"
            },
            sample_event_dialog:{
                selector: "#modalSampleEvent",
                submit_button: "#generateSampleEventButton"
            },
            query_store_api:{
                selector: "#modalStoreQuery",
                submit_button: "#executeQuery"
            },
            output_controller: {
                container: "#console-container",
                activateBtn: '.output-console-activate-btn',
                openConsoleBtn: '.open-console-btn',
                closeConsoleBtn: '.close-console-btn',
                cleanConsoleBtn: '.clear-console-btn',
                headers: {
                    // relative selector within container for tab controller
                    container: ".output-headers",
                    cssClass: {
                        list: 'output output-consoles',
                        item: 'console-header',
                        active: 'active'
                    }
                },
                consoles: {
                    container: ".output-console-content-wrapper",
                    console: {
                        template: "#console-template",
                        cssClass: {
                            console: 'output-pane',
                            console_active: 'active',
                            console_close_btn: 'close closeConsole pull-right'
                        }
                    }
                },
                command: {
                    id: "toggle-output-console",
                    shortcuts: {
                        mac: {
                            key: "command+shift+k",
                            label: "\u2318\u21E7K"
                        },
                        other: {
                            key: "ctrl+shift+k",
                            label: "Ctrl+Shift+K"
                        }
                    }
                },
                commandClearConsole: {
                    id: "clear-output-console",
                    shortcuts: {
                        mac: {
                            key: "command+shift+l",
                            label: "\u2318\u21E7L"
                        },
                        other: {
                            key: "ctrl+shift+l",
                            label: "Ctrl+Shift+L"
                        }
                    }
                }
            },
            debugger_instance: {
                container: '.debug-container',
                resumeBtn: '.debugger-resume-btn',
                stepoverBtn: '.debugger-stepover-btn',
                stopBtn: '.debugger-stop-btn',
                commandResume: {
                    id: "debugger-resume",
                    shortcuts: {
                        mac: {
                            key: "shift+r",
                            label: "\u21E7R"
                        },
                        other: {
                            key: "shift+r",
                            label: "Shift+R"
                        }
                    }
                },
                commandStepOver: {
                    id: "debugger-stepover",
                    shortcuts: {
                        mac: {
                            key: "shift+r",
                            label: "\u21E7R"
                        },
                        other: {
                            key: "shift+r",
                            label: "Shift+R"
                        }
                    }
                }
            },

            tab_controller: {
                container: "#tabs-container",
                headers: {
                    // relative selector within container for tab controller
                    container: ".tab-headers",
                    cssClass: {
                        list: 'nav nav-tabs',
                        item: 'nav-tab-header',
                        active: 'active'
                    }
                },
                tabs: {
                    // relative selector within container for tab controller
                    container: ".tab-content",
                    tab: {
                        template: "#tab-template",
                        cssClass: {
                            tab: 'ws-tab-pane',
                            tab_active: 'active',
                            run_state: 'run-state',
                            debug_state: 'debug-state',
                            tab_close_btn: 'close closeTab pull-right'
                        },
                        das_editor: {
                            canvas: {
                                // relative selector within container for a tab
                                container: '.canvas-container'
                            },
                            loading_screen: {
                                // relative selector within container for a tab
                                container: '.loading-screen'
                            },
                            source: {
                                // relative selector within container for a tab
                                container: '.source-container'
                            },
                            debug: {
                                // relative selector within container for a tab
                                container: '.debug-container'
                            },
                            toggle_controls: {
                                // relative selector within container for a tab
                                container: '.toggle-controls-container',
                                toggle_view: '.toggle-view-button'
                            },
                            notifications: {
                                container: '#notification-container'
                            },
                            design_view: {
                                // relative selector within container for a tab
                                container: '.design-view-container',
                                grid_container: '.grid-container',
                                new_drop_timeout: 3000,
                                tool_palette: {
                                    // relative selector within container for design view
                                    container: ".tool-palette-container",
                                    toolGroup: {
                                        tool: {
                                            containment_element: '#tabs-container',
                                            cssClass: {
                                                dragContainer: 'tool-drag-container',
                                                disabledIconContainer: 'disabled-icon-container',
                                                disabledIcon: 'fw fw-lg fw-block tool-disabled-icon'
                                            }
                                        }
                                    }
                                }
                            },
                            source_view: {
                                // relative selector within container for a tab
                                container: '.source-view-container',
                                theme: 'ace/theme/twilight',
                                font_size: '14pt',
                                scroll_margin: '20',
                                mode: 'ace/mode/siddhi'
                            },
                            cssClass:{
                                text_editor_class: 'text-editor',
                                outer_box: 'outer-box',
                                svg_container: 'svg-container',
                                outer_div: 'panel panel-default container-outer-div',
                                panel_title: 'panel-title',
                                panel_icon: 'panel-icon',
                                service_icon: 'fw fw-service fw-inverse',
                                struct_icon: 'fw fw-struct fw-inverse',
                                connector_icon:'fw fw-connector fw-inverse',
                                function_icon:'fw fw-function fw-inverse',
                                main_function_icon:'fw fw-main-function fw-inverse',
                                title_link:'collapsed canvas-title',
                                panel_right_icon:'fw fw-up pull-right right-icon-clickable collapser hoverable',
                                head_div: 'canvas-heading',
                                body_div:'panel-collapse collapse',
                                canvas: 'panel-body collapse in',
                                design_view_drop: 'design-view-hover',
                                canvas_container: 'canvas-container',
                                canvas_top_controls_container: 'canvas-top-controls-container',
                                canvas_top_control_package_define: 'package-definition-wrapper',
                                canvas_top_control_packages_import: 'package-imports-wrapper',
                                canvas_top_control_constants_define: 'constants-definition-wrapper',
                                panel_delete_icon: 'fw fw-delete pull-right right-icon-clickable delete-icon hoverable',
                                panel_annotation_icon: 'fw fw-annotation pull-right right-icon-clickable hoverable',
                                panel_args_icon: 'fw fw-import pull-right right-icon-clickable hoverable',
                                type_mapper_icon: 'fw fw-type-converter fw-inverse',
                                type_struct_icon: 'fw fw-dgm-service fw-inverse',
                                canvas_heading_new: 'canvas-heading-new'
                            },
                            dialog_boxes:{
                                parser_error: "#parserErrorModel"
                            }
                        }
                    }
                }
            },
            export_dialog: {
                selector: "#openExportModal"
            }
        };
        app = new Application(config);
        app.render();
        app.displayInitialView();
        app.runInitialGuide();
    });



</script>
</body>

</html>
