<!--
* 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 ng-controller="ModelConditionsSettingsCtrl">
  <div class="row">
    <div class="col-xs-12">
      <ng-form name="forms.model_setting_form" novalidate>

        <h3>Partition</h3>
        <div class="box-body">
          <!--Date Format-->
          <div class="form-group middle-popover">
            <div class="row">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Has separate columns for "year", "month" and "day" ?</b>  <i kylinpopover placement="right" title="Separate Date Columns" template="separateDateColumnsTip.html" class="fa fa-info-circle"></i></label>
              <div class="col-xs-12 col-sm-6">
                <toggle-switch on-label="Yes" off-label="No" ng-disabled="state.mode!=='edit'" ng-click="toggleHasSeparateDateColumns()" ng-model="partitionColumn.hasSeparateDateColumns"></toggle-switch>
              </div>
            </div>
          </div>

          <!--Partition Columns-->
          <div class="form-group" ng-if="partitionColumn.hasSeparateDateColumns">
            <div class="row middle-popover">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Date Columns</b> <i kylinpopover placement="right" title="Partition Date Columns" class="fa fa-info-circle"></i></label>
              <div class="col-xs-12 col-sm-6" ng-if="state.mode=='edit'">
                <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TABLE_FACT"
                        ng-model="selectedTables.fact"
                        ng-change="tableChange(selectedTables.fact)"
                        data-placement=""
                        ng-options="alias as alias for alias in availableFactTables" >
                  <option value="">--Select Partition Table--</option>
                </select>

                <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TABLE_FACT.YEAR"
                        ng-model="partition_ymd_columns.year_column"
                        ng-change="partitionYMDColumnChange('Y', partition_ymd_columns.year_column)"
                        data-placement=""
                        ng-options="selectedTables.fact+'.'+columns.name as columns.name for columns in getPartitonColumns(selectedTables.fact)" >
                  <option value="">--Select Partition Column for Year--</option>
                </select>
                <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TABLE_FACT.MONTH"
                        ng-model="partition_ymd_columns.month_column"
                        ng-change="partitionYMDColumnChange('M', partition_ymd_columns.month_column)"
                        data-placement=""
                        ng-options="selectedTables.fact+'.'+columns.name as columns.name for columns in getPartitonColumns(selectedTables.fact)" >
                  <option value="">--Select Partition Column for Month--</option>
                </select>
                <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TABLE_FACT.DAY"
                        ng-model="partition_ymd_columns.day_column"
                        ng-change="partitionYMDColumnChange('D', partition_ymd_columns.day_column)"
                        data-placement=""
                        ng-options="selectedTables.fact+'.'+columns.name as columns.name for columns in getPartitonColumns(selectedTables.fact)" >
                  <option value="">--Select Partition Column for Day--</option>
                </select>
              </div>
              <div class="col-xs-12 col-sm-6" ng-if="state.mode=='view'">
                     <span >
                          {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}
                     </span>
              </div>
            </div>
          </div>

          <!--Partition Column-->
          <div class="form-group" ng-if="!partitionColumn.hasSeparateDateColumns">
              <div class="row middle-popover">
                  <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Date Column</b> <i kylinpopover placement="right" title="Partition Date Column" template="partitionTip.html" class="fa fa-info-circle"></i></label>
                  <div class="col-xs-12 col-sm-6" ng-if="state.mode=='edit'">
                      <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
                              ng-model="selectedTables.fact"
                              ng-change="tableChange(selectedTables.fact)"
                              data-placement=""
                              ng-options="alias as alias for alias in availableFactTables" >
                          <option value="">--Select Partition Table--</option>
                      </select>

                      <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
                            ng-model="modelsManager.selectedModel.partition_desc.partition_date_column"
                            ng-change="partitionChange(modelsManager.selectedModel.partition_desc.partition_date_column)"
                            data-placement=""
                            ng-options="selectedTables.fact+'.'+columns.name as columns.name for columns in getPartitonColumns(selectedTables.fact)" >
                      <option value="">--Select Partition Column--</option>
                    </select>
                      <!--<small class="text-info" ng-show="state.mode=='edit'">(Column Type should be DATE or TIMESTAMP Type)</small>-->
                  </div>
                  <div class="col-xs-12 col-sm-6" ng-if="state.mode=='view'">
                     <span >
                          {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}
                     </span>
                  </div>
              </div>
          </div>

          <!--Date Format-->
          <div class="form-group" >
            <div class="row">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Date Format</b></label>
              <div class="col-xs-12 col-sm-6">
                <select chosen
                        width="'49%'"
                        ng-if="state.mode=='edit'"
                        ng-model="partition_date.type"
                        ng-required="partition_date.type"
                        ng-disabled="$parent.isFormatEdit.editable!==true || partitionColumn.hasSeparateDateColumns"
                        ng-class="{ 'col-5': partition_date.type === 'other' }"
                        ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt"
                        data-placement="">
                  <option value="">--Select Date Format--</option>
                </select>
                <input width="'49%'"
                  class="form-control format-input"
                  ng-if="state.mode == 'edit' && partition_date.type === 'other'"
                  ng-model="partition_date.format"
                  ng-required="partition_date.format"
                  ng-class="{ 'col-5': partition_date.type === 'other' }"
                  placeholder="Please enter your custom date format."/>
                <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span>
              </div>
            </div>
          </div>

          <!--Date Format-->
          <div class="form-group middle-popover" ng-if="isFormatEdit.editable==true">
            <div class="row">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Has a separate "time of the day" column ?</b>  <i kylinpopover placement="right" title="Separate Time Column" template="separateTimeColumnTip.html" class="fa fa-info-circle"></i></label>
              <div class="col-xs-12 col-sm-6">
                <toggle-switch on-label="Yes" off-label="No" ng-disabled="state.mode!=='edit'" ng-click="toggleHasSeparateTimeColumn()" ng-model="partitionColumn.hasSeparateTimeColumn"></toggle-switch>
              </div>
            </div>
          </div>
          <!--Partition Time Column-->
          <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true">
            <div class="row middle-popover">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default align-right"><b>Partition Time Column </b> <i kylinpopover placement="right" ng-title="Partition Time Column" template="partitionTimeTip.html" class="fa fa-info-circle"></i> </label>
              <div class="col-xs-12 col-sm-6">
                <select width="'49%'" chosen
                        ng-model="selectedTablesForPartitionTime.fact"
                        ng-if="state.mode=='edit'"
                        data-placement=""
                        ng-options="alias as alias for alias in availableFactTables" >
                  <option value="">--Select Partition Table--</option>
                </select>
                <select width="'49%'" chosen
                        ng-model="modelsManager.selectedModel.partition_desc.partition_time_column"
                        ng-if="state.mode=='edit'"
                        data-placement=""
                        ng-options="selectedTablesForPartitionTime.fact+'.'+columns.name as columns.name for columns in getPartitonTimeColumns(selectedTablesForPartitionTime.fact,modelsManager.selectedModel.partition_desc.partition_date_column)">
                  <option value="">--Select Partition Column--</option>
                </select>
                <span ng-if="state.mode=='view'">
                      {{!!(modelsManager.selectedModel.partition_desc.partition_time_column)?modelsManager.selectedModel.partition_desc.partition_time_column: ''}}</span>
              </div>
            </div>
          </div>
          <!--Time Format-->
          <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true">
            <div class="row">
              <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Time Format</b></label>
              <div class="col-xs-12 col-sm-6">
                <select chosen
                  width="'49%'"
                  ng-if="state.mode=='edit'"
                  ng-model="partition_time.type"
                  ng-required="partition_time.type"
                  ng-class="{ 'col-5': partition_time.type === 'other' }"
                  ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt"
                  data-placement="">
                  <option value="">--Select Time Format--</option>
                </select>
                <input width="'49%'"
                  class="form-control format-input"
                  ng-if="state.mode == 'edit' && partition_time.type === 'other'"
                  ng-model="partition_time.format"
                  ng-required="partition_time.format"
                  ng-class="{ 'col-5': partition_time.type === 'other' }"
                  placeholder="Please enter your custom time format."/>
                <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span>
              </div>
            </div>
          </div>
        </div>
        <h3>Filter</h3>
        <!--Filter Condition-->
        <div class="form-group box-body middle-popover">
            <div class="row">
                <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Filter</b>  <i kylinpopover placement="right" title="Filter" template="filterTip.html" class="fa fa-info-circle"></i></label>
                <div class="col-xs-12 col-sm-6">

                    <!--edit mode-->
                    <div class="form-group" ng-if="state.mode=='edit'"
                         style="font-family:'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro'">
                        <label for="filter_condition"
                               style="color: #930f80;"><b>WHERE</b></label>
                        <textarea id="filter_condition" type="text"
                                  style="height:150px"
                                  class="form-control box-default"
                                  placeholder="Please input WHERE clause without typing 'WHERE'"
                                  ng-model="modelsManager.selectedModel.filter_condition">
                        </textarea>
                    </div>

                    <!--view mode-->
                    <div class="form-group row" ng-if="state.mode=='view'"
                         style="font-family:'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro'">
                        <div ng-if="modelsManager.selectedModel.filter_condition" class="col-md-11 col-md-offset-1">
                            <p style="color: #930f80;"><b>WHERE</b></p>
                            <span>{{modelsManager.selectedModel.filter_condition}}</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
       </ng-form>
    </div>
  </div>
</div>
<script type="text/ng-template" id="partitionTip.html">
    <ol>
      <li>Partition date column not required,leave as default if cube always need full build</Li>
      <li>Column should contain date value (type can be Date, Timestamp, String, VARCHAR, Int, Integer, BigInt, etc.)</li>
    </ol>
</script>

<script type="text/ng-template" id="partitionTimeTip.html">
  <p>Column should contain time value (type can be Timestamp, String, VARCHAR, etc.)</p>
</script>

<script type="text/ng-template" id="filterTip.html">
    <ol>
      <li>Where clause to filter data from source</li>
      <li>Do not include date column which will be used for incremental refresh</li>
      <li>Do not include "Where"</li>
      <li>Use ${start_date} and ${end_date} as dynamic variables for segment's start time and end time which are determined after a building job triggered</li>
    </ol>
</script>
<script type="text/ng-template" id="separateTimeColumnTip.html">
  <p>For cases where fact table saves date and hour at two columns (KYLIN-1427)</p>
</script>
<script type="text/ng-template" id="separateDateColumnsTip.html">
  <p>For cases where fact table saves date (year, month and day) in separate columns (KYLIN-4211)</p>
</script>
