<!-- Create Product: Info -->
<div ng-if="createCtrl.view == 'details'" style="height: 100%;">
    <div class="flex-row item-list" style="height: 100%">
        <div class="flex1 item">
            <div class="padding flex-super-center">
                <input class="text-center" type="text" ng-disabled="createCtrl.isUpgrade" ng-model="createCtrl.product.name" placeholder="{{ GetLocalized('product_name_placeholder') }} ">
            </div>

            <div class="padding flex-super-center">
                <div dropdown-select="createCtrl.frameworks" dropdown-model="createCtrl.framework"
                     dropdown-onchange="createCtrl.frameworkChange(selected)" dropdown-item-label="friendlyName"
                     style="width: 250px;"></div>
            </div>

            <div class="text-center">
                <button class="cancel" ng-if="ctrl.product != null" ng-click="createCtrl.cancelCreate()" localize="cancel"></button>
                <button ng-click="createCtrl.showFeatures()" ng-disabled="!createCtrl.isCreatePageOneValid()" localize="next"></button>
            </div>

            <!-- Help text -->
            <div style="margin-top: 20px;">
                <p localize="framework_description"></p>
                <p localize="producttype_description"></p>
            </div>

        </div>
        <div class="flex1 padding" style="overflow: auto;">
            <div class="item-list">
                <div class="item" style="margin: 0 0 15px 0" ng-repeat="productType in createCtrl.productTypes"
                     ng-class="{ active: (ctrl.product.productTypeName == productType.name || createCtrl.product.productTypeName == productType.name) }"
                     ng-click="createCtrl.selectProductType(productType)">
                    <h3 localize="{{ productType.name }}"></h3>
                    <div class="ct-chart animated fadeIn" id="chart-{{ productType.name }}" style="width: 294px; height: 155px;"></div>

                    <div class="text-center" localize="income_per_month" localize-data-income="{{ productType.incomePerUserPerDay * 30 | number: 2 }}">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Product: Features -->
<div ng-if="createCtrl.view == 'features'">
    <h4 class="text-center" localize="product_features_left" localize-data-features-left="{{ createCtrl.featuresLeft }}"></h4>

    <p class="color-red margin-top text-center" ng-if="createCtrl.features.length == 0" localize="no_researched_features"></p>

    <div class="flex-row">
        <div class="flex1 item-list text-center" style="height: 430px; overflow: auto;" ng-repeat="platformName in createCtrl.platformNames" ng-if="createCtrl.features.length != 0">
            <h3 localize="{{ platformName }}"></h3>
            <div class="item" ng-repeat="featureInfo in createCtrl.features track by featureInfo.featureName+featureInfo.platformName" ng-if="featureInfo.platformName == platformName"
                 ng-class="{ active: featureInfo.selected }" ng-click="createCtrl.toggleFeature(featureInfo)">

                <h3 localize="{{ featureInfo.featureName }}"></h3>

                <div class="toggle-switch margin-top" ng-class="{ active: featureInfo.selected }">
                    <span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="text-center margin-top">
        <button class="cancel" ng-click="createCtrl.view = 'details'" localize="back"></button>
        <button ng-click="createCtrl.confirmVersion()" ng-disabled="!createCtrl.isCreatePageTwoValid()" localize="confirm_selection"></button>
    </div>
</div>

<div ng-if="createCtrl.view == 'implementation'">
    <!-- Development: Feature -->
    <h3 class="text-center" localize="development_status" localize-data-version="{{createCtrl.product.version+1}}"></h3>
    <div ng-if="createCtrl.product.underDevelopment" style="overflow: auto; height: 540px;">
        <div class="item-list">
            <div class="item" ng-repeat="featureInfo in createCtrl.missingFeatures track by featureInfo.featureInfo.featureName+featureInfo.featureInfo.platformName">
                <h3>
                    <span localize="{{ featureInfo.featureInfo.featureName }}"></span>
                     (<span localize="{{ featureInfo.featureInfo.platformName }}"></span>)
                </h3>

                <!-- Before start (Shows components) -->
                <div style="display: flex;">
                    <div class="flex5">
                        <component component="::stack.component"
                                   ng-disabled="!stack.isAvailableInInventory"
                                   stack-amount="stack.amount"
                                   ng-repeat="stack in featureInfo.stacks track by stack.component.name"
                                   show-inventory-amount="true">
                        </component>
                    </div>

                    <div class="flex1" style="display: flex; align-items: center;">
                        <button class="blue"
                                ng-disabled="!featureInfo.available"
                                ng-click="createCtrl.implementFeature(featureInfo)"
                                ng-class="{ disabled: !featureInfo.cuAvailable }"
                                uib-tooltip="{{ GetLocalized('not_enough_cu') }}"
                                tooltip-append-to-body="true"
                                tooltip-enable="!featureInfo.cuAvailable" localize="implement">
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center padding">
            <p class="text-center color-green" ng-if="createCtrl.missingFeatures.length == 0" localize="all_features_implemented"></p>
            <button class="margin-top red" ng-click="createCtrl.cancelVersion()" localize="cancel_release"></button>
            <button class="margin-top big" ng-disabled="createCtrl.missingFeatures.length != 0" ng-click="createCtrl.releaseVersion()" localize="release"></button>
        </div>
    </div>
</div>