<div id="edit-packages" class="dropzone-packages" country-selected="{{countrySelected}}">
    <h3>{{ 'packages.headers.EDIT_PACKAGES' | translate }} {{ getEditPackagesTitle() }}</h3>
    <div id="edit-packages-countries" class="packages-countries 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="showSelectPackages()">
            <option ng-repeat="countryInfo in countries" value={{countryInfo.id}}>
                {{countryInfo.name}}
            </option>
        </select>
    </div>
    <div id="edit-package-list" class="packages-countries row" ng-init="showSelectPackages()" ng-if="isCountrySelected(selectedCountryId)">
        <label for="selectPackage" class="package-label col-md-2">{{'packages.forms.PACKAGE_SELECT' | translate}}:</label>
        <select id="create-process-package-select"
            ng-model="$parent.packageSelected"
            ng-change="setCountryAndPackageSelected()"
            ng-init="showSelectPackages()"
            class="form-control-static col-md-3"
            ng-options="packageInfo.name for packageInfo in packageList track by packageInfo.id">
        </select>
    </div>
    <form ng-if="isPackageSelected()">
        <products-by-categories-drag-drop action-type="edit"></products-by-categories-drag-drop>
    </form>
</div>
