<div id="edit-processes" class="dropzone-packages">
    <h3>{{'processes.headers.EDIT_PROCESS' | translate}}</h3>

    <div id="edit-process-select-container" class="link-process-steps-packages select-group row">
        <label for="selectPackage" class="package-label col-md-2">{{'processes.labels.PROCESS_SELECT' | translate}}:</label>
        <select id="edit-process-select"
            ng-model="idSelectedProccess"
            ng-change="getSteps()"
            ng-init="setProcessAfterEdit()"
            class="form-control-static col-md-3"
            ng-options="processInfo.name for processInfo in processes track by processInfo.id">
        </select>
    </div>

    <form ng-if="isProcessSelected()">
        <div class="create-packages-name-description row">
            <div class="create-package-name row justify-content-start col-md-12">
                <label for="process-name" class="package-label col-md-2">{{ 'processes.labels.PROCESS_NAME' | translate }}:</label>
                <input type="text"
                    id="process-name-edit"
                    required
                    class="create-package-name-input form-control-static col-md-5"
                    ng-model="$parent.processName" />
            </div>
            <div class="create-processes-country row justify-content-start col-md-12">
                <label id="create-processes-country-label" for="create-process-country-select" class="package-label col-md-2">
                    {{'processes.labels.PROCESS_COUNTRY' | translate}}:
                </label>
                <select id="create-process-country-select"
                    class="create-process-country-select form-control-static col-md-5"
                    ng-model="$parent.selectedCountry">
                    <option id="create-process-country-{{countryInfo.id}}" ng-repeat="countryInfo in countries" value={{countryInfo.id}}>
                        {{countryInfo.name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="create-process-notice alert alert-info">
            <span class="glyphicon glyphicon-info-sign"></span>
            {{'processes.messages.DEFAULT_STEPS' | translate}}
        </div>
        <div id="edit-processes-container" class="create-packages-container">
            <div class="create-packages-titles row">
                <div class="create-package-title col-md-4">
                    {{'processes.labels.PROCESS' | translate}}
                </div>
                <div class="create-package-title col-md-5">
                    {{'processes.labels.STEPS_IN_PROCESS' | translate}}
                </div>
            </div>
            <div id="edit-process-and-steps-container" class="row">
                <div class="draggable-icon col-md-1">
                    <span class="glyphicon glyphicon-transfer"></span>
                </div>

                <div class="create-packages col-md-4 available-steps-list">
                    <ul class="edit-processes-lists"
                        id="available-steps-list"
                        data-drop="true"
                        jqyoui-droppable="{onDrop:'processStepDropped'}">
                        <li ng-repeat="(idStep, availableStep) in availableSteps"
                            class="create-package-row product-draggable"
                            step-info="{{availableStep}}"
                            data-drag="true"
                            jqyoui-draggable="{animate:true, onStart:'startDragFromAvailableSteps(idStep)', onStop:'endDragFromAvailableSteps()', scroll: false}"
                            data-jqyoui-options="{revert: 'invalid', containment:'#edit-processes-container', scroll: false}">
                            <div id="edit-available-steps-list-{{idStep}}-position" class="create-processes-products-display">
                                <div class="create-processes-product">
                                    <span class="glyphicon {{isVisibleToCustomer(availableStep.isVisibleForCustomer)}}"></span>
                                    {{availableStep.shortDesc}}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="create-packages col-md-4 process-steps-list">
                    <ul class="edit-processes-lists rearrange-steps"
                        id="process-steps-list"
                        data-drop="true"
                        jqyoui-droppable="{onDrop: 'availableStepDropped'}"
                        sortable-steps
                        start-drag-process="startDragFromProcessSteps"
                        end-drag-process="endDragFromProcessSteps"
                        process-steps="processSteps">
                        <li ng-repeat="(position, processStep) in processSteps"
                            step-info="{{processStep}}"
                            data-drag="true"
                            data-jqyoui-options="{revert: 'invalid', containment:'#edit-processes-container', scroll: false}"
                            class="create-processes-row" style="padding-left: {{getStepPadding(position)}}%;">
                            <div id="edit-process-steps-list-{{position}}-position" class="create-processes-products-display">
                                <div class="create-processes-step-number">
                                     {{position + 1}}
                                </div>
                                <div class="create-processes-product">
                                    <span class="glyphicon {{isVisibleToCustomer(processStep.isVisibleForCustomer)}}"></span>
                                    {{processStep.shortDesc}}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="edit-buttons row"  ng-if="processSteps">
            <div class="edit-package-button col-md-7">
                <input type="submit"
                        id="edit-package-btn"
                        class="btn btn-primary"
                        ng-click="editProcess()"
                        value="{{ 'processes.buttons.EDIT_PROCESS' | translate }}"/>
            </div>
            <div class="reset-button col-md-5">
                <input type="submit"
                        id="reset-package-btn"
                        class="btn btn-primary"
                        ng-click="resetProducts()"
                        value="{{ 'processes.buttons.RESET' | translate }}"/>
            </div>
        </div>
    </form>
</div>
