<div pf-wizard-step
        step-title="{{vm.stepTitle}}"
        wz-disabled="{{!vm.wizardActive}}"
        step-id="wizard-view-definition"
        allow-click-nav="false"
        wz-disabled="false"
        on-show="vm.viewDefinitionStepShown()"
        next-enabled = "vm.nextEnablement"
        prev-enabled = "true"
        ok-to-nav-away="true">
    <h3><i>{{vm.instructionMessage}}</i></h3>
    <div class="col-md-5">
        <h3><strong>{{vm.selectedSources[0]}}.{{vm.selectedTables[0]}}</strong>
            <label class="help-label">
                <span class="fa fa-info-circle" uib-tooltip="{{ 'singleTableViewStep.help.table' | translate }}"
                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
            </label>
        </h3>
        <div>
            <input type="button" class="btn btn-xs btn-default" value="{{:: 'shared.CheckAll' | translate}}" ng-click="vm.selectAllColumns()" ng-disabled="!vm.selectAllColumnsEnabled" />
            <input type="button" class="btn btn-xs btn-default" value="{{:: 'shared.UncheckAll' | translate}}" ng-click="vm.deselectAllColumns()" ng-disabled="!vm.deselectAllColumnsEnabled" />
        </div>
        <div class="column-list-container">
            <div class="column-list-results">
                <div id="viewColumnList-row" class="list-view-container">
                    <div pf-list-view config="vm.listConfig" items="vm.items">
                        <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                            {{item.keng__id}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
