<div id="create-packages" class="dropzone-packages" ng-controller="createPackagesFromTemplateController" country-selected="{{countrySelected}}" ng-init="initializeCreatePackages()">
    <h3>{{ 'packages.headers.CREATE_PACKAGES' | translate }} {{ 'packages.forms.' + getCountryTranslationKey() | translate:translationData  }}</h3>
    <div id="create-packages-countries" class="packages-countries form-group row justify-content-start">
        <label for="selectCountry" class="package-label col-md-2">{{ 'packages.forms.CREATE_COUNTRY' | translate }}:</label>
        <select id="selectCountry" class="form-control-static col-md-2" ng-model="selectedCountryId" ng-change="updateVirtualProducts()">
            <option ng-repeat="countryInfo in countries" value={{countryInfo.id}}>
                {{countryInfo.name}}
            </option>
        </select>
    </div>
    <div id="create-packages-from-template-select" class="packages-countries form-group row justify-content-start">
        <label for="selectPackageTemplate" class="package-label col-md-2">{{ 'packages.forms.CREATE_FROM_TEMPLATE' | translate }}:</label>
        <select id="selectPackageTemplate" class="form-control-static col-md-2" ng-model="idSelectedPackageTemplate" ng-change="updateVirtualProducts()">
            <option ng-repeat="templateInfo in templates" value={{templateInfo.idTemplate}}>
                {{templateInfo.templateName}}
            </option>
        </select>
    </div>

    <form ng-if="areTemplateAndCountrySelected()">
        <div class="create-packages-name-description row">
            <div class="create-package-type row justify-content-start col-md-12">
                <label for="packagType" class="package-label col-md-2">{{ 'packages.forms.CREATE_TYPE' | translate }}:</label>
                <select id="selectType" class="form-control-static col-md-2" ng-model="$parent.selectedPackageTypeId">
                    <option ng-repeat="type in packageTypes" value={{type.idPackageType}}>
                        {{type.packageType}}
                    </option>
                </select>
            </div>
            <div class="create-package-name row justify-content-start col-md-12">
                <label for="packageName" class="package-label col-md-2">{{ 'packages.forms.CREATE_NAME' | translate }}:</label>
                <input type="text"
                    placeholder="{{ 'packages.forms.CREATE_NAME_PLACEHOLDER' | translate }}"
                    id="package-name"
                    required
                    class="create-package-name-input form-control-static col-md-5"
                    ng-model="$parent.packageName" />
            </div>
            <div class="create-package-reference row justify-content-start col-md-12">
                <label for="packageReference" class="package-label col-md-2">{{ 'packages.forms.CREATE_REFERENCE' | translate }}:</label>
                <input type="text"
                    placeholder="{{ 'packages.forms.CREATE_REFERENCE_PLACEHOLDER' | translate }}"
                    id="packageReference"
                    class="create-package-reference-input form-control-static col-md-5"
                    ng-model="$parent.packageReference" />
            </div>
            <div class="create-package-description row justify-content-start col-md-12">
                <div class="col-md-8 create-package-description-text form-control-static">
                    <display-cdn-images image-params={{uploadParams}}></display-cdn-images>
                </div>
                <div class="col-md-4 create-package-description-text form-control-static">
                    <upload-image-cdn upload-params={{uploadParams}}></upload-image-cdn>
                </div>
            </div>
            <div class="create-package-description row justify-content-start col-md-12">
                <label for="packageDescription" class="package-label col-md-2">{{ 'packages.forms.CREATE_DESCRIPTION' | translate }}:</label>
                <div class="create-package-description-text form-control-static col-md-5">
                    <textarea
                        ui-tinymce="tinymceOptions"
                        ng-model="$parent.packageDescription"></textarea>
                </div>
                <div class="col-md-6">
                    <div class="col-md-12">
                        <b>Template description:</b> {{getTemplateDescription()}}
                    </div>
                </div>
            </div>
            <div id="set-additional-installation-days-from-template-container" class="col-md-12">
                <label>{{'packages.tables.headers.additionalInstallationDays' | translate}}: </label>
                <input id='set-additional-installation-days-from-template'
                    type="number"
                    name="installationDays" required
                    min="1" max="365" step="1"
                    class="days-input"
                    ng-model="$parent.additionalInstallationDays"/>
                <span>{{'packages.tables.extra.DAYS' | translate}}</span>
            </div>
        </div>

        <div id="create-package-from-template-container">
            <div ng-repeat="(category, products) in productsByCategories"
                id="package-{{category}}-from-template-container"
                ng-if="isCategoryInTemplate(category)"
                class="products-per-category-container">
                <div class="create-packages-titles row">
                    <div class="create-package-title col-md-4">
                        {{getTitle(category, 'products', true)}} {{ 'packages.forms.SELECTED_COUNTRY' | translate:translationData  }}
                    </div>
                    <div class="create-package-title col-md-5">
                        {{getTitle(category, 'packages', true)}} {{ 'packages.forms.SELECTED_COUNTRY' | translate:translationData  }}
                    </div>
                </div>

                <div id="pack-{{category}}-from-template-container" class="create-packages-from-template-container row">
                    <div class="create-packages col-md-4">
                        <div class="list-by-category products-droppable-list package-list-{{category}}"
                            id="products-list-{{category}}"
                            data-drop="true"
                            jqyoui-droppable="{onDrop:'productDropped(\'product\', 0, category)'}">
                            <div ng-repeat="(key, product) in products" class="create-package-row product-draggable"
                                data-drag="true"
                                jqyoui-draggable="{animate:true, onStart:'onDragStartFromProducts(product, key)', onStop:'onDragStop(product)', scroll: false}"
                                data-jqyoui-options="{revert: 'invalid', containment:'#package-{{category}}-from-template-container', scroll: false}">
                                <div ng-if="!checkIfIsString(product)">
                                    <div class="create-package-products-display">
                                        <div class="create-package-header">
                                            {{'packages.forms.products.PRODUCT_NAME' | translate}}:
                                        </div>
                                        <div class="create-package-product">
                                            {{product.productName}}
                                        </div>
                                    </div>
                                    <div class="create-package-products-info-display">
                                        <div class="create-package-product-info">
                                            <div class="create-package-header">
                                                {{'packages.forms.products.SUPPLIER_NAME' | translate}}:
                                            </div>
                                            <div class="create-package-product-info">
                                                {{product.supplierName}}
                                            </div>
                                            <div class="create-package-header">
                                                {{'packages.forms.products.PRICE' | translate}}:
                                            </div>
                                            <div class="create-package-product-info">
                                                {{product.price}} (VAT {{product.vatPrice}})
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="create-packages col-md-4">
                        <div class="list-by-category package-list-{{category}}"
                            id="packages-list-{{category}}">
                            <div ng-repeat="(virtualProductKey, product) in packagesByCategories[category]" class="create-package-row">
                                <div class="create-package-products-display">
                                    <div class="create-package-header">
                                        {{'packages.forms.products.VIRTUAL_PRODUCT_NAME' | translate}}:
                                    </div>
                                    <div class="create-package-product">
                                        {{product.virtualName}}
                                    </div>
                                    <div ng-if="product.real"
                                        class="real-product-in-package"
                                        ng-repeat="(realProductKey, realProduct) in product.real"
                                        data-drag="true"
                                        jqyoui-draggable="{animate:true, onStart:'onDragStartFromPackage(virtualProductKey, realProductKey, realProduct.category)', onStop:'onDragStop(realProduct)', scroll: false}"
                                        data-jqyoui-options="{revert: 'invalid', containment:'#package-{{category}}-from-template-container', scroll: false}">
                                        <div class="create-package-products-display">
                                            <div class="create-package-header">
                                                {{'packages.forms.products.PRODUCT_NAME' | translate}}:
                                            </div>
                                            <div class="create-package-product">
                                                {{realProduct.productName}}
                                            </div>
                                        </div>
                                        <div class="create-package-products-info-display">
                                            <div class="create-package-product-info">
                                                <div class="create-package-header">
                                                    {{'packages.forms.products.SUPPLIER_NAME' | translate}}:
                                                </div>
                                                <div class="create-package-product-info">
                                                    {{realProduct.supplierName}}
                                                </div>
                                                <div class="create-package-header">
                                                    {{'packages.forms.products.PRICE' | translate}}:
                                                </div>
                                                <div class="create-package-product-info">
                                                    {{realProduct.price}} (VAT {{realProduct.vatPrice}})
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="real-products-container">
                                        <div class="add-products-by-template real-product-{{category}}"
                                            id="droppable-box-{{virtualProductKey}}"
                                            ng-if="!product.real"
                                            data-drop="true"
                                            jqyoui-droppable="{onDrop:'productDropped(\'package\', virtualProductKey, category)'}">
                                        </div>
                                        <div class="add-additional-products-by-template real-product-{{category}}"
                                                id="droppable-box-additional-{{virtualProductKey}}"
                                                ng-if="isAdditionalVirtualProductVisible(category)"
                                                data-drop="true"
                                                jqyoui-droppable="{onDrop:'productDropped(\'package\', virtualProductKey, category)'}">
                                                <span class="glyphicon glyphicon-plus"></span>
                                                {{'packages.forms.ADD_MORE_REAL_PRODUCTS' | translate}}
                                        </div>
                                    </div>
                                </div>
                                <div class="product-quantity-box" ng-if="!isAdditionalVirtualProductVisible(category)">
                                    <label for="createPackagesProductQuantity">{{ 'packages.forms.CREATE_QUANTITY' | translate }}:</label>
                                    <input type="number"
                                        name="productQuantity"
                                        min="1" max="100" step="1"
                                        class="product-quantity"
                                        ng-model="productUnit[product.idProduct]"
                                        ng-change="checkQuantityAmount(productUnit[product.idProduct])" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="arrows-icon col-md-1">
                <span class="glyphicon glyphicon-transfer"></span>
            </div>
        </div>
        <div class="create-from-template-btn" ng-if="packagesByCategories">
            <input type="button"
                    id="create-package-from-template"
                    class="btn btn-info"
                    ng-click="createPackageFromTemplate()"
                    value="{{ 'packages.forms.buttons.CREATE_PACKAGE' | translate }}"/>
        </div>
    </form>
</div>
