<div id="link-process-steps" class="dropzone-packages">
    <h3>{{'processes.headers.LINK_PROCESSES' | translate}}</h3>

    <div id="process-steps-countries" class="packages-countries select-group row justify-content-start">
        <label for="selectCountry" class="package-label col-md-2">{{ 'processes.labels.CREATE_COUNTRY' | translate }}:</label>
        <select id="process-select-country" class="form-control-static col-md-3" ng-model="$parent.selectedCountryId" ng-change="getPackages()">
            <option ng-repeat="(id, country) in countries" value={{id}}>
                {{country}}
            </option>
        </select>
    </div>

    <div id="link-process-steps-packages-list" class="link-process-steps-packages select-group row" ng-if="isCountrySelected()">
        <label for="selectPackage" class="package-label col-md-2">{{'processes.labels.PACKAGE_SELECT' | translate}}:</label>
        <select id="link-process-package-select"
            ng-model="$parent.selectedPackageId"
            ng-change="getProcesses()"
            class="form-control-static col-md-3">
            <option id="link-process-package-{{idPackage}}" ng-repeat="(idPackage, packageName) in packages" value={{idPackage}}>
                {{packageName}}
            </option>
        </select>
    </div>

    <div class="processes-contianer" ng-if="isPackageSelected()">
        <div class="selection-headers row">
            <div id="headers-col-available" class="headers-col col-md-4">
                <h3>{{'processes.headers.AVAILABLE_PROCESSES' | translate}}</h3>
            </div>
            <div id="headers-col-selected" class="headers-col  col-md-4">
                <h3>{{'processes.headers.SELECTED_PROCESSES' | translate}}</h3>
            </div>
            <div id="headers-col-info" class="headers-col  col-md-4">
                <h3>{{'processes.headers.PROCESS_INFO' | translate}}</h3>
                <div>{{selectedSteps.processName}}</div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="add-new-process" class="btn btn-primary add-new-process" ng-click="enableAddNewProcess()">{{'processes.buttons.NEW_PROCESS' | translate}}</div>
            </div>
            <create-process-steps ng-if="isNewStepFormVisible()"
                                ng-controller="createProcessStepsCtrl"
                                ng-init="displayProcessSteps(getStepsForProcess)"></create-process-steps>
        </div>

        <div class="process-selection-layer">
            <div class="col-md-4">
                <div id="available-processes"
                    class="processes-list"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'prcessDrop()'}"
                    data-jqyoui-options="{accept:'.selected-process'}">
                    <div class="process-draggable available-process"
                         data-drag="true"
                         data-jqyoui-options="{revert: true, containment:'.process-selection-layer', scroll: false}"
                         ng-model="process"
                         jqyoui-draggable="{animate:true, onStart:'processDragStart', onStop:'processDragStop'}"
                         process-key="{{key}}"
                         ng-click="showProcessInfo(process)"
                         ng-repeat="(key, process) in processes">{{process.processName}}</div>
                </div>
            </div>

            <div class="col-md-4">
                <div id="selected-processes"
                     class="processes-list process-col-margin"
                     data-drop="true"
                     jqyoui-droppable="{onDrop:'prcessDrop()'}"
                     data-jqyoui-options="{accept:'.available-process'}">
                     <div class="process-draggable selected-process"
                          data-drag="true"
                          data-jqyoui-options="{revert: true, containment:'.process-selection-layer'}"
                          ng-model="process"
                          jqyoui-draggable="{animate:true, onStart:'processDragStart', onStop:'processDragStop'}"
                          process-key="{{key}}"
                          ng-click="showProcessInfo(process)"
                          ng-repeat="(key, process) in selectedProcesses">{{process.processName}}</div>
                 </div>
            </div>

            <div class="col-md-4">
                <div id="process-info" class="processes-list process-col-margin">
                    <div id="info-placeholder" class="info-placeholder">{{'processes.messages.CLICK_FOR_INFO' | translate}}</div>
                    <div class="info-step" ng-repeat="(key, step) in selectedSteps.steps">
                        <div class="step-position">{{key + 1}}.</div>
                        <div class="step-description">
                            <span class="glyphicon {{isVisibleToCustomer(step.isVisibleForCustomer)}}"></span>
                            {{step.shortDesc}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="link-processes-button col-md-12">
            <button id="link-processes-add-process-button" type="button" class="btn btn-primary" ng-click="linkProcesses()">
                {{'processes.buttons.ADD_SELECTED_PROCESSES' | translate}}
            </button>
        </div>
    </div>
</div>
