<!--
* 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="ModelDimensionsCtrl">

   <ng-form name="forms.model_dimensions_form" novalidate>
    <!-- Dimensions Summary -->
    <div class="dataTables_wrapper form-inline no-footer">
         <!-- VIEW MODE -->
        <div class="row"  ng-if="state.mode=='view'&&modelsManager.selectedModel.dimensions.length > 0">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Table Alias</th>
                        <th>Columns</th>
                    </tr>
                </thead>
                <tbody class="cube-dimension">
                    <tr ng-repeat="dimension in modelsManager.selectedModel.dimensions | filter:dimState.filter track by $index">
                        <!--ID -->
                        <td>
                            <b>{{dimension.id = ($index + 1)}}</b>
                        </td>
                        <!--Name -->
                        <td>
                            <span>{{dimension.table}}</span>
                        </td>
                        <!--Table Name -->
                        <td>
                            <span>{{dimension.columns}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div  ng-if="state.mode=='edit'" class="form-group model-dimension-edit" style="width: 100%">
            <h4 style="margin-left:42px">Select dimension columns</h4>
            <table style="margin-left:42px; width:92%"
                   ng-if="modelsManager.selectedModel.dimensions.length > 0"
                   class="table table-hover list">
                <tr class="row">
                    <th class="col-xs-1">ID</th>
                    <th class="col-xs-2">Table Alias</th>
                    <th class="col-xs-9">Columns</th>
                </tr>

                <tr ng-repeat="dimension in modelsManager.selectedModel.dimensions" class="row">
                    <td class="col-xs-1">
                        <!-- ID -->
                        <b>{{($index + 1)}}</b>
                    </td>
                    <td class="col-xs-2">
                            {{dimension.table}}
                    </td>
                    <td class="col-xs-9">
                      <ui-select
                        style="width: 100%"
                        autofocus="true"
                        close-on-select="false"
                        ng-model="modelsManager.selectedModel.dimensions[$index].columns" multiple>
                        <ui-select-match placeholder="Select Column...">{{$item.name}}</ui-select-match>
                        <ui-select-choices
                          repeat="column.name as column in getColumnsByAlias(dimension.table) | filter:$select.search|inMeaNotInDim:dimension.table:modelsManager.selectedModel.metrics">
                          {{column.name}}
                        </ui-select-choices>
                      </ui-select>
                    </td>
                </tr>
            </table>
         </div>

    </div>
   </ng-form>
</div>
