<h1>
    <i class="fa fa-th-large"></i>
    {{ ctrl.product.name }}

    <div class="progressBar" ng-if="ctrl.product != null && ctrl.product.hype != null" style="width: 300px; position: absolute; top: 11px; right: 60px;">
        <div
                ng-class="{
                red: ctrl.product.hype < 25,
                yellow: ctrl.product.hype >= 25 && ctrl.product.hype < 50
                 }"
                class="indicator"
                style="width: {{ ctrl.product.hype | number: 0 }}%; font-size: 67%; line-height: 19px;">
            <span localize="hype_amount" localize-data-amount="{{ctrl.product.hype}}" localize-data-amount-format="floor"></span>
        </div>
    </div>

    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="tab-list" style="display: inline-block; margin-bottom: 0;" ng-if="ctrl.product != null && ctrl.product.version != 0">
    <li ng-class="{ active: ctrl.tab == 'stats' }" ng-click="ctrl.tab = 'stats'"><i class="fa fa-bar-chart"></i> <span localize="stats"></span></li>
    <li ng-class="{ active: ctrl.tab == 'create' }" ng-click="ctrl.tab = 'create'"><i class="fa fa-refresh"></i> <span localize="new_version"></span></li>
    <li ng-class="{ active: ctrl.tab == 'upgrades' }" ng-click="ctrl.tab = 'upgrades'"><i class="fa fa-plus-square"></i> <span localize="upgrades"></span></li>
<li ng-class="{ active: ctrl.tab == 'hosting' }" ng-click="ctrl.tab = 'hosting'"><i class="fa fa-server"></i> <span localize="hosting"></span></li>
<li ng-class="{ active: ctrl.tab == 'marketing' }" ng-click="ctrl.tab = 'marketing'"><i class="fa fa-bullhorn"></i> <span localize="marketing"></span></li>
</ul>

<button class="red small" style="position: absolute; right: 10px; top: 60px;" ng-click="ctrl.deleteProduct(ctrl.product)" ng-if="ctrl.product != null" localize="delete"></button>


<product-stats ng-if="ctrl.tab == 'stats'"></product-stats>
<product-create ng-if="ctrl.tab == 'create'" ng-class="{ full: ctrl.product == null}"></product-create>
<product-upgrades ng-if="ctrl.tab == 'upgrades'"></product-upgrades>
<product-hosting ng-if="ctrl.tab == 'hosting'"></product-hosting>
<product-marketing ng-if="ctrl.tab == 'marketing'"></product-marketing>
