<!--
* 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="row" ng-controller="CubeOverWriteCtrl" style="padding-left:40px;">
    <div class="col-xs-8">
        <ng-form name="forms.cube_overwrite_prop_form" novalidate>
            <div class="row" style="border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-bottom: 15px;" ng-show="state.mode=='edit' || convertedProperties">
              <h4>Kylin Properties</h4>
            </div>
            <!--Project-->
            <div ng-repeat=" prop in convertedProperties track by $index " class="form-group">
                <div class="row">
                  <label class="col-xs-12 col-sm-6 control-label no-padding-right" ng-class="{'has-error':prop.name==''}">
                    <b ng-if="state.mode=='view'">{{prop.name}}</b>
                    <input ng-model="prop.name" placeholder="key" ng-change="refreshProperty(convertedProperties,$index,prop)" class="form-control" ng-if="state.mode=='edit'"/>
                    <small style="font-weight: normal !important;" class="help-block" ng-show="prop.name==''">Property name is required.</small>
                  </label>
                  <div class="col-xs-12 col-sm-5" ng-class="{'has-error':prop.value==''}">
                    <input ng-model="prop.value" placeholder="value" ng-change="refreshProperty(convertedProperties,$index,prop)" class="form-control" ng-if="state.mode=='edit'"/>
                    <small class="help-block" ng-show="prop.value==''">Property value is required.</small>
                    <span ng-if="state.mode=='view'">{{prop.value}}</span>
                  </div>
                  <div class="col-sm-1" ng-if="state.mode=='edit'">
                    <button class="btn btn-xs btn-info" ng-click="removeProperty(convertedProperties,$index,prop)"><i class="fa fa-minus"></i>
                    </button>
                  </div>

                </div>
            </div>

        <!--Add Measures Property-->
        <div class="form-group">
          <button class="btn btn-sm btn-info" ng-click="addNewProperty();" ng-show="state.mode=='edit'">
            <i class="fa fa-plus"></i> Property
          </button>
        </div>

        <!-- Stream Properties-->
        <div ng-if="isStreamingCube" class="row" style="border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-bottom: 15px;">
          <h4>Streaming Properties</h4>
        </div>
        <div ng-if="isStreamingCube" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.cube.algorithm</b>
          </label>
          <div class="col-xs-12 col-sm-5 btn-group" ng-if="state.mode=='edit'">
            <button type="button" class="btn btn-primary" ng-model="cubeMetaFrame.override_kylin_properties['kylin.cube.algorithm']" btn-radio="'INMEM'">INMEM</button>
            <!--<button type="button" class="btn btn-primary" ng-model="cubeMetaFrame.override_kylin_properties['kylin.cube.algorithm']" btn-radio="'LAYER'">LAYER</button>-->
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.cube.algorithm']}}</div>
          </div>
        </div>
        <div ng-if="isStreamingCube" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.stream.cube.window</b>
          </label>
          <div ng-if="state.mode=='edit'" class="col-xs-12 col-sm-5" ng-class="{'has-error':cubeMetaFrame.override_kylin_properties['kylin.stream.cube.window']==''}">
            <input ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.cube.window']" placeholder="Seconds" class="form-control" />
            <small class="help-block" ng-show="cubeMetaFrame.override_kylin_properties['kylin.stream.cube.window']==''">Property value is required.</small>
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.stream.cube.window']}}</div>
          </div>
        </div>
        <div ng-if="isStreamingCube" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.stream.cube.duration</b>
          </label>
          <div ng-if="state.mode=='edit'" class="col-xs-12 col-sm-5" ng-class="{'has-error':cubeMetaFrame.override_kylin_properties['kylin.stream.cube.duration']==''}">
            <input ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.cube.duration']" placeholder="Seconds" class="form-control"/>
            <small class="help-block" ng-show="cubeMetaFrame.override_kylin_properties['kylin.stream.cube.duration']==''">Property value is required.</small>
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.stream.cube.duration']}}</div>
          </div>
        </div>
        <div ng-if="isStreamingCube" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.stream.index.checkpoint.intervals</b>
          </label>
          <div ng-if="state.mode=='edit'" class="col-xs-12 col-sm-5" ng-class="{'has-error':cubeMetaFrame.override_kylin_properties['kylin.stream.index.checkpoint.intervals']==''}">
            <input ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.index.checkpoint.intervals']" placeholder="Seconds" class="form-control"/>
            <small class="help-block" ng-show="cubeMetaFrame.override_kylin_properties['kylin.stream.index.checkpoint.intervals']==''">Property value is required.</small>
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.stream.index.checkpoint.intervals']}}</div>
          </div>
        </div>
        <div ng-if="isStreamingCube" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.stream.segment.retention.policy</b>
          </label>
          <div ng-if="state.mode=='edit'" class="col-xs-12 col-sm-5 btn-group" >
            <button type="button" class="btn btn-primary" ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy']" btn-radio="'fullBuild'" ng-click="changeStreamingRetentionPolicy('fullBuild')">fullBuild</button>
            <button type="button" class="btn btn-primary" ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy']" btn-radio="'purge'" ng-click="changeStreamingRetentionPolicy('purge')">purge</button>
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5 btn-group">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy']}}</div>
          </div>
        </div>
        <div ng-if="isStreamingCube && cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy'] === 'purge'" class="row form-group">
          <label class="col-xs-12 col-sm-6 control-label no-padding-right" style="word-wrap: break-word;">
            <b>kylin.stream.segment.retention.policy.purge.retentionTimeInSec</b>
          </label>
          <div ng-if="state.mode=='edit'" class="col-xs-12 col-sm-5" ng-class="{'has-error':cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy.purge.retentionTimeInSec']==''}">
            <input ng-model="cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy.purge.retentionTimeInSec']" placeholder="Seconds" class="form-control" />
            <small class="help-block" ng-show="cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy.purge.retentionTimeInSec']==''">Property value is required.</small>
          </div>
          <div ng-if="state.mode=='view'" class="col-xs-12 col-sm-5">
            <div style="padding-top: 7px;">{{cubeMetaFrame.override_kylin_properties['kylin.stream.segment.retention.policy.purge.retentionTimeInSec']}}</div>
          </div>
        </div>
      </ng-form>
    </div>

  <!--Tips-->
  <div class="col-xs-4">
    <div class="box box-solid">
      <div class="box-header widget-header-flat">
        <h4 class="box-title">Tips</h4>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-xs-12">
            <ol class="text-info">
              <li>Cube level properties will overwrite configuration in kylin.properties</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
