<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/remarkable/remarkable.min.js"></script>
    <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.min.css"/>
    <link href="editor/commons/lib/theme-wso2-2.0.0/css/theme-wso2.min.css" rel="stylesheet" type="text/css"/>
    <link href="editor/commons/lib/jquery-ui_v1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="editor/commons/lib/js-tree-v3.3.8/themes/default/style.min.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 rel="stylesheet" type="text/css" href="editor/commons/css/operator-finder.css"/>
    <link rel="stylesheet" type="text/css" href="editor/commons/css/template-deploy.css"/>
    <link href="editor/commons/css/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
    <link href="editor/commons/css/simulator.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="editor/commons/css/notification.css"/>
    <link rel="stylesheet" type="text/css"
          href="editor/commons/lib/perfect-scrollbar-1.4.0/css/perfect-scrollbar.css"/>
    <link rel="stylesheet" type="text/css" href="editor/commons/css/pagination.css"/>

    <!--Enjoy Hint CSS-->

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

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

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

    <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/css/error-handler.css"/>
    <link rel="stylesheet" type="text/css" href="editor/commons/css/welcome-screen.css"/>
    <link rel="stylesheet" type="text/css" href="editor/css/async-api-def.css"/>
    <link rel="stylesheet" type="text/css" href="editor/css/async-api-font.css"/>

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

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

    <!-- SmartWizard CSS -->
    <link rel="stylesheet" type="text/css" href="editor/commons/lib/smartWizard/css/smart_wizard.css"/>
    <link rel="stylesheet" type="text/css" href="editor/css/export-docker-kubernetes.css"/>
    <link rel="stylesheet" type="text/css" href="editor/css/cron-generator.css"/>
    <title>Streaming Integrator Tooling</title>
</head>

<body class="sticky-footer">
<div id="mavenVersion" hidden>${project.version}</div>
<!-- Start: header -->
<header class="header header-default">
    <!-- Start: header - logo, title & menu-bar -->
    <div id="header-container" class="container-fluid">
        <div class="pull-left brand float-remove-xs text-center-xs">
            <a href="#">
                <img src="/editor/commons/lib/theme-wso2-2.0.0/images/logo-inverse.svg" alt="WSO2" title="WSO2"
                     class="logo">
                <h1>Streaming Integrator Tooling</h1>
            </a>
        </div>
        <div id="menu-bar-container" class="menu-bar pull-left">
        </div>
        <div id="tool-bar-container" class="tool-bar pull-left">
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="Start" class="run_btn">
                <i class="fw fw-start"></i>
            </a>
            <a href="#" data-placement="bottom" data-toggle="tooltip" title="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 id="query-guide-link-container" class="tool-bar pull-right"></div>
    </div>
    <!-- End: header - logo, title & menu-bar -->
</header>
<!-- End: header -->

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

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

            <!-- Start: left container -->
            <div class="left-container">
                <!-- Start: left tool bar -->
                <div class="left-tool-bar" data-toggle="tooltip">
                    <ul class="nav nav-tabs" role="tablist">
                        <li>
                            <a href="#workspace-explorer" role="tab" data-toggle="tab"
                               class="workspace-explorer-activate-btn">
                                <i class="fw fw-file-browse fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#event-simulator" role="tab" data-toggle="tab"
                               class="event-simulator-activate-btn">
                                <i class="fw fw-event-simulator fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#output-console" class="output-console-activate-btn open-console-btn">
                                <i class="fw fw-console fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#operator-finder" class="operator-finder-activate-btn" role="tab"
                               data-toggle="tab" data-placement="right" data-container="body">
                                <i class="fw fw-extensions fw-lg"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#template-deploy" class="template-deploy-activate-btn" role="tab"
                               data-toggle="tab" data-placement="right" data-container="body">
                                <i class="fw fw-variable 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="init-loading-screen" style="display: block;">
                            <i class="fw fw-wso2-logo fw-pulse fw-2x"></i>
                            <p></p>
                            <p>Loading...</p>
                        </div>
                        <div class="tab-headers tab-headers-bar" style="display: none;"></div>
                        <div id="tab-content-wrapper" class="grid-background" style="display: none;">
                            <div class="tab-content tab-content-default"></div>
                        </div>
                    </div>
                    <!-- End: service tabs -->
                </div>
                <!-- End: service tabs wrapper row -->
                <div class="splitter-horizontal"></div>
                <div id="console-container" class="col-sm-12 hide console-container">
                    <div class="output-headers output-headers-bar">
                        <button type="button" class="close pull-right output-console-activate-btn close-console-btn"><i
                                class="fw fw-cancel"></i></button>
                    </div>
                    <div class="console-wrap">
                        <div class="output-console-content-wrapper">
                            <div class="consoleToolbar">
                                <div class="consoleIcon">
                                    <a href="#" class="clear-console-btn" data-placement="right" data-toggle="tooltip"
                                       title="Clear">
                                        <i class="fw fw-clear"></i>
                                    </a>
                                </div>
                                <div class="consoleIcon">
                                    <a href="#" class="reload-console-btn console-sync-btn-disable" aria-disabled="true"
                                       data-placement="right" data-toggle="tooltip"
                                       title="Reload">
                                        <i class="fw fw-sync"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End: service tabs wrapper container-->

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

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

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

<!-- Start: Template for a tab -->
<div style="display: none" id="tab-template">
    <!-- Start: Tab -->
    <div>
        <!-- Start: Debug Container -->
        <div class="debug-container" style="display: none">
        </div>
        <!-- End: Debug Container -->
        <!-- Start: Canvas Container -->
        <div class="canvas-container">
        </div>
        <!-- End: Canvas Container -->
        <!-- Start: loading-screen -->
        <div class="loading-screen" style="display: none">
            <i class="fw fw-wso2-logo fw-pulse fw-2x"></i>
        </div>
        <!-- End: loading-screen -->
        <!-- Start: Source Container -->
        <div id="siddhi-editor" class="source-container">
        </div>
        <!-- End Source Container -->
        <!-- Start: ETL Wizard Container -->
        <div id="etl-wizard-container" class="etl-wizard-container">
        </div>
        <!-- End: ETL Wizard Container -->
        <!-- Start: design view container -->
        <div class="design-view-container" style="display: none">
            <!-- Start: tool-palette -->
            <div id="tool-palette-container" class="tool-palette-container"></div>
            <!-- End: tool-palette -->
            <!-- Start: design-view-grid-container -->
            <div id="grid-container" class="grid-container"></div>
            <!-- Start: pop-over-design-view -->
            <div class="hide pop-over">
                <div class="popover-body">
                    <div class="popover-alert-icon"><i class="fw fw-alert"></i></div>
                    <div class="popover-body-message"><span>Are you sure you want to delete this element?<br>This
                        cannot be undone.</span>
                    </div>
                </div>
                <div class="popover-footer">
                    <button type="button" class="btn btn-xs btn_yes" tabindex="-1">Yes</button>
                    <button type="button" class="btn btn-xs btn_no" tabindex="-1">No</button>
                </div>
            </div>
            <!-- End: pop-over-design-view -->
            <div class="overlayed-container"></div>
            <!-- End: design-view-grid-container -->
        </div>

        <div class="async-api-view-container" id="async-api-view-container" style="display: none">
            <div class="async-api-view-yaml-container" id="async-api-view-yaml-container-id">
            </div>
            <div class="async-api-view-spec-container"></div>
            <div class='clear-fix'></div>
            <div class="async-api-generator-container"></div>
        </div>
        <!-- End: design view container -->

        <!--    Start:  ETL Task View Container    -->
        <div class="etl-task-wizard-container" style="display: none;">
            <div class="popup-backdrop" style="display: none">
                <!--    Start:  function parameter popover template etl task wizard    -->
                <div class="hide function-param-popover">
                    <div class="popover" role="tooltip">
                        <div class="arrow"></div>
                        <h3 class="hide popover-header"></h3>
                        <div class="popover-body"></div>
                    </div>
                </div>
                <!--    Stop:  function parameter popover template etl task wizard    -->
                <div style="" class="mapping-generation-dialog" >
                    <div  class="dialog-heading" style="">

                    </div>
                    <div class="dialog-body" style="">
                        <div class="hide">
                            <div class="popover-content">
                                <a href="#">
                                    <i class="fw fw-clear"></i> Clear expression
                                </a>
                            </div>
                        </div>
                        <div class="expression-container">

                        </div>
                        <div class="generation-content" style="">
                            <div style="width: 100%; margin-bottom: 10px; color: rgb(71,71,71);">
                                Select operand to add to expression
                            </div>
                            <div class="node-container" style="">
                                <ul class="node-category">

                                </ul>
                            </div>
                            <div class="att-fun-op-container" style="">
                                <div class="select-function-operator-attrib" style="display: none">
                                    <div style="border-bottom: 1px solid #333;" class="input-group">
                                        <input placeholder="Type here to search" class="att-fun-op-search-box" style="background-color: #fff; color: #555; border-color: #c5c5c5; width: 100%; border: none; outline: none; background-color: transparent; line-height: 30px;" type="text" class="form-control"/>
                                        <span style="background: transparent; padding: 3px 12px; border: none;" class="input-group-addon">
                                            <i class="fw fw-search"></i>
                                        </span>
                                    </div>
                                    <div class="attrib-selector-containers" style="">
                                    </div>
                                </div>
                                <div class="select-function-format-container" style="display: none">
                                    <ul>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align: right" class="btn-tray">
                        <button style="" class="btn btn-default">Cancel</button>
                        <button style="" class="btn btn-primary btn-expression-submit">Submit</button>
                    </div>
                </div>
            </div>
            <div class="etl-task-wizard-canvas">
                <div class="listContainer inputs" style="">
                    <div class="heading" style="">
                        Input Attributes
                    </div>
                    <div>
                        <ul class="attributeList">
                        </ul>
                    </div>
                </div>
                <div class="listContainer outputs" style="">
                    <div class="heading" style="">
                        <div style="width: 100%">
                            Output Attributes
                        </div>
                        <div class="btn-select-all" style="display: none">
                            Select *
                        </div>
                    </div>
                    <ul class="attributeList">
                    </ul>
                </div>
            </div>
        </div>
        <!--    End:  ETL Task View Container    -->

        <!-- Start: Toggle Controls Container -->
        <div class="toggle-controls-container">
            <div class="btn toggle-view-button">
                <i class="fw fw-design-view fw-rotate-90"></i>
                <span class="toggle-button-text" id="design_view_btn">Design View</span>
            </div>
            <button class="btn wizard-view-button" id="btn-wizard-view">Wizard View</button>
            <button class="btn async-api-add-update-button" id="btn-add-update-async-btn">Add API</button>
            <button class="btn async-api-view-button" id="asyncbtn-asyncapi-view">Async API View</button>
            <button class="btn asyncbtn-to-code-view" id="asyncbtn-to-code-view">Code View</button>
        </div>
        <!-- End: Toggle Controls Container  -->
    </div>
    <!-- End: Tab -->
</div>
<!-- End: Template for service tab -->
<div class="hidden">
    <div class="siddhi-app-list">
        <div class="siddhi_app_mode_config clearfix">
            <div class="clearfix">
                <div class="col-md-6">
                    <h5>Siddhi Apps</h5>
                </div>
                <div class="col-md-6">
                    <h5>Run/Debug Mode</h5>
                </div>
            </div>
            <div class="clearfix">
                <label class="siddhi_app_name col-md-6">SmartHomePlan</label>
                <div class="switch-toggle switch-ios col-md-6">
                    <input id="week11" name="view10" checked="" type="radio">
                    <label for="week11" onclick="">Run</label>
                    <input id="month13" name="view10" type="radio">
                    <label for="month13" onclick="">Debug</label>
                    <a></a>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

                        <hr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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


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

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

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

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

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

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

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


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

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

                    <input type="file">


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

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

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

<!-- Modal -->
<div id="run_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">Start the Siddhi Application</h4>
            </div>
            <div class="modal-body">
                <p>Following Siddhi apps needs to start to simulate.&hellip;</p>
                <div class="siddhi-app-list"></div>
            </div>
            <div class="modal-footer" style="clear:both;">
                <button type="button" class="btn btn-primary" data-dismiss="modal" name="confirm">Start Simulation
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal" name="cancel">Cancel</button>
            </div>
            </div>
    </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Handlebar template for template deploy side-panel content -->
<script id="template-deploy-side-panel-template" type="text/x-handlebars-template">
    <div id="template-deploy" role="tabpanel" class="ws-tab-pane template-deploy">
        <div class="content">
            <h3>Templated Variables</h3>

            <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">
                    <button type="button" class="btn btn-primary template-refresh-btn" id="refreshAttributes">
                        <i class="fw fw-refresh fw-lg"></i>
                    </button>

                    <div id="used-template-attr-container" class="form-group hidden">
                        <label>
                            Template Variables used in Apps
                        </label>
                        <table class="table table-responsive" id="template-attr-table">
                            <thead>
                            <th width="100%">
                                <label>Template Attributes</label>
                            </th>
                            </thead>
                            <tbody id="template-attr-table-body">

                            </tbody>
                        </table>
                    </div>


                    <div id="unused-template-attr-container" class="form-group hidden">

                        <label>
                            Unused Template variables
                        </label>
                        <a id="template-clear-all" class="pull-right">Clear All</a>
                        <table class="table table-responsive" id="unused-template-attr-table">
                            <thead>
                            <th width="85%">

                            </th>
                            <th width="15%">

                            </th>
                            </thead>
                            <tbody id="unused-template-attr-table-body">

                            </tbody>
                        </table>
                    </div>

                    <div id="template-attr-info" class="form-group">
                        <table class="table table-responsive">
                            <thead>
                            <th width="100%">
                            </th>
                            </thead>
                            <tbody>
                            <tr>
                                <td><label style="opacity: 0.6">No template attributes are defined</label></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </form>
        </div>
    </div>
</script>

<!-- Handlebar template for operator finder search results -->
<script id="operators-search-results-template" type="text/x-handlebars-template">
    {{#if hasQuery}}
    {{#if hasResults}}
    {{#each results}}
    <div class="result less" data-index="{{index}}">
        <div class="heading">
            <h4 data-placement="right" data-container="body" title="{{fqn}}">
                <i class="fw fw-extensions" title="{{type}}"></i> {{{htmlFqn}}}
            </h4>
            <a href="#" class="more-info">
                <i class="fw fw-info"></i>
            </a>
        </div>
        <p class="description">{{{description}}}</p>
        <div class="icon-bar">
            <a href="#" class="expand-description">More...</a>
            &nbsp;&nbsp;

            <!-- Installed -->
            {{#if install}}
            <span id="InstallBtnId">
                <span class="extension-not-install"> {{install}}</span>
                &nbsp;&nbsp;
                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                   title="Click here to un-install"
                   class="extension-un-install-btn">
                    <i class="fw fw-cancel"></i>
                </a>
            </span>
            {{/if}}

            <!-- Not Installed -->
            {{#if notInstall}}
            <span id="notInstallBtnId">
                <span class="extension-not-install"> {{notInstall}}</span>
                <!-- Manually installable dependencies are available -->
                {{#if extension.manuallyInstall}}
                <a href="#" data-extension-names="{{extension.extensionInfo.name}}"
                   title="Click here for installation instructions"
                   class="partial-extension-install-btn">
                    <i class="fw fw-warning"></i>
                </a>
                {{/if}}
                <!-- Auto downloadable dependencies are available -->
                {{#if extension.autoDownloadable}}
                &nbsp;&nbsp;
                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                   title="Click here to install"
                   class="extension-install-btn">
                    <i class="fw fw-download"></i>
                </a>
                {{/if}}
            </span>
            {{/if}}

            <!-- Partially Installed -->
            {{#if partialInstall}}
            <span id="partialBtnId">
                <span class="extension-not-install"> {{partialInstall}}</span>
                <!-- Manually installable dependencies are available -->
                {{#if extension.manuallyInstall}}
                <a href="#" data-extension-names="{{extension.extensionInfo.name}}"
                   title="Click here for installation instructions"
                   class="partial-extension-install-btn">
                    <i class="fw fw-warning"></i>
                </a>
                {{/if}}
                <!-- Auto downloadable dependencies are available -->
                {{#if extension.autoDownloadable}}
                &nbsp;&nbsp;
                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                   title="Click here to install"
                   class="extension-install-btn">
                    <i class="fw fw-download"></i>
                </a>
                {{/if}}
            </span>
            {{/if}}

            <!-- Restart Required -->
            {{#if restartRequired}}
            <span id="restartRequiredBtn">
                <span class="extension-not-install"> {{restartRequired}}</span>
                &nbsp;&nbsp;
                <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
                   title="Restart required"
                   class="restart-required-btn">
                    <i class="fw fw-alert"></i>
                </a>
            </span>
            {{/if}}

            <ul>
                <li>
                    <span class="copy-status-msg" style="display: none">Copied to Clipboard!</span>
                    <a href="#" title="Copy to Clipboard" class="copy-to-clipboard">
                        <i class="fw fw-copy"></i>
                    </a>
                </li>
                <li>
                    <a href="#" title="Add to Source" class="add-to-source">
                        <i class="fw fw-add"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="alert alert-danger">
        Sorry! No results found.
    </div>
    {{/if}}
    {{else}}
    <ul>
        {{#each namespaces}}
        <li><a href="#" class="namespace-entry">{{this}}</a></li>
        {{/each}}
    </ul>
    {{/if}}
</script>

<!-- Handlebar template for operator finder's operator more details -->
<script id="operator-details-template" type="text/x-handlebars-template">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <i class="fw fw-cancel about-dialog-close"></i>
        </button>
        <h3 class="modal-title title-bold" id="operator-name" data-index="{{index}}">{{fqn}}</h3>
        <hr/>
    </div>
    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
        <div class="operator-details-content nano">
            <div class="nano-content extension">
                <div class="extension-description">{{{extensionDescription}}}</div>
                <br/>
                {{#if hasSyntax}}
                <h4>Syntax</h4>
                <div id="syntax">
                    <table>
                        <tbody>
                        {{#each syntax}}
                        <tr>
                            <td>{{syntax}}</td>
                            <td id="float-right"><a href="#" title="Copy to Clipboard" class="copy-to-clipboard"
                                                    data-clip-index={{@index}}><i
                                    class="fw fw-copy"></i></a></td>
                        </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </div>
                <br/>
                {{/if}}
                {{#if hasParameters}}
                <h4>Parameters </h4>
                <div class="extension-table">
                    {{{ parameterTable }}}
                </div>
                <br/>
                {{/if}}
                {{#if hasReturnAttributes}}
                <h4>Return Attributes: </h4>
                <div class="extension-table">
                    {{{ returnTable }}}
                </div>
                <br/>
                {{/if}}
                {{#if hasExamples}}
                <h4>Examples</h4>
                <div class="example scrollbar">
                    {{{combinedExamples}}}
                </div>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input type="text" class="copyable-text"/>
        <span class="copy-status-msg" style="display: none">Copied to Clipboard!</span>
        {{#if enableAddToSource}}
        <button type="button" class="btn btn-primary" id="btn-add-to-source">
            <i class="fw fw-add"></i> Add to Source
        </button>
        {{/if}}
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</script>

<script id="etl-wizard-finalize-template" type="text/x-handlebars-template">
    <div style="padding: 15px;">
        {{#if status}}
        <h2>Successful!</h2>

        <p style="margin-bottom: 15px;">The Siddhi app saved as '{{fileName}}'!</p>
        <p>Click follow options if you want to test and proceed with deploying the Siddhi app.</p>

        <div class="etl-wizard-final-actions">
            <button class="btn btn-default" id="btn-test">Test...</button>
            <button class="btn btn-default" id="btn-export-docker">Export as Docker...</button>
            <button class="btn btn-default" id="btn-export-k8s">Export to Kubernetes...</button>
            <button class="btn btn-default" id="btn-deploy">Deploy to Worker...</button>
        </div>
        {{else}}
        <h2>Unable to save the Siddhi app!</h2>

        <p>The following error occurred while saving the Siddhi app.</p>
        <p>{{errorMessage}}</p>
        {{/if}}

    </div>
</script>

<!-- Export Dialog -->
<div class='modal fade' id='openExportModal' tabindex='-1' role='dialog'>
    <div class='modal-dialog' role='document'>
        <iframe name="export-download" style="display: none;"></iframe>
        <div class='modal-content export-dialog'>
            <div class='modal-header'>
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                    <i class='fw fw-cancel about-dialog-close'></i>
                </button>
                <h4 class='modal-title export-dialog-title' id='initialHeading'>Exporting Siddhi Apps For Docker</h4>
                <hr class='export-dialog-hr'>
            </div>
            <div class='modal-body'>
                <div id='export-form' class="clearfix">
                    <ul id="form-steps" class="docker_export_header">
                        <li><a href="#step-1" class="link-disabled">Step 1<br/><small>Select Siddhi Apps</small></a>
                        </li>
                        <li><a href="#step-2" class="link-disabled">Step 2<br/><small>Template Siddhi Apps</small></a>
                        </li>
                        <li><a href="#step-3" class="link-disabled">Step 3<br/><small>Update Streaming Integrator<br/>Configurations</small></a>
                        </li>
                        <li><a href="#step-4" class="link-disabled">Step 4<br/><small>Populate Template
                            <br/>Arguments</small></a></li>
                    </ul>
                    <div id="form-containers">
                        <div id="step-1" class="export-selector">
                            <div class='export-siddhi-app-list' id='siddhi-app-list' style='display: block'>
                                <div class="kube-config-row" id="sp-name-input-row">
                                    <div class="clearfix">Siddhi Process Name</div>
                                    <input type="text" class="export-file-dialog-form-control siddhi-process-name-input"
                                           id="sp-name-input-field" placeholder="sample-siddhi-process">
                                </div>
                                <div id='select-siddhi-app' class='step-description openDockerWizardError-container'>
                                    Select Siddhi Apps to export
                                </div>
                                <div class='form-group'>
                                    <div class='export-dialog-form-scrollable-block-list'>
                                        <div id='siddhi-apps-tree'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-2">
                            <div class="step-description-text"></div>
                            <div id='siddhi-app-template-container-id'
                                 style='display: block'>
                            </div>
                        </div>
                        <div id="step-3">
                            <div class="step-description-text"></div>
                            <div class="dropdown" id="siddhi-config-main-dropdown-id" align="right">
                                <button class="btn btn-default btn-circle" id="deployment-config-add-button"
                                        type="button" data-toggle="dropdown">
                                    <i class="fw fw-add"></i>
                                </button>
                                <ul class="dropdown-menu kube-persistence-right-dropdown" role="menu"
                                    id="siddhi-config-dropdown-id">
                                    <li><a href="#" id="data-sources" class="dropdown-list-element">Data Sources</a>
                                    </li>
                                    <li><a href="#" id="metrics" class="dropdown-list-element">Metrics</a></li>
                                    <li><a href="#" id="extensions" class="dropdown-list-element">Extensions</a></li>
                                    <li><a href="#" id="references" class="dropdown-list-element">References</a></li>
                                    <li><a href="#" id="transports" class="dropdown-list-element">Transports</a></li>
                                </ul>
                            </div>
                            <div id='config-template-container-id' style='display: block'>
                            </div>
                        </div>
                        <div id="step-4" class="export-selector">
                            <div id="fill-template-container-id">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Cron Generator Dialog-->
<div class='modal fade' id='cronGenerator' tabindex='-1' role='dialog'>
    <div class='modal-dialog cron-generator' 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 cron-generator-title' id='initheading'>Schedule Configuration</h4>
                <hr class='cron-generator-hr'>
            </div>
            <div class='modal-body'>
                <div class="container-fluid">
                    <div id='corn-form' class="clearfix">
                        <ul class="nav nav-tabs" style="background:#3c3a3a;" id="cronTabs">
                            <li id="basicTab" class="active" style="width:25%;"><a data-toggle="tab" href="#cron-basic">
                                <strong>Basic</strong></a>
                            </li>
                            <li id="regularTab" style = "width:25%;"><a data-toggle="tab" href="#cron-regular">
                                <strong>Regular Interval</strong></a>
                            </li>
                            <li id="predefineTab" style = "width:25%;"><a data-toggle="tab" href="#cron-predefined">
                                <strong>Predefined Time</strong></a>
                            </li>
                            <li id="advancedTab" style = "width:25%;"><a data-toggle="tab" href="#cron-advanced">
                                <strong>Advanced</strong></a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="cron-basic" class="tab-pane" style="margin:20px 0px;">
                                <div id="basic-content" class="clearfix">
                                    <select id="basic-cron-list" class="form-control" style="width:50%;">
                                        <option value="0 * * * * ?">Every minute</option>
                                        <option value="0 0 * * * ?">Every hour</option>
                                        <option value="0 0 12 * * ?">Every day at noon</option>
                                        <option value="0 0 12 ? * SUN">Every week on Sunday at noon</option>
                                        <option value="0 0 12 1 * ?">On the First of every month at noon</option>
                                        <option value="0 0 12 1 1 ?">On the First of January of every year at noon
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div id="cron-regular" class="tab-pane" style="margin:10px 0px;">
                                <div id="cronRegular" class="clearfix">
                                    <div class="col-xs-12">
                                        <div id="cronEverySecond" class="col-xs-2" style="padding:0px;width:12%">
                                            <input id="everySecond" type="radio" name="cronRegularButton">
                                            <label for="everySecond"> Second </label>
                                        </div>
                                        <div id="cronEveryMinute" class="col-xs-2" style="padding:0px;width:12%">
                                            <input id="everyMinute" type="radio" name="cronRegularButton">
                                            <label for="everyMinute"> Minute </label>
                                        </div>
                                        <div id="cronEveryHour" class="col-xs-2" style="padding:0px;width:12%">
                                            <input id="everyHour" type="radio" name="cronRegularButton">
                                            <label for="everyHour"> Hour </label>
                                        </div>
                                        <div id="cronEveryDay" class="col-xs-2" style="padding:0px;width:12%">
                                            <input id="everyDay" type="radio" name="cronRegularButton">
                                            <label for="everyDay"> Day </label>
                                        </div>
                                    </div>
                                    <div class = "col-xs-12">
                                        <div id="everySelectValues" class="col-xs-2" style="padding:0px;width:12%;">
                                            <select id="selectListValues" class="form-control" onfocus="this.size=4;"
                                                    onblur="this.size=1;" onchange="this.size=1; this.blur();"
                                                    style="margin:5px 0px;">
                                            </select>
                                        </div>
                                        <div id="TimeForRegularDay" class="col-xs-4">
                                            <div id="timeForDayOption">
                                                <label> Time </label>
                                                <i class="fw fw-info" title=" Time in 24hour format "></i>
                                                <input type="text" id="timeForEveryDay" value="12:00" class="form-control"
                                                       style="margin:0px 15px;width:40%;" readonly/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="cron-predefined" class="tab-pane" style="margin:20px 0px;">
                                <div id="cronPredefined" class="clearfix">
                                    <div id="timeForPredefineTab" class="col-xs-12">
                                        <div id="defineTime">
                                            <label> Time </label>
                                            <i class="fw fw-info" title=" Time in 24hour format "></i>
                                            <input type="text" id="predefinedtime" value="12:30" class="form-control"
                                                   style="margin:0px 15px;width:15%" readonly/>
                                            <input id="predefineEveryDay" type="checkbox" name="predefineEveryDay"
                                                   style="margin:15px 5px;">&nbsp;&nbsp;
                                            <label for="predefineEveryDay" > Everyday </label>
                                        </div>
                                    </div>
                                    <div id="valuesOfDays" class="col-xs-12" style="margin:10px 0px;">
                                        <div class="col-xs-3" style="width:11%;padding-left:0px;">
                                            <input id="sunday" type="checkbox" name="weekDays" value="SUN">
                                            <label for="sunday"> Sunday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:13.8%;">
                                            <input id="monday" type="checkbox" name="weekDays" value="MON">
                                            <label for="monday"> Monday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:13.8%;">
                                            <input id="tuesday" type="checkbox" name="weekDays" value="TUE">
                                            <label for="tuesday"> Tuesday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:16.5%;">
                                            <input id="wednesday" type="checkbox" name="weekDays" value="WED">
                                            <label for="wednesday"> Wednesday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:14.5%;">
                                            <input id="thursday" type="checkbox" name="weekDays" value="THU">
                                            <label for="thursday"> Thursday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:12.5%;">
                                            <input id="friday" type="checkbox" name="weekDays" value="FRI">
                                            <label for="friday"> Friday </label>
                                        </div>
                                        <div class="col-xs-3" style="width:14.5%;">
                                            <input id="saturday" type="checkbox" name="weekDays" value="SAT">
                                            <label for="saturday"> Saturday </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="cron-advanced" class="tab-pane" style="margin:20px 0px;">
                                <div id="advancedCron" class="clearfix">
                                    <div class="col-xs-12">
                                        <div class="col-xs-2" style="text-align:center;padding-left:0px;width:15%;">
                                            <input id="second" class="form-control" type="text" value="*">
                                            <label for="second"> Second </label>
                                            <i class="fw fw-info"
                                               title="Allowed characters : 0-59, Special characters : ,/*- "></i>
                                        </div>
                                        <div class="col-xs-2" style="text-align:center">
                                            <input  id="minute" class="form-control" type="text" value="*" >
                                            <label for="minute"> Minute </label>
                                            <i class="fw fw-info"
                                               title="Allowed characters : 0-59, Special characters : ,/*- "></i>
                                        </div>
                                        <div class="col-xs-2" style="text-align:center">
                                            <input id="hour" class="form-control" type="text" value="*">
                                            <label for="hour"> Hour </label>
                                            <i class="fw fw-info"
                                               title="Allowed characters : 0-23, Special characters : ,/*- "></i>
                                        </div>
                                        <div class="col-xs-2" style="text-align:center">
                                            <input id="dayMonth" class="form-control" type="text" value="*">
                                            <label for="dayMonth">Day (month)</label>
                                            <i class="fw fw-info"
                                               title="Allowed characters : 1-31,L,W,LW,Special characters : ,/*?- "></i>
                                        </div>
                                        <div class="col-xs-2" style="text-align:center">
                                            <input id="month" class="form-control" type="text" value="*">
                                            <label for="month"> Month </label>
                                            <i class="fw fw-info"
                                               title=" Allowed characters : 1-12 or JAN-DEC, Special characters : ,/*- "></i>
                                        </div>
                                        <div class="col-xs-2" style="text-align:center">
                                            <input id="dayWeek" class="form-control" type="text" value="?">
                                            <label for="dayWeek">Day (week)</label>
                                            <i class="fw fw-info"
                                               title=" Allowed characters: 1-7 or SUN-SAT, Special characters : ,?/*- "></i>
                                        </div>
                                    </div>
                                    <div class="col-xs-10">
                                        <ul class="error-message" id="errorMsg" style="margin:2px 0px;"></ul>
                                    </div>
                                    <div class = col-xs-12">
                                        <div class="col-xs-3" style="padding:0px;width:16.8%;">
                                            <label for="expression"> Expression in Quartz </label>
                                        </div>
                                        <div class="col-xs-8">
                                            <input id="expression" value="* * * * * ?" class="form-control"
                                                   style="margin:10px 0px;width:50%;text-align:left;" />
                                        </div>
                                        <div class="col-xs-3" style="padding:0px;width:16.8%;">
                                            <label for="output"> Expression in English </label>
                                        </div>
                                        <div class="col-xs-6">
                                            <label id="output"> Every second </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="footer_btn" id="cronfooter">
                    <button id="saveButton" type="button" class="btn btn-primary"> Save </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Common steps for Docker and K8s export -->
<div id="docker-config-common-step" class="export-selector">
    <div class='docker-config-container' id='docker-config-container-id'>
        <div class='step-description' id="config-description">Select export mode:</div>
        <div class="docker-config-form">
            <div id='missing-docker-config-error-message' class='alert alert-danger' hidden>
                Required to fill Docker configurations
            </div>
            <div id='missing-docker-file-name-error-message' class='alert alert-danger' hidden>
                Required to fill the export file name
            </div>
            <div id='docker-name-upper-error' class='alert alert-danger' hidden>
                Docker image tag cannot contain uppercase letters.
            </div>
            <input class="docker-checkbox" type="checkbox" name="download-docker-artifacts"
                   id="download-docker-artifacts" value="download"><label class="label-description"
                                                                          id="download-docker-artifacts-label">Download
            artifacts</label><br>
            <div class="docker-details-form" id="file-name-for-docker-parent" hidden>
                <div class="docker-details-row">
                    <label class="clearfix">Export file name:</label>
                    <input class="export-file-dialog-form-control" type="text" name="username"
                           id="file-name-for-docker">
                </div>
            </div>
            <input class="docker-checkbox" type="checkbox" name="push-docker-image" id="docker-push-checkbox"
                   value="push"><label class="label-description">Push to Docker registry</label><br>
            <div class="docker-details-form" id="docker-details" hidden>
                <div class="docker-details-row">
                    <label class="clearfix">* Docker image:</label>
                    <input class="file-dialog-form-control-mini-input" type="text"
                           id="docker-img-name-input-field-registry" placeholder="<DOCKER_REGISTRY_NAME>">
                    &nbsp; / &nbsp;
                    <input class="file-dialog-form-control-mini-input" type="text"
                           id="docker-img-name-input-field-image" placeholder="<IMAGE_NAME>">
                </div>
                <div class="docker-details-row">
                    <label class="clearfix">* Docker username:</label>
                    <input class="export-file-dialog-form-control" type="text" name="username" id="username">
                </div>
                <div class="docker-details-row">
                    <label class="clearfix">* Docker password:</label>
                    <input class="export-file-dialog-form-control" type="password" name="password" id="password">
                </div>
                <div class="docker-details-row">
                    <label class="clearfix">* Email:</label>
                    <input class="export-file-dialog-form-control" type="text" name="email" id="email">
                </div>
                <br/>
            </div>
        </div>
    </div>
</div>

<!-- K8s export unique steps -->
<div id="k8s-path-step-5" class="export-selector">
    <div class='docker-config-container' id='docker-image-type-container-id'>
        <div class='step-description' id="docker-image-type">Select Docker image:</div>
        <div class="docker-config-form">
            <div id='k8s-path-missing-docker-build-type-error-message' class='alert alert-danger' hidden>
                Required to fill Docker Configurations
            </div>
            <div id='k8s-path-missing-docker-build-type-upper-error' class='alert alert-danger' hidden>
                Docker Image Tag cannot contain uppercase letters.
            </div>
            <input class="docker-checkbox" type="radio" name="docker-image-type-name" id="docker-image-type-tobuild"
                   value="tobuild" checked="checked">
            <label class="label-description">Build custom Docker image with extensions and artifacts</label>
            <br>
            <input class="docker-checkbox" type="radio" name="docker-image-type-name" id="docker-image-type-existing"
                   value="existing">
            <label class="label-description">Use an existing Docker image</label>
            <br>
            <div class="docker-details-form" id="k8s-path-docker-image-name-form" hidden>
                <div class="docker-details-row">
                    <label class="clearfix">* Docker Image:</label>
                    <input class="export-file-dialog-form-control" type="text" id="built-docker-image-name-input-field"
                           placeholder="<DOCKER_REGISTRY_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="k8s-path-step-6" class="export-selector">
    <div class='export-siddhi-app-list' id='k8s-path-additional-bundles-list'>
        <div class='step-description'>Add additional libraries</div>
        <div class='form-group'>
            <div class='export-dialog-form-scrollable-block-list'>
                <div id='k8s-path-bundles-tree'></div>
            </div>
        </div>
    </div>
</div>
<div id="k8s-path-step-8" class="export-selector">
    <div class="export-kube-config-container" id="kubernetes-configuration-step-id">
        <div class="step-description">Add deployment configuration</div>
        <div class="kube-config-form">
            <div class="kube-config-row">
                <div class="kube-config-sub-row">
                    <div class="clearfix">Persistence</div>
                    <div class="kube-input-group" id="persistent-select">
                        <select class="kube-persistence-dropdown" id="kube-persistence-dropdown-id">
                            <option value="database-persistence" selected>Database Persistence</option>
                            <option value="file-system-persistence">File System Persistence</option>
                            <option value="amazon-s3-persistence">Amazon S3 Persistence</option>
                            <option value="disable-persistence">Disable State Persistence</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Docker export unique steps -->
<div id="docker-path-step-5" class="export-selector">
    <div class='docker-config-container' id='docker-image-type-container-id'>
        <div class='step-description' id="docker-image-type">Select Docker image:</div>
        <div class="docker-config-form">
            <div id='k8s-path-missing-docker-build-type-error-message' class='alert alert-danger' hidden>
                Required to fill Docker Configurations
            </div>
            <div id='k8s-path-missing-docker-build-type-upper-error' class='alert alert-danger' hidden>
                Docker Image Tag cannot contain uppercase letters.
            </div>
            <input class="docker-checkbox" type="radio" name="docker-image-type-name" id="docker-image-type-existing"
                   value="existing">
            <label class="label-description">Use an existing Docker image</label>
            <br>
            <div class="docker-details-form" id="k8s-path-docker-image-name-form" hidden>
                <div class="docker-details-row">
                    <label class="clearfix">* Docker Image:</label>
                    <input class="export-file-dialog-form-control" type="text" id="built-docker-image-name-input-field"
                           placeholder="<DOCKER_REGISTRY_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="docker-path-step-6" class="export-selector">
    <div class='export-siddhi-app-list' id='docker-additional-bundles-list'>
        <div class='step-description'>Add additional libraries</div>
        <div class='form-group'>
            <div class='export-dialog-form-scrollable-block-list'>
                <div id='docker-path-bundles-tree'></div>
            </div>
        </div>
    </div>
</div>

<!-- Form Dialog -->
<div id="FormWizard" tabindex="-1">
    <div class="modal-content form-wizard">
        <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>
        </div>
        <div class="modal-body">
            <div id="form-modal" class="clearfix sw-main sw-theme-default">
            </div>
        </div>
    </div>
</div>

<!-- Form Dialog -->
<div id="ETLWizardForm" tabindex="-1">
    <div class="wizard-form-content">
        <div class="header-content">
            <input class="etl-flow-name" id="" type="text" value="UntitledETLTaskFlow"/>
            <div class="header-steps">
                <div id="step-1" class="step-item">
                    Step 1
                    <br/>
                    <small>Configure Source</small>
                </div>
                <div id="step-2" class="step-item">
                    Step 2
                    <br/>
                    <small>Process Input Data</small>
                </div>
                <div id="step-3" class="step-item">
                    Step 3
                    <br/>
                    <small>Configure Destination</small>
                </div>
                <div id="step-4" class="step-item">
                    Step 4
                    <br/>
                    <small>Process Output Data</small>
                </div>
                <div id="step-5" class="step-item">
                    Step 5
                    <br/>
                    <small>Data Mapping</small>
                </div>
                <div id="step-6" class="step-item">
                    Step 6
                    <br/>
                    <small>Finalize</small>
                </div>
            </div>
        </div>
        <div style="" class="body-content">
        </div>
        <div class="footer-content">
            <hr style="padding-bottom: 5px" class="form-wizard-hr">
            <div style="position: relative; display: flex;" class="btn-tray">
                <button class="btn btn-default back-btn">Back</button>
                <button class="btn btn-default next-btn" style="margin-left: auto;">Next</button>
                <button class="btn btn-default save-btn" style="margin-left: auto;">Save & Finalize</button>
                <button class="btn btn-default close-btn" style="margin-left: auto;">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Generate Stream UI -->
<div class='modal fade' id='generateStreamConfigModal' tabindex='-1' role='dialog' aria-tydden='true'>
    <div class='modal-dialog file-dialog' 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'>Generate Stream</h4>
                <hr class='style1'>
            </div>
            <div class='modal-body'>
                <div class='container-fluid'>

                    <form class='form-horizontal streamGen' onsubmit='return false'>

                        <div class='panel-group' id='accordion'>
                            <div class='panel panel-default'>
                                <div class='form-group'>
                                    <label class='radio-inline'>
                                        <input type='radio' id='idFromFile' name='selection' value='fromFile'
                                               style='display: block;margin-left: -20px;margin-top: 1;'>
                                        From File
                                    </label>
                                    <label class="radio-inline">
                                        <input type='radio' id='idFromDatabase' name='selection' value='fromFile'
                                               style='display: block;margin-left: -20px;margin-top: 1;'>
                                        From Database
                                    </label>
                                </div>

                                <div id='generateFromFileContent' class='panel-collapse collapse in'>
                                    <div class='panel-body'>
                                        <div class='driving-license-kind'>
                                            <div class='form-group'>
                                                <input type='file' id='fileSelector' class='fileSelector'
                                                       name='fileSelector'
                                                       style='padding-top: 10px;color: transparent'/>
                                            </div>
                                        </div>
                                    </div>
                                    <div id='fileTypeSelect' class='panel-collapse collapse in'>
                                        <div class='panel-body'>
                                            <div class='form-group'>
                                                <input type='text' name='fileName' id='fileName' disabled='true'
                                                       class='form-control fileName'
                                                       style="float: left; width: 70%; margin-right:15px "/>
                                                <select id="fileType" name='fileType'
                                                        class='form-control fileType' aria-required='true'
                                                        style="width: calc(30% - 15px)">
                                                    <option value='-1' selected="selected">Select File Type</option>
                                                    <option value="text/csv">CSV</option>
                                                    <option value="application/json">JSON</option>
                                                    <option value="text/xml">XML</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id='fromJsonFile' class='panel-collapse collapse in from-file-section'
                                             data-file-type='application/json'>
                                            <div class='panel-body'>
                                                <form id="jsonForm">
                                                    <div class='form-group'>
                                                        <label>
                                                            Stream Name <span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control streamName'
                                                               id='streamNameJson'
                                                               value="tempStream"
                                                               name='streamName'
                                                               aria-required='true'>
                                                    </div>
                                                    <div class='form-group'>
                                                        <label>
                                                            Enclosing Element<span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control'
                                                               id='jsonEnclosingElement'
                                                               value='$'
                                                               name='enclosing-element'
                                                               aria-required='true'>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                        <div id='fromXmlFile' class='panel-collapse collapse in from-file-section'
                                             data-file-type='text/xml'>
                                            <div class='panel-body'>
                                                <form id="xmlForm">
                                                    <div class='form-group'>
                                                        <label>
                                                            Stream Name <span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control streamName'
                                                               id='streamNameXml'
                                                               value="tempStream"
                                                               name='streamName'
                                                               aria-required='true'>
                                                    </div>
                                                    <div class='form-group'>
                                                        <label>
                                                            Namespace
                                                        </label>
                                                        <input type='text' class='form-control'
                                                               id='nameSpaceOfXml'
                                                               name='nameSpaceOfXml'
                                                               aria-required='true'></div>
                                                    <div class='form-group'>
                                                        <label>
                                                            Enclosing Element<span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control'
                                                               id='enclosingElementXML'
                                                               value="//"
                                                               name='enclosingElementXML'
                                                               aria-required='true'>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                        <div id='fromCsvFile' class='panel-collapse collapse in from-file-section'
                                             data-file-type='text/csv'>
                                            <div class='panel-body'>
                                                <form id="csvForm">
                                                    <div class='form-group'>
                                                        <label>
                                                            Stream Name <span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control streamName'
                                                               id='streamNameCsv'
                                                               value="tempStream"
                                                               name='streamName'
                                                               aria-required='true'>
                                                    </div>
                                                    <div class='form-group'>
                                                        <label>
                                                            Delimiter <span class='required_astrix'> *</span>
                                                        </label>
                                                        <input type='text' class='form-control'
                                                               id='delimiterOfCSV'
                                                               value=","
                                                               name='delimiterOfCSV'
                                                               aria-required='true'>
                                                    </div>
                                                    <div class='form-group'>
                                                        <label>
                                                            Is Header Exists<span class='required_astrix'>*</span>
                                                        </label>
                                                        <select id="isHeaderExists" name='isHeaderExists'
                                                                class='form-control' aria-required='true'>
                                                            <option value="true">True</option>
                                                            <option value="false">False</option>
                                                        </select>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div id='generateFromDBContent' class='panel-collapse collapse in'>
                                    <div style='padding-bottom: 10px'>
                                        <div class='dbsourceConfigForm checkPanel' data-type='db'
                                             style='display: block;'>
                                            <label class='radio-inline'>
                                                <input type='radio' id='idInline' name='dbConfig' value='fromInline'
                                                       style='display: block'>
                                                Inline Configuration
                                            </label>
                                            <label class='radio-inline'>
                                                <input type='radio' id='idDatasource' name='dbConfig'
                                                       value='fromDatasource' style='display: block'>
                                                Provide Datasource
                                            </label>

                                        </div>
                                    </div>

                                    <div id='inlineContent' class='panel-collapse collapse in'>
                                        <div class='panel-body'>
                                            <form id="inlineForm">
                                                <div class='form-group'>
                                                    <label>
                                                        Stream Name <span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='text' class='form-control streamName'
                                                           id='streamNameInlineDB'
                                                           value="tempStream"
                                                           name='streamName'
                                                           aria-required='true'>
                                                </div>
                                                <div class='form-group'>
                                                    <label>
                                                        Database URL<span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='text'
                                                           class='form-control required-for-db-connection'
                                                           id='dataSourceLocation_1'
                                                           value='jdbc:mysql://[machine-name/ip]:[port]/[database-name]'
                                                           name='data-source-location'
                                                           aria-required='true'
                                                           required>
                                                </div>
                                                <div class='form-group'>
                                                    <label>
                                                        Username<span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='text'
                                                           class='form-control required-for-db-connection'
                                                           id="inlineUsername"
                                                           name='username' value='root'
                                                           aria-required='true' required></div>
                                                <div class='form-group'>
                                                    <label>
                                                        Password<span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='password'
                                                           id="inlinePass"
                                                           class='form-control required-for-db-connection'
                                                           name='password' value='root'
                                                           aria-required='true' required></div>
                                                <div class='form-group'>
                                                    <button id='loadInlineDbConnection' type='button'
                                                            class='btn btn-secondary'
                                                            name='loadDbConnection'>
                                                        Retrieve Tables
                                                    </button>
                                                    <span class='helper connectionSuccessMsg'></span>
                                                </div>
                                            </form>
                                            <div class='form-group'>
                                                <label>
                                                    Table name<span class='required_astrix'> *</span>
                                                </label>
                                                <select id="inlineTableSelector" name='table-name'
                                                        class='tableSelector form-control' aria-required='true'>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div id='datasourceContent' class='panel-collapse collapse in'>
                                        <div class='panel-body'>
                                            <form id="datasourceForm">
                                                <div class='form-group'>
                                                    <label>
                                                        Stream Name <span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='text' class='form-control streamName'
                                                           id='streamNameDataSource'
                                                           value="tempStream"
                                                           name='streamName'
                                                           aria-required='true' required>
                                                </div>
                                                <div class='form-group'>
                                                    <label>
                                                        Datasource Name<span class='required_astrix'> *</span>
                                                    </label>
                                                    <input type='text'
                                                           class='form-control required-for-db-connection'
                                                           id='dataSourceNameId'
                                                           name='dataSourceNameId'
                                                           aria-required='true'></div>
                                                <div class='form-group'>
                                                    <button type='button' class='btn btn-secondary'
                                                            id='loadDatasourceDbConnection'
                                                            name='loadDbConnection'>
                                                        Retrieve Tables
                                                    </button>
                                                    <span class='helper connectionSuccessMsg'></span>
                                                </div>
                                                <div class='form-group'>
                                                    <label>
                                                        Table name<span class='required_astrix'> *</span>
                                                    </label>
                                                    <select id="datasourceTableSelector" name='table-name'
                                                            class='tableSelector form-control' aria-required='true'>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div id="modal-error" class='panel-collapse collapse in'>
                <div id='generateStreamConfigModalError-container' class='generateStreamConfigModalError-container'>
                    <label id="generateStreamConfigModalError-label"
                           class="alert alert-danger alert_gen"><strong>Error</strong> Something went wrong. </label>
                </div>
            </div>
            <div class="modal-footer">
                <div class='footer_btn' id='button-container'>
                    <button id='generateButton' type='button' class='btn btn-primary' disabled>Generate
                    </button>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="editor/commons/lib/requirejs-2.3.6/require.min.js"></script>
<script>
    //Load common code that includes config, then load the app
    //logic for this page. Do the requirejs calls here instead of
    //a separate file so after a build there are only 2 HTTP
    //requests instead of three.
    requirejs.config({waitSeconds: 0});
    requirejs(['./editor/app'], function (common) {
        //js/common sets the baseUrl to be js/ so
        //can just ask for 'app/main1' here instead
        //of 'js/app/main1'
        requirejs(['app/app-main']);
    });
</script>
</body>
</html>
