{{selectedCountryId}}
<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="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-{{actionType}}" required
            class="create-package-name-input form-control-static col-md-5"
            ng-model="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="package-reference-{{actionType}}"
            class="create-package-reference-input form-control-static col-md-5"
            ng-model="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={{imageParams}}></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 id="package-description-{{actionType}}" 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="col-md-6 create-package-description-text form-control-static">
            <textarea
                ui-tinymce="tinymceOptions"
                ng-model="packageDescription"></textarea>
        </div>
    </div>
    <div id="set-additional-installation-days-container" class="col-md-12" ng-if="packageHasInstallation[actionType]">
        <label>{{'packages.tables.headers.additionalInstallationDays' | translate}}: </label>
        <input id='set-additional-installation-days'
            type="number"
            name="instDay"
            min="1" max="365" step="1"
            class="days-input"
            ng-model="additionalInstallationDays"/>
        <span>{{'packages.tables.extra.DAYS' | translate}}</span>
    </div>
</div>

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

        <div id="pack-{{category}}-container" class="create-packages-container row">
            <div class="create-packages col-md-4">
                <div class="list-by-category products-droppable-list package-list-{{category}}"
                    id="package-products-list-{{category}}"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'productDropped(\'product\', 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:'#pack-{{category}}-container', scroll: false}">
                        <div>
                            <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 {{category}}-in-package  package-list-{{category}}"
                    id="packages-list-{{category}}"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'productDropped(\'package\', category)'}">
                    <div class="create-package-row {{isAvailableClass(product.isAvailable)}}"
                        ng-repeat="(packageProductKey, product) in packagesByCategories[category]"
                        data-drag="true"
                        jqyoui-draggable="{animate:true, onStart:'onDragStartFromPackage(product, packageProductKey)', onStop:'onDragStop(product)', scroll: false}"
                        data-jqyoui-options="{revert: 'invalid', containment:'#pack-{{category}}-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">
                                {{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 class="product-quantity-box" ng-if="showQuantityField(product.category)">
                            <label for="createPackagesProductQuantity">{{ 'packages.forms.CREATE_QUANTITY' | translate }}:</label>
                            <input id='{{actionType}}-package-quantity-{{product.idProduct}}'
                                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="packages-buttons row">
    <div class="col-md-7" ng-if="packagesByCategories">
        <input type="submit"
                id="{{actionType}}-package"
                class="btn btn-info"
                ng-click="updatePackage()"
                value="{{getButtonTitle()}}"/>
    </div>

    <div class="reset-button col-md-4" ng-if="isResetBtnVisible()">
        <input type="submit"
                id="reset-package-btn"
                class="btn btn-primary"
                ng-click="resetProducts()"
                value="{{ 'packages.buttons.RESET' | translate }}"/>
    </div>
</div>
