<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/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 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"/>

    <!-- 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"/>

    <title>Stream Processor Studio</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>Stream Processor Studio</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 editor 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">
                                <i class="fw fw-console 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"><i
                                class="fw fw-cancel"></i></button>
                    </div>
                    <div class="nano console-wrap">
                        <div class="output-console-content-wrapper nano-content">
                            <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 editor 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">
    </div>
</div>
<!-- End: Template for console -->
<div class="hidden">
    <div id="form-template">
        <div class="design-view-form-content">
        </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-footer">
                    <button class="btn btn-primary btn-xs yes">Yes</button>
                    <button class="btn btn-primary btn-xs no">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">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">Stream Processor 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="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="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">
                </select>
            </div>
            <div class="form-group">
                <label>
                    Stream Name
                </label>
                <select name="stream-name" class="form-control">
                </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">
            </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">
                    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">
    <h4>Attributes</h4>
    <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>
</script>

<script id = "annotation-form-template" type = "text/x-handlebars-template">
    <h4>Annotations</h4>
    <div id = "annotation-div">
        {{#if this}}
        <ul>
            {{#each this}}
                {{> recursiveAnnotation this}}
            {{/each}}
        </ul>
        {{/if}}
    </div>
    <br>
    <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}}"> {{key}}
                    <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="type-selection-form-template" type="text/template">
    {{#ifSourceOrSink id}}
        <h3>{{addTitle id}} Configuration</h3>
        <label class="clearfix"> * Type </label>
        <select id="{{id}}-type">
            <option style = "display:none" disabled selected value > -- select a type -- </option>
    {{else}}
             {{#ifId id "map"}}
                <h3> Mapping </h3>
             {{/ifId}}
              <label class="clearfix"> {{addTitle id}} Type </label>
              <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}}
        <h3> Options </h3>
        <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> {{key}}
                            </label>
                            <i class = "fw fw-info option-desc">
                                <span style = "display:none" class = "option-desc-content"> {{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"> {{key}}
                            </label>
                            <i class = "fw fw-info option-desc">
                                <span style = "display:none" class="option-desc-content"> {{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">
                        <label class = "mandatory-option-symbol"> * </label>
                        <label class = "option-name mandatory-option">
                            {{key}}
                        </label>
                        <i class="fw fw-info option-desc">
                            <span style="display:none" class="option-desc-content"> {{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">
        <h3> <i> Customized Options </i> </h3>
        <ul class = "cust-options">
            {{#each customizedOptions}}
                <li class="option">
                    <div class = "clearfix">
                        <label> option.key </label>
                        <input type="text" class="cust-option-key" value="{{key}}">
                    </div>
                    <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 id = "attribute-key-label"> Key </label> {{/if}}
                <label id = "attribute-value-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 = "readonly-attr 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 = "table-store-annotation-template" type = "text/template">
    <h4> Annotations </h4>
    <div id = "table-annotations">
            {{#each this}}
                <div class = "clearfix table-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 table-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>
</script>

<script id="window-function-parameters-template" type = "text/template">
    {{#if parameters}}
    <h3> Parameters </h3>
    <div id = "{{id}}-parameters">
    {{#each parameters}}
        <div class = "parameter" id="{{key}}-parameter">
        {{#if optional}}
            {{#if value}}
                <div class = "clearfix">
                    <label class = "parameter-name optional-parameter">
                        <input type = "checkbox" class = "parameter-checkbox" checked> {{key}}
                    </label>
                    <i class = "fw fw-info parameter-desc">
                        <span style = "display:none" class = "parameter-desc-content"> {{description}} </span>
                    </i>
                </div>
                <div class = "clearfix optional-param-content">
                    <input class = "parameter-value" type = "text" value = "{{value}}">
                </div>
            {{else}}
                <div class="clearfix">
                    <label class = "parameter-name optional-parameter">
                        <input type = "checkbox" class = "parameter-checkbox"> {{key}}
                    </label>
                    <i class = "fw fw-info parameter-desc">
                        <span style = "display:none" class="parameter-desc-content"> {{description}} </span>
                    </i>
                </div>
                <div class="clearfix optional-param-content" style ="display:none">
                    <input class = "parameter-value" type = "text" value="{{defaultValue}}">
                </div>
            {{/if}}
                <label class = "error-message"></label>
        {{else}}
            <div class="clearfix">
                <label class = "mandatory-parameter-symbol"> * </label>
                <label class = "parameter-name mandatory-parameter">
                    {{key}}
                </label>
                <i class="fw fw-info parameter-desc">
                    <span style="display:none" class="parameter-desc-content"> {{description}} </span>
                </i>
            </div>
            <div class = "clearfix">
                <input class = "parameter-value" type = "text" value = "{{value}}">
            </div>
            <label class = "error-message"></label>
        {{/if}}
        </div>
    {{/each}}
    </div>
    {{/if}}
</script>

<script id="partition-by-template" type = "text/template">
    <h4> Partition By </h4>
    <div class="clearfix">
        <label id = "partition-by-expression-label"> Expression </label>
        <label id = "partition-by-stream-name-label"> Stream Name </label>
    </div>
    <div id = "partition-by-content">
        {{#each this}}
        <div class="partition-key">
            <div class="clearfix">
                <input type="text" class="partition-by-expression" value="{{this.expression}}">
                <input type="text" class="partition-by-stream-name" value="{{this.streamName}}" readonly>
            </div>
            <label class="error-message"></label>
        </div>
        {{/each}}
    </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">
                <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 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">OK</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">Siddhi Store 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>


<!--Start: Docker Export Modal-->
<div class="modal fade modalDockerExport" id="modalDockerExport" 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="aboutDockerExportLabel">Export as Docker</h4>
                <hr class="style1">
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <form>
                    <div class="form-group">
                        <label for="dockerProfile">Profile:</label>
                        <select class="form-control" id="dockerProfile">
                            <option value="editor">Editor</option>
                            <option value="worker">Worker</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="dockerProfile">Files to be included:</label>
                        <div id="file-tree" class="docker-export-file-tree"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="exportButton"
                        disabled="disabled">Export</button>
            </div>
        </div>
    </div>
</div>

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

<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>
                <h3 class="modal-title" id="sampleEvent">Generate sample event</h3>
            </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>

<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",
            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",
            //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",
            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",
            // 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"
        },
        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'
            }
        ]
    });
    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: [
                    {
                        key: 'buffer.size',
                        defaultValue: '256',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                    {
                        key: 'workers',
                        defaultValue: '2',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                    {
                        key: 'batch.size.max',
                        defaultValue: '5',
                        class: 'mandatory-key',
                        isMandatory: true
                    },
                ]
            }
            ],
            table_predefined_annotations: [
            {
                name: "primaryKey",
                values: [{
                    value: ""
                }],
                isChecked: false
            },
            {
                name: "index",
                values: [{
                    value: ""
                }],
                isChecked: false
            }
            ],
            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"
            }
            ],
            services:   {
                workspace:  {
                   endpoint: window.location.protocol + "//" + window.location.host + '/editor/workspace'
                }
            },
            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 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"
                }
            },
            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 tab-pane',
                    openFolderButton: 'btn  btn-default open-folder-button'
                }
            },
            settings_dialog:{
                selector: "#modalSettings",
                submit_button: "#saveSettingsButton"
            },
            docker_export_dialog: {
                selector: '#modalDockerExport',
                submitButton: '#exportButton'
            },
            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',
                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: '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"
                            }
                        }
                    }
                }
            }
        };
        app = new Application(config);
        app.render();
        app.displayInitialView();
    });



</script>
</body>

</html>
