<div class="manageReviewTitles-reviewTitlesTable">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="col-review-title table-title">Review Title</th>
                <th class="col-linked-prod table-title">Linked Product</th>
                <th class="col-move-prod table-title">Move to product</th>
                <th class="col-sku table-title">Sku</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="pair in $ctrl.product.reviewTitlesInfo | orderBy:'title' | filter:{ title: $ctrl.filterParam } ">
                <td class="col-review-title">{{pair.title}}</td>
                <td class="col-linked-prod">
                    <div class="col-linked-prod-container">
                        <div class="linked-prod-text">{{$ctrl.product.fullName}}</div>
                        <button class="btn btn-default table-button"
                                ng-click="$ctrl.removeReviewTitle(pair)">Remove</button>
                    </div>
                </td>
                <td class="col-move-prod">

                    <div class="ui-select-container">
                        <ui-select ng-model="pair.selectedForMove" theme="bootstrap" >
                            <ui-select-match placeholder="-">{{$select.selected.productName}}</ui-select-match>
                            <ui-select-choices
                                refresh="$ctrl.searchBusiness($select.search)"
                                refresh-delay="1000"
                                repeat="business in $ctrl.businesses">
                                <span class="business-title">{{business.productName}}</span>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <button class="btn btn-default table-button"
                            ng-class="{'not-active': !pair.selectedForMove}"
                            ng-click="$ctrl.moveReviewTitle(pair)">Move</button>
                </td>
                <td class="col-sku">
                    <div ng-hide="pair.sku" class="ui-select-container">


                        <ui-select ng-change="$ctrl.skuSelected(pair)" ng-model="pair.selected" theme="bootstrap" style="max-width: 120px;" title="Choose a sku" >
                            <ui-select-match placeholder="-">{{$select.selected}}</ui-select-match>
                            <ui-select-choices repeat="sku in $ctrl.getSkues($select.search) | filter: $select.search">
                                <div ng-bind-html="trustAsHtml(sku | highlight: $select.search)"></div>
                                <small>{{sku}}</small>
                            </ui-select-choices>
                        </ui-select>

                    </div>
                    <div class="sku" ng-show="pair.sku">{{pair.sku}}</div>
                    <div class="actions">
                        <button class="btn btn-default table-button" 
                                ng-class="{'not-active': !pair.sku}"
                                ng-click="$ctrl.removeSKUFromReviewTitle(pair)">Remove</button>
                        <button class="btn btn-default table-button"
                                ng-class="{'not-active': !$ctrl.isNewSku(pair)}"
                                ng-click="$ctrl.addSKUToReviewTitle(pair)">Add</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

  

<!--

<ul>
    <li ng-repeat="pair in $ctrl.product.reviewTitlesInfo track by $index">
        <select class="sku-select"
            ng-options = "sku as sku for sku in $ctrl.product.skus "
            ng-click = "oldSKU = pair.sku"
            ng-model = "pair.sku"></select>
        <span class="label-review-title">{{pair.title}}</span>
    </li>
</ul>-->