<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<div layout="row" style="top:250px;">
     <div layout="column" layout-padding  style="background-color:#ffffff" layout-fill>
         <div layout="row" layout-fill layout-align="center center">
             <md-button class="md-raised " ng-click="vm.toggleFunctionHistory()" >History<span ng-if="vm.functionHistory.length>0" style="padding-left:10px;">({{vm.functionHistory.length}})</span></md-button>
             <md-button class="md-raised" ng-click="vm.toggleSampleMenu()">Sample</md-button>
             <span flex="10"></span>
             <md-menu>
                 <md-button aria-label="Open formula menu" class="md-icon-button md-primary" ng-click="$mdOpenMenu($event)">
                     <md-icon md-menu-origin>functions</md-icon>
                 </md-button>
                 <md-menu-content width="2">
                     <md-menu-item>
                         <md-button ng-click="vm.setFormula('groupBy(COLUMN).agg(count(COLUMN), sum(COLUMN))')">Aggregate</md-button>
                     </md-menu-item>
                     <md-menu-item>
                         <md-button ng-click="vm.setFormula('when(CONDITION, VALUE).when(CONDITION, VALUE).otherwise(VALUE)')">Conditional</md-button>
                     </md-menu-item>
                     <md-menu-item>
                         <md-button ng-click="vm.setFormula('groupBy(COLUMN).pivot(&quot;COLUMN&quot;).agg(count(COLUMN))')">Pivot</md-button>
                     </md-menu-item>
                     <md-menu-item>
                         <md-button ng-click="vm.setFormula('sum(COLUMN).over(orderBy(COLUMN))')">Window</md-button>
                     </md-menu-item>
                 </md-menu-content>
             </md-menu>
             <div rows="1" class="formula-editor" ui-codemirror="{ onLoad : vm.codemirrorLoaded }"  ng-model="vm.currentFormula" ui-codemirror-opts="vm.codemirrorOptions"></div>
             <md-button class="md-raised md-accent" ng-click="vm.onAddFunction()" ng-disabled="!vm.currentFormula">Add</md-button>
             <span flex></span>
             <thinkbig-step-buttons style="padding:inherit" can-continue="vm.isValid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>

             </div>
         <div layout="column" layout-fill layout-align="center center" browser-height browser-height-scroll-y="false" browser-height-offset="265">
             <div class="visual-query-function-history" layout="column" ng-show="vm.isShowFunctionHistory">
                 <md-subheader class="md-no-sticky">Function History
                     <div layout="row">
                         <md-button class="md-icon-button " ng-click="vm.onUndo()" ng-disabled="vm.canUndo() == false">
                             <ng-md-icon icon="undo"></ng-md-icon>
                         </md-button>
                         <md-button class="md-icon-button " ng-click="vm.onRedo()" ng-disabled="vm.canRedo() == false">
                             <ng-md-icon icon="redo"></ng-md-icon>
                         </md-button>
                     </div>
                 </md-subheader>
                 <md-list>
                     <md-list-item ng-repeat-start="history in vm.functionHistory">
                         <md-icon>{{history.icon}}</md-icon>
                         <p title="{{history.name}}">{{history.name}}</p>
                         <!--<md-icon ng-click="vm.dropHistory($index)" class="md-secondary">delete</md-icon>-->
                     </md-list-item>
                     <md-divider ng-repeat-end></md-divider>
                 </md-list>
             </div>
             <div class="visual-query-sample-menu" layout="column" ng-show="vm.isShowSampleMenu">
                 <md-subheader class="md-no-sticky">
                     Sampling</md-subheader>
                     <md-input-container layout="row">
                         <label>Fraction</label>
                         <input type="number" ng-model="vm.sparkShellService.sample" ng-model-options="{getterSetter: true}">
                     </md-input-container>
                     <md-input-container layout="row">
                         <label>Limit</label>
                         <input type="number" ng-model="vm.sparkShellService.limit" ng-model-options="{getterSetter: true}">
                     </md-input-container>
                     <md-checkbox layout="row" ng-model="vm.sparkShellService.shouldLimitBeforeSample" ng-model-options="{getterSetter: true}" aria-label="Should sample?">Limit before sampling</md-checkbox>
                     <div layout="row"><md-button class="md-primary md-raised" ng-click="vm.isShowSampleMenu = false; vm.query();">Update</md-button></div>

             </div>

         <script type="text/ng-template" id="visual-query/grid-header-cell">
             <div role="columnheader" ng-class="{ 'sortable': sortable }">
                <div role="button" tabindex="0" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus" col-index="renderIndex" title="TOOLTIP">
                    <span class="ui-grid-header-cell-label" ui-grid-one-bind-id-grid="col.uid + '-header-text'">
                        <span class="ui-grid-header-cell-title">{{ col.displayName }}</span>
                        <span ng-if="col.colDef.headerTooltip != col.colDef.displayName">{{ col.colDef.headerTooltip }}</span>
                    </span>
                    <span ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'" ui-grid-visible="col.sort.direction"
                          aria-label="{{ getSortDirectionAriaLabel() }}">
                        <i ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }"
                           title="{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 )  : null}}"
                           aria-hidden="true"></i>
                        <sub ui-grid-visible="isSortPriorityVisible()" class="ui-grid-sort-priority-number">
                            {{col.sort.priority + 1}}</sub>
                    </span>
                 </div>
                 <md-menu ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"
                          class="ui-grid-column-menu-button" md-position-mode="target-right target" md-offset="0 42"
                          ng-init="delegate = col.colDef.delegate">
                     <md-button aria-label="{{i18n.headerCell.aria.columnMenuButtonLabel}}" class="md-icon-button"
                                ng-click="$mdOpenMenu()">
                         <i class="ui-grid-icon-angle-down" aria-hidden="true">&nbsp;</i>
                     </md-button>
                     <md-menu-content class="visual-query-column-menu">
                         <md-menu-item ng-if="col.sort.direction != 'asc'">
                             <md-button ng-click="delegate.sortColumn('asc', col, grid)">
                                 <i class="ui-grid-icon-sort-alt-up">&nbsp;</i> Sort Ascending
                             </md-button>
                         </md-menu-item>
                         <md-menu-item ng-if="col.sort.direction != 'desc'">
                             <md-button ng-click="delegate.sortColumn('desc', col, grid)">
                                 <i class="ui-grid-icon-sort-alt-down">&nbsp;</i> Sort Descending
                             </md-button>
                         </md-menu-item>
                         <md-menu-item ng-if="col.sort.direction != null">
                             <md-button ng-click="delegate.removeSort(col, grid)">
                                 <i class="ui-grid-icon-cancel">&nbsp;</i> Remove Sort
                             </md-button>
                         </md-menu-item>
                         <md-menu-item>
                             <md-button ng-click="delegate.hideColumn(col, grid);">
                                 <i class="material-icons">remove_circle</i> Hide Column
                             </md-button>
                         </md-menu-item>
                         <md-menu-item>
                             <md-button ng-click="delegate.renameColumn(col, grid);">
                                 <i class="material-icons">mode_edit</i> Rename Column
                             </md-button>
                         </md-menu-item>
                         <md-menu-item ng-if="delegate.filters.length !== 0">
                             <md-menu>
                                 <md-button ng-click="$mdOpenMenu()">
                                     <i class="material-icons">filter_list</i> Filter
                                 </md-button>
                                 <md-menu-content class="visual-query-column-menu">
                                     <md-menu-item ng-repeat="filter in delegate.filters">
                                         <div>
                                             <i class="material-icons" ng-class="{'custom-icon': (filter.icon.length === 1)}">{{filter.icon }}</i>
                                             <md-input-container>
                                                 <label>{{ filter.label }}</label>
                                                 <input type="text" ng-model="filter.term" ng-change="delegate.validateFilter(filter)">
                                             </md-input-container>
                                         </div>
                                     </md-menu-item>
                                 </md-menu-content>
                             </md-menu>
                         </md-menu-item>
                         <md-menu-item ng-if="delegate.transforms.length !== 0">
                             <md-menu>
                                 <md-button ng-click="$mdOpenMenu()">
                                     <i class="material-icons">transform</i> Transform
                                 </md-button>
                                 <md-menu-content class="visual-query-column-menu">
                                     <md-menu-item ng-repeat="transform in delegate.transforms">
                                         <md-button ng-click="delegate.transformColumn(transform, col, grid)">
                                             <i class="material-icons" ng-class="{'custom-icon': (transform.icon.length === 1)}">{{ transform.icon }}</i> {{ transform.name }}
                                         </md-button>
                                     </md-menu-item>
                                 </md-menu-content>
                             </md-menu>
                         </md-menu-item>
                     </md-menu-content>
                 </md-menu>
             </div>
         </script>
         <script type="text/ng-template" id="visual-query/grid-row">
             <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell"
                  role="gridcell" ui-grid-cell></div>
         </script>
         <md-progress-linear md-mode="query" ng-show="vm.executingQuery && vm.queryProgress == 0"></md-progress-linear>
         <md-progress-linear md-mode="determinate" ng-value="vm.queryProgress" ng-show="vm.executingQuery && vm.queryProgress > 0"></md-progress-linear>
         <div ui-grid-auto-resize style="width:100%;height:500px;" browser-height browser-height-scroll-y="false" browser-height-offset="284" ui-grid="vm.gridOptions" ui-grid-move-columns></div>
         </div>
    </div>




</div>
