<div class="flex-row item-list">
    <div class="flex1">
        <!-- Logo -->
        <div class="flex-super-center" style="flex-direction: column; margin-top: 30px;">
            <div class="companyLogo" style="filter: hue-rotate({{ ctrl.productInfo.product.logoColorDegree }}deg);">
                <img ng-src="{{ ctrl.productInfo.product.logoPath }}">
            </div>
            <h3 style="margin-top: 5px;">{{ ctrl.productInfo.product.name }}</h3>
            <h5 style="margin: 0;" localize="owned_by_x" localize-data-name="{{ ctrl.productInfo.product.owner }}"></h5>
        </div>

        <div class="item" style="height: 305px; margin-right: 0;">
            <table class="medium">
                <tr ng-repeat="platform in ['Mobile', 'Web', 'Desktop'] track by platform">
                    <td localize="{{platform}}" class="text-right dimmed" style="width: 50%"></td>
                    <td>{{ ctrl.productInfo.product.users[platform] | number: 0 }}</td>
                </tr>
                <tr>
                    <td class="text-right dimmed" localize="total_users"></td>
                    <td>{{ ctrl.productInfo.totalUsers | number: 0 }}</td>
                </tr>
                <tr>
                    <td class="text-right dimmed" localize="marketshare"></td>
                    <td>{{ctrl.productInfo.marketShare | number: 0 }}%</td>
                </tr>
                <tr>
                    <td class="text-right dimmed" localize="daily_income"></td>
                    <td>{{ ctrl.dailyIncome | currency }}</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="item flex1" style="height: 460px;">
        <h3 localize="valuation"></h3>

        <table class="medium">
            <tr>
                <td style="width: 50%" localize="stock_price"></td>
                <td>{{ ctrl.stockPrice | currency }}</td>
            </tr>
            <tr>
                <td localize="volume"></td>
                <td>{{ ctrl.productInfo.product.stockVolume | number }}</td>
            </tr>
            <tr>
                <td localize="valuation"></td>
                <td>{{ ctrl.valuation | currency : '$' : 0 }}</td>
            </tr>
        </table>

        <hr class="dark secondary">

        <table class="medium">
            <tr>
                <td style="width: 50%" localize="owned_stocks"></td>
                <td>{{ ctrl.productInfo.product.ownedStocks || 0 }}</td>
            </tr>
            <tr>
                <td localize="depot_value"></td>
                <td>{{ (ctrl.productInfo.product.ownedStocks || 0) * ctrl.stockPrice | currency : '$' : 0 }}</td>
            </tr>
            <tr>
                <td localize="share"></td>
                <td>{{ ((ctrl.productInfo.product.ownedStocks || 0) * 100 / ctrl.productInfo.product.stockVolume) | number }}%</td>
            </tr>
        </table>

        <hr class="dark secondary">

        <table style="margin-top: 40px;">
            <tr>
                <td>
                    <rzslider class="grey" rz-slider-options="ctrl.stockSellOptions"
                              rz-slider-model="ctrl.stocksToSell"></rzslider>
                </td>
                <td style="width: 140px; text-align: center">
                    <button ng-click="ctrl.sellStocks()"
                            class="small red"
                            ng-disabled="ctrl.stocksToSell == 0"
                            style="width: 130px;" localize="sell_x" localize-data-amount="{{ ctrl.stocksToSell * ctrl.stockPrice | currency : '$': 0 }}">
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <rzslider class="grey" rz-slider-options="ctrl.stockBuyOptions"
                              rz-slider-model="ctrl.stocksToBuy"></rzslider>
                </td>
                <td style="width: 140px; text-align: center">
                    <button
                            ng-click="ctrl.buyStocks()"
                            class="small"
                            ng-disabled="ctrl.stocksToBuy == 0"
                            style="width: 130px;"
                            localize="buy_x"
                            localize-data-amount="{{ ctrl.stocksToBuy * ctrl.stockPrice | currency : '$': 0 }}"></button>
                </td>
            </tr>
        </table>
    </div>
</div>