<div pf-wizard-step
        step-title="{{vm.stepTitle}}"
        wz-disabled="{{!vm.wizardActive}}"
        step-id="wizard-join-definition"
        allow-click-nav="false"
        wz-disabled="false"
        on-show="vm.joinDefinitionStepShown()"
        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="{{ 'twoTableViewStep.help.leftTable' | 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.selectAllLeftColumns()" ng-disabled="!vm.selectAllLeftColumnsEnabled" />
            <input type="button" class="btn btn-xs btn-default" value="{{:: 'shared.UncheckAll' | translate}}" ng-click="vm.deselectAllLeftColumns()" ng-disabled="!vm.deselectAllLeftColumnsEnabled" />
        </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.lhSourceItems">
                        <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                            {{item.keng__id}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1">
         <h3><strong translate="twoTableViewStep.joinType" />
             <label class="help-label">
                 <span class="fa fa-info-circle" uib-tooltip="{{ 'twoTableViewStep.help.joinType' | translate }}"
                       tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
             </label>
         </h3>
         <div style="height:3em"></div>
         <div class="col-md-12">
             <img title="{{vm.joinToolTipInner}}" ng-class="vm.joinType == 'INNER' ? 'join-button-down' : 'join-button-up'" 
                  ng-click="vm.selectJoinType('INNER')" src="plugins/vdb-bench-dataservice/content/img/JoinInner.png" />
         </div>
         <div class="col-md-12">
             <img title="{{vm.joinToolTipLeftOuter}}" ng-class="vm.joinType == 'LEFT_OUTER' ? 'join-button-down' : 'join-button-up'" 
                  ng-click="vm.selectJoinType('LEFT_OUTER')" src="plugins/vdb-bench-dataservice/content/img/JoinLeftOuter.png" />
         </div>
         <div class="col-md-12">
             <img title="{{vm.joinToolTipRightOuter}}" ng-class="vm.joinType == 'RIGHT_OUTER' ? 'join-button-down' : 'join-button-up'" 
                  ng-click="vm.selectJoinType('RIGHT_OUTER')" src="plugins/vdb-bench-dataservice/content/img/JoinRightOuter.png" />
         </div>
         <div class="col-md-12">
             <img title="{{vm.joinToolTipFullOuter}}" ng-class="vm.joinType == 'FULL_OUTER' ? 'join-button-down' : 'join-button-up'" 
                  ng-click="vm.selectJoinType('FULL_OUTER')" src="plugins/vdb-bench-dataservice/content/img/JoinFullOuter.png" />
         </div>
    </div>
    <div class="col-md-5">
        <h3><strong>{{vm.selectedSources[1]}}.{{vm.selectedTables[1]}}</strong>
            <label class="help-label">
                <span class="fa fa-info-circle" uib-tooltip="{{ 'twoTableViewStep.help.rightTable' | 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.selectAllRightColumns()" ng-disabled="!vm.selectAllRightColumnsEnabled" />
            <input type="button" class="btn btn-xs btn-default" value="{{:: 'shared.UncheckAll' | translate}}" ng-click="vm.deselectAllRightColumns()" ng-disabled="!vm.deselectAllRightColumnsEnabled" />
        </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.rhSourceItems">
                        <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                            {{item.keng__id}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
