<div class="create-packages-name-description row">
    <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-template-{{actionType}}" required
            class="create-package-name-input form-control-static col-md-5"
            ng-model="packageName" />
    </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>
        <textarea id="package-description-template-{{actionType}}" required
            placeholder="{{ 'packages.forms.CREATE_DESCRIPTION_PLACEHOLDER' | translate }}"
            class="create-package-description-text form-control-static col-md-5"
            ng-model="packageDescription"/>
    </div>
</div>
<div id="add-new-virtual-product-template" ng-if="actionType === 'create'" class="row">
    <div id="headers-col-available" class="headers-col">
        <h3>{{'packages.headers.NEW_VIRTUAL_PRODUCT' | translate}}</h3>
        <div id="add-new-virtual-product" class="btn btn-primary" ng-click="enableAddNewVirtualProducts()">{{'packages.buttons.NEW_VIRTUAL_PRODUCT' | translate}}</div>
    </div>
    <add-virtual-products
        ng-if="isAddVirtualProductsFormVisible()"
        ng-controller="addVirtualProductsCtrl"
        ng-init="getProductCategories()"></add-virtual-products>
</div>

<div id="update-packages-templates-container">
    <div ng-repeat="(category, products) in productsByCategories"
        id="{{actionType}}-package-template-{{category}}-container"
        class="products-per-category-container">
        <div class="create-packages-titles row">
            <div class="create-package-title col-md-4">
                {{getTitle(category, 'products', true)}}
            </div>
            <div class="create-package-title col-md-5">
                {{getTitle(category, 'packages', true)}}
            </div>
        </div>

        <div id="{{actionType}}-pack-template-{{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="{{actionType}}-package-template-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:'#{{actionType}}-pack-template-{{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>
                    </div>
                </div>
            </div>

            <div class="create-packages col-md-4">
                <div id="{{actionType}}-packages-template-list-{{category}}"
                    class="list-by-category {{category}}-in-package package-list-{{category}}"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'productDropped(\'package\', category)'}">
                    <div class="create-package-row"
                        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:'#{{actionType}}-pack-template-{{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="product-quantity-box" ng-if="showQuantityField(product.category)">
                            <label for="createPackagesProductQuantity">{{ 'packages.forms.CREATE_QUANTITY' | translate }}:</label>
                            <input id='{{actionType}}-package-template-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 id="{{actionType}}-package-template"
                type="submit"
                class="btn btn-info"
                ng-click="updatePackage()"
                value="{{getButtonTitle()}}"/>
    </div>

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