<!--
* 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">
    <div class="col-xs-12">
        <ng-form name="forms.cube_info_form" novalidate>
            <!--Project-->
            <div class="form-group" ng-class="{'required':state.mode=='edit'}">
                <div class="row">
                  <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                    <b>Model Name</b>
                  </label>
                  <div class="col-xs-12 col-sm-6"   ng-class="{'has-error':forms.cube_info_form.model_name.$invalid && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.model_name.$submitted)}">
                    <select chosen ng-model="cubeMetaFrame.model_name" ng-if="cubeMode=='addNewCube'"
                            ng-options="model for model in modelsManager.modelNameList"
                            style="width:100%;"
                            name="model_name"
                            ng-disabled="{{isEdit}}"
                            ng-required="true"
                            data-placeholder="select a model"
                            class="chosen-select">
                      <option value=""> -- Choose Model -- </option>
                    </select>

                    <input ng-model="cubeMetaFrame.model_name" ng-disabled="true" class="form-control" ng-if="cubeMode=='editExistCube'"/>

                    <small class="help-block" ng-show="forms.cube_info_form.model_name.$error.required && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.$submitted)">Model name is required.</small>
                    <span ng-if="state.mode=='view'">{{cubeMetaFrame.model_name}}</span>
                  </div>



                </div>
            </div>

            <!--Cube Name-->
            <div class="form-group middle-popover required"  ng-if="state.mode=='edit'">
                <div class="row">
                    <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                        <b>Cube Name</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Cube Name" template="cubeNameTip.html"></i>
                    </label>
                    <div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.cube_name.$invalid && (forms.cube_info_form.cube_name.$dirty||forms.cube_info_form.cube_name.$submitted)}">
                        <input ng-if="state.mode=='edit'" ng-disabled="{{isEdit}}"  name="cube_name" type="text" class="form-control"
                               ng-model="cubeMetaFrame.name" required
                               placeholder="You can use letters, numbers, and '_'"
                               ng-maxlength=100 ng-pattern="/^\w+$/" />
                        <small class="help-block" ng-show="forms.cube_info_form.cube_name.$error.required && (forms.cube_info_form.cube_name.$dirty||forms.cube_info_form.$submitted)">Cube name is required.</small>
                        <small class="help-block" ng-show="!forms.cube_info_form.cube_name.$error.required&&forms.cube_info_form.cube_name.$invalid && (forms.cube_info_form.cube_name.$dirty||forms.cube_info_form.$submitted)">Cube name is invalid.</small>

                        <span ng-if="state.mode=='view'">{{cubeMetaFrame.name}}</span>
                    </div>
                </div>
            </div>

            <!--Notification-->
            <div class="form-group">
                <div class="row">
                    <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                        <b>Notification Email List</b>
                    </label>
                    <div class="col-xs-12 col-sm-6">
                        <input type="text" class="form-control" placeholder="Comma Separated"
                               ng-model="cubeMetaFrame.notify_list" ng-if="state.mode=='edit'" ng-list>
                        <span ng-if="state.mode=='view'">{{cubeMetaFrame.notify_list}}</span>
                    </div>
                </div>
            </div>

          <div class="form-group">
            <div class="row middle-popover">
              <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                <b>Notification Events</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Notification Events" template="notificationEventsTip.html"></i>
              </label>
              <div class="col-xs-12 col-sm-6">

                <ui-select
                  autofocus="true"
                  close-on-select="false"
                  on-remove="removeNotificationEvents()"
                  ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="cubeMetaFrame.status_need_notify">
                  <ui-select-match placeholder="Select Status...">{{$item}}</ui-select-match>
                  <ui-select-choices
                    repeat="status as status in cubeConfig.statusNeedNofity | filter:$select.search">
                    {{status}}
                  </ui-select-choices>
                </ui-select>

                <span ng-if="state.mode=='view'">{{cubeMetaFrame.status_need_notify}}</span>
              </div>
            </div>
          </div>

            <!--Description-->
            <div class="form-group">
                <div class="row">
                    <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
                        <b>Description</b>
                    </label>
                    <div class="col-xs-12 col-sm-6">
                        <textarea ng-if="state.mode=='edit'" class="form-control box-default"  ng-disabled="instance.status=='READY'"
                            name="comment" id="comment" ng-model="cubeMetaFrame.description"></textarea>
                        <span ng-if="state.mode=='view'">{{cubeMetaFrame.description}}</span>
                    </div>
                </div>
            </div>
        </ng-form>
    </div>

</div>
<script type="text/ng-template" id="cubeNameTip.html">
<ol>
  <li>Cube name is unique name of entire system.</li>
  <li>Can not edit cube name after created.</li>
</ol>
</script>
<script type="text/ng-template" id="notificationEventsTip.html">
  <p>ERROR status will trigger a notification anyway.</p>
</script>
