<div class="padding" style="height: 490px; overflow: auto;">
    <table class="medium hovered" ts-wrapper id="competitors-table">
        <thead>
        <tr>
            <th></th>
            <th ts-criteria="product.name" localize="name"></th>
            <th ts-criteria="product.productTypeName" localize="producttype"></th>
            <th ts-criteria="totalUsers" localize="total_users"></th>
            <th ts-criteria="marketShare" localize="marketshare"></th>
            <th ts-criteria="product.ownedStocks" localize="owned_stocks"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="productInfo in ctrl.products | orderBy: productInfo.product.name track by productInfo.product.id"
            ts-repeat
            ts-hide-no-data ng-click="ctrl.showProduct(productInfo)">
            <td>
                <div class="companyLogo small"
                     style="filter: hue-rotate({{ productInfo.product.logoColorDegree }}deg);">
                    <img ng-src="{{productInfo.product.logoPath}}">
                </div>
            </td>
            <td>{{ productInfo.product.name }}
                <i class="fa fa-check-circle-o color-green" ng-if="productInfo.product.userSegments != null"></i>

            </td>
            <td localize="{{ productInfo.product.productTypeName }}"></td>
            <td class="monospaced">{{ productInfo.totalUsers | number: 0 }}</td>
            <td>
                <span ng-if="productInfo.improved != null">
                    <i ng-if="productInfo.improved" class="fa fa-chevron-up color-green"></i>
                    <i ng-if="!productInfo.improved" class="fa fa-chevron-down color-red"></i>
                </span>
                {{ productInfo.marketShare | number: 0 }}%
            </td>
            <td>
        {{ (productInfo.product.ownedStocks) | number: 0 }}
        <span ng-if="productInfo.product.userSegments != null">-</span>
        </td>
        </tr>
        </tbody>
    </table>
</div>