<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you 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.
-->

<div class="page-header" style="height: 50px;">
    <!--Project-->
    <form class="navbar-form navbar-left" style="margin-top: 0px !important;" ng-if="userService.isAuthorized()">
        <div class="form-group" >
            <a class="btn btn-xs btn-info" href="projects" tooltip="Manage Project"><i class="fa fa-gears"></i></a>
          <a class="btn btn-xs btn-primary" ng-if="userService.hasRole('ROLE_ADMIN')" style="width: 29px" tooltip="Add Project" ng-click="toCreateProj()">
                <i class="fa fa-plus"></i>
            </a>
        </div>
    </form>
</div>
<div class="row">
    <div class="{{fullsql?'hidden':'col-xs-3'}}">
        <div ng-include src="'partials/projects/project_table_tree.html'" ng-controller="ProjectMetaCtrl"></div>
    </div>
    <div class="{{fullsql?'col-xs-12':'col-xs-9'}}">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="{{mainPanel=='query'?'active':''}}">
                    <a ng-click="mainPanel='query'" style="cursor: pointer">New Query</a>
                </li>
                <li class="{{mainPanel=='saved'?'active':''}}">
                    <a ng-click="mainPanel='saved';listSavedQueries()" style="cursor: pointer">Saved Queries</a>
                </li>
                <li class="{{mainPanel=='cached'?'active':''}}">
                    <a ng-click="mainPanel='cached';listCachedQueries()" style="cursor: pointer">Query History</a>
                </li>
            </ul>

            <div ng-show="mainPanel=='query'">
                <form name="query_panel">
                    <section>
                        <div style="height: 220px;" ui-ace="{
                                      useWrapMode : true,
                                      showGutter: true,
                                      theme:'chrome',
                                      mode: 'sql',
                                      onLoad: aceLoaded,
                                      onChange: aceChanged
                                    }" ng-model="queryString" required></div>
                    </section>

                    <p class="blue">
                        Tips: Ctrl+Shift+Space or Alt+Space(Windows), Command+Option+Space(Mac) to list keywords in query box.
                    </p>
                    <div class="pull-left">
                        <h4>
                            Project: <span class="label label-info">{{projectModel.getSelectedProject()}}</span>
                            &nbsp&nbsp Cube:
                            <select chosen ng-model="specifyCube"
                                    ng-options="cube for cube in cubeItems"
                                    style="display: inline-flex; width: 250px"
                                    data-placeholder="Filter ..."
                                    class="chosen-select">
                              <option value=""> -- Choose Cube -- </option>
                            </select>
                            <i class="fa fa-info-circle" title="Specify cube to query"  kylinpopover template="specifyCubeTip.html" placement="right"></i>
                        </h4>
                    </div>
                    <div class="pull-right">
                        <input type="checkbox" ng-model="hasLimit" ng-change="changeLimit()">
                        <label>LIMIT</label>
                        <input type="text" style="width:100px;" class="inline form-control" ng-model="rowsPerPage" ng-pattern="/^\d+$/" ng-blur="checkLimit()" ng-disabled="!hasLimit" />
                        <button class="btn btn-sm btn-primary" ng-click="submitQuery()" ng-disabled="query_panel.$invalid">
                            Submit
                        </button>
                    </div>
                </form>
            </div>

            <div ng-show="mainPanel=='saved'">
                <div ng-if="savedQueries.length==0">
                    <div no-result text="No Saved Query."></div>
                </div>
                <table class="table table-hover table-striped list">
                    <tr ng-repeat="query in savedQueries | reverse track by $index"
                        ng-if="$index >= (savedQueries.curPage-1)*savedQueries.perPage && $index < savedQueries.curPage*savedQueries.perPage"
                        class="query-content">
                        <td>
                            <div>
                                <label>SQL Name:</label>&nbsp;&nbsp;&nbsp;<b style="font-size: 14px">{{query.name}}</b>
                                <!--<span style="color: #808080;line-height: 25px" class="pull-right">Saved At: {{query.createdDate}}</span>-->
                            </div>
                            <div ng-if="query.project">
                                <label>Project: </label>
                                <span style="color: gray">{{query.project}}</span>
                            </div>
                            <div ng-if="query.description">
                                <label>Description</label>
                                <blockquote style="font-size: 12px;margin-bottom: 0px;padding: 6px 10px;">
                                    {{query.description}}
                                </blockquote>
                            </div>

                            <div class="pull-right">
                                <button class="btn btn-default btn-xs" ng-click="submitQuery(query.sql, query.project)"><i class="fa fa-refresh"></i>
                                    Resubmit
                                </button>
                                <button class="btn btn-default btn-xs" ng-click="removeSavedQuery(query.id)"><i
                                        class="fa fa-times">
                                    Remove</i>
                                </button>
                            </div>
                            <div class="form-group" style="margin: 0px">
                                SQL:
                                <label ng-click="query.show=!query.show" style="padding:5px">
                                    <i ng-if="!query.show" class="fa fa-angle-double-down"></i>
                                    <i ng-if="query.show" class="fa fa-angle-double-right"></i>
                                </label>

                                <section style="padding-bottom: 20px;" ng-if="query.show">
                                    <div ui-ace="{
                              useWrapMode : true,
                              showGutter: true,
                              theme:'chrome',
                              mode: 'sql',
                              onLoad: aceLoaded,
                              onChange: aceChanged
                            }"
                                         ng-model="query.sql" ng-change="setQueryString(query.sql)"></div>
                                </section>
                            </div>
                        </td>
                    </tr>
                </table>
                <pagination total-items="savedQueries.length" page="savedQueries.curPage"
                    items-per-page="savedQueries.perPage"
                    max-size="5" class="pull-right" first-text="First" last-text="Last" boundary-links="true" rotate="false"></pagination>
            </div>

            <div ng-show="mainPanel=='cached'">
                <div ng-if="cachedFilterQueries.length==0">
                    <div no-result text="No Query History."></div>
                </div>
                <table class="table table-hover table-striped list">
                    <tr ng-repeat="query in cachedFilterQueries | reverse track by $index"
                        ng-if="$index >= (cachedFilterQueries.curPage-1)*cachedFilterQueries.perPage && $index < cachedFilterQueries.curPage*cachedFilterQueries.perPage">
                        <td>
                            <span style="color: #808080;line-height: 25px">Queried At: {{query.savedAt | utcToConfigTimeZone}} </span><span ng-if="query.project">in Project: {{query.project}}</span>

                            <div class="pull-right">
                                <button class="btn btn-default btn-xs" ng-click="submitQuery(query.sql, query.project)"><i class="fa fa-refresh"></i>
                                    Resubmit
                                </button>
                                <button class="btn btn-default btn-xs" ng-click="removeQuery()"><i class="fa fa-times">
                                    Remove</i>
                                </button>
                            </div>
                            <div class="form-group" style="margin: 0px">
                                SQL:
                                <label ng-click="query.show=!query.show" style="padding:5px">
                                    <i ng-if="!query.show" class="fa fa-angle-double-down"></i>
                                    <i ng-if="query.show" class="fa fa-angle-double-right"></i>
                                </label>

                                <section style="padding-bottom: 20px" ng-if="query.show">
                                    <div ui-ace="{
                              useWrapMode : true,
                              showGutter: true,
                              theme:'chrome',
                              mode: 'sql',
                              onLoad: aceLoaded,
                              onChange: aceChanged
                            }"
                                         ng-model="query.sql" ng-change="setQueryString(query.sql)"></div>
                                </section>
                            </div>
                        </td>
                    </tr>
                </table>
                <pagination total-items="cachedFilterQueries.length" items-per-page="cachedFilterQueries.perPage" max-size="5"
                    page="cachedFilterQueries.curPage" class="pull-right" first-text="First" last-text="Last" boundary-links="true" rotate="false"></pagination>
            </div>
        </div>

        <div class="clearfix"></div>
        <div class="hr hr24 hr-dotted"></div>

        <h3 class="kylin_title">
            Results
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs" style="font-size: 13px;padding: 5px 0px 5px 0px"
                    ng-if="queries.length > 0">
                    <li ng-repeat="query in queries | filter: {status: statusFilter} | orderBy:'startTime'"
                        class="{{(query==curQuery)? 'active':''}}">
                        <span>
                            <button class="btn {{(query==curQuery)?'active':''}} btn-default btn-xs" style="width: 50px"
                                    ng-click="refreshCurQuery()">
                                {{$index+1}}
                                <span ng-if="query.status=='failed'">
                                    <i style="color: #f0ad4e" class="fa fa-exclamation-triangle"></i>
                                </span>
                                <span ng-if="query.status=='success'">
                                    <i style="color: #5cb85c" class="fa fa-check"></i>
                                </span>
                                <span ng-if="query.status=='executing'">
                                    <i style="color: #5bc0de" class="fa fa-cog fa-spin"></i>
                                </span>
                            </button>
                            <button class="btn btn-default btn-xs" ng-click="removeResult(query)"><i class="fa fa-times"></i></button>
                        </span>
                        <span style="padding: 0px 5px 0px 5px"> | </span>
                    </li>

                    <div class="pull-right" style="font-size: 13px">
                        Status:
                        <select ng-init="statusFilter=statusList[0].value" ng-model="statusFilter"
                                ng-options="status.value as status.name for status in statusList"></select>
                    </div>
                </ul>
            </div>
        </h3>

        <div ng-if="!curQuery">
            <div no-result text="No Query Result."></div>
        </div>

        <div ng-include="'partials/query/query_detail.html'"></div>
    </div>
</div>

<div ng-include="'partials/projects/project_create.html'"></div>

<script type="text/ng-template" id="specifyCubeTip.html">
  <p style="font-size: 8px;">Specify the cube to query, other cubes in current project won't be queried.</p>
</script>
