<div class="mui-row">
    <div class="mui-col-md-6">
        <h2 class="labs-h2-title">Match de categorias<span ng-if="self.sellerSellected"
                                                           ng-bind="': ' + self.sellerSellected.name"></span></h2>
    </div>
    <div class="mui-col-md-6">
        <div class="mui-dropdown mui--pull-right">
            <button class="mui-btn mui-btn--flat" data-mui-toggle="dropdown">
                Selecione um Seller para o match
                <span class="mui-caret"></span>
            </button>
            <ul class="mui-dropdown__menu mui-dropdown__menu--right">
                <li><a href ng-click="self.sellerSellected=null">Nenhum</a></li>
                <li ng-repeat="seller in self.sellers"><a href ng-bind="seller.name"
                                                          ng-click="self.selectSeller(seller)"></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="mui-row">
    <div class="mui-col-md-12">
        <table class="mui-table" ng-init="self.init()">
            <thead>
            <tr>
                <th>Categoria</th>
                <th>Sugestão de mapeamento no Marketplace</th>
                <th class="mui--text-right">Ação</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in self.data" ng-init="categIndex=$index"
                ng-class="{'labs-light-green': row.categorySelected.hub, 'labs-light-yellow': !row.marketplace}">
                <td>
                    <span ng-if="row.seller.category.parent">
                        <strong ng-bind="'[' + row.seller.category.parent.id + ']'"></strong>
                        <span ng-bind="row.seller.category.parent.name"></span> &rightarrow;
                    </span>
                    <strong ng-bind="'[' + row.seller.category.id + ']'"></strong>
                    <span ng-bind="row.seller.category.name"></span>
                </td>
                <td>
                    <!-- Sem match -->
                    <span class="mui--text-black-54" ng-if="!row.marketplace">N/A</span>

                    <!-- Category do match -->
                    <div class="mui-dropdown" ng-if="row.marketplace">
                        <span ng-if="row.categorySelected.category.parent">
                            <strong ng-bind="'[' + row.categorySelected.category.parent.id + '] '"></strong>
                            <span ng-bind="row.categorySelected.category.parent.name"></span> &rightarrow;
                        </span>
                        <select ng-model="row.categorySelected"
                                ng-options="option.category.name for option in row.marketplace
                                track by option.category.id">
                            <option value="">Selecione</option>
                        </select>
                    </div>
                </td>
                <td class="mui--text-right">
                    <button ng-disabled="!row.categorySelected || row.categorySelected.hub"
                            ng-click="self.applyMatch(row, row.categorySelected)"
                            class="mui-btn mui-btn--small mui-btn--primary">Aplicar</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>