<!-- Stats -->
<div class="padding">
    <div class="flex-row" style="height: 250px;">
        <div class="flex1">
            <table class="medium">
                <tr>
                    <td class="dimmed" localize="web"></td>
                    <td>
                            <span class="monospaced">
                                <strong>{{ statsCtrl.product.users.Web | number: 0 }}</strong>
                            </span>
                        <span localize="users"></span>
                    </td>
                </tr>
                <tr>
                    <td class="dimmed">Mobile</td>
                    <td><span class="monospaced">
                            <strong>{{ statsCtrl.product.users.Mobile  | number: 0 }}</strong></span>
                        <span localize="users"></span>
                    </td>
                </tr>
                <tr>
                    <td class="dimmed">Desktop</td>
                    <td><span class="monospaced">
                            <strong>{{ statsCtrl.product.users.Desktop | number: 0 }}</strong>
                        </span>
                        <span localize="users"></span>
                    </td>
                </tr>
                <tr>
                    <td class="dimmed" localize="age"></td>
                    <td localize="x_days" localize-data-days="{{statsCtrl.product.ageInDays}}"></td>
                </tr>
                <tr>
                    <td class="dimmed" localize="version"></td>
                    <td>{{ ::statsCtrl.product.version }}</td>
                </tr>
                <tr>
                    <td class="dimmed" localize="framework"></td>
                    <td localize="{{ ::statsCtrl.product.frameworkName }}"></td>
                </tr>
                <tr>
                    <td class="dimmed" localize="hosting_expenses"></td>
                    <td localize="amount_per_day" localize-data-amount="::statsCtrl.hostingExpenses" localize-data-amount-format="currency"></td>
                </tr>
            </table>
        </div>
        <div class="flex1">
            <div style="overflow: auto; height: 230px;">
                <table class="medium">
                    <tr ng-repeat="featureInfo in statsCtrl.product.features" ng-if="featureInfo.level != 0">
                        <td>{{ ::featureInfo.platformName }}: <span localize="{{ ::featureInfo.featureName }}"></span></td>
                        <td localize="level_amount" localize-data-level="featureInfo.level"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <hr class="big">

    <div style="height: 170px;">
        <div class="ct-chart"></div>
    </div>
    <div class="text-center" localize="lifetime_income" localize-data-income="{{statsCtrl.totalIncome}}" localize-data-income-format="currency"></div>
</div>
