<div class="blade-static __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/wizards/newProduct/new-product-wizard-actions.tpl.html'"></div>
<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form class="form" name="detailForm">
                <div class="form-group" ng-init="setForm(detailForm)">
                    <label class="form-label">{{ 'catalog.wizards.new-variation.labels.sku' | translate }}</label>
                    <div class="form-input">
                        <input required class="form-control" name="code" ng-model="blade.item.code" ng-class="{'error': detailForm.code.$invalid && !detailForm.code.$pristine}" placeholder="{{ 'catalog.wizards.new-variation.placeholders.sku' | translate }}" ui-validate=" 'codeValidator($value)' " />
                    </div>
                    <div class="form-error" ng-if="detailForm.code.$dirty">
                        <span data-ng-show="detailForm.code.$error.required">{{ 'catalog.wizards.new-variation.validations.sku-required' | translate }}</span>
                        <span data-ng-show="detailForm.code.$error.validator">{{ 'catalog.wizards.new-variation.validations.sku' | translate }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ 'catalog.wizards.new-variation.labels.name' | translate }}</label>
                    <div class="form-input">
                        <textarea name="productName" required class="form-control" cols="30" rows="3" ng-model="blade.item.name" ng-class="{'error': detailForm.productName.$invalid && !detailForm.productName.$pristine}" placeholder="{{ 'catalog.wizards.new-variation.placeholders.name' | translate }}"></textarea>
                    </div>
                    <div class="form-error" ng-if="detailForm.productName.$dirty && detailForm.productName.$invalid">
                        <span ng-if="detailForm.productName.$error.required">{{ 'catalog.wizards.new-variation.validations.name-required' | translate }}</span>
                    </div>
                </div>
            </form>

            <ul class="list __items">
                <li class="list-item" ng-click="openBlade('properties')" ng-if="blade.item.properties.length > 0">
                    <i class="list-ico fa fa-cogs"></i>
                    <span class="list-t">{{ 'catalog.wizards.new-variation.labels.fill-properties' | translate }}</span>
                    <span class="list-descr">{{ 'catalog.wizards.new-variation.labels.fill-properties-summary' | translate: {count: (getUnfilledProperties().length | number:0), total: (blade.item.properties.length | number:0)} }}</span>
                </li>
                <li class="list-item" ng-click="openBlade('images')">
                    <i class="list-ico fas fa-image"></i>
                    <span class="list-t">{{ 'catalog.wizards.new-variation.labels.upload-images' | translate }}</span>
                    <span class="list-descr">{{ 'catalog.wizards.new-variation.labels.upload-images-summary' | translate: {count: (blade.item.images.length >= 0 ? blade.item.images.length : 0 | number:0)} }} image(s) uploaded</span>
                </li>
            </ul>
        </div>
    </div>
</div>