<div id="create-process-steps" class="dropzone-packages">
    <div class="create-process-notice alert alert-info">
        <span class="glyphicon glyphicon-info-sign"></span>
        {{'processes.messages.DEFAULT_STEPS' | translate}}
    </div>
    <div class="create-processes-name-description row">
        <div class="create-processes-name row">
            <label id="create-processes-name-label" for="packageName" class="package-label col-md-2">
                {{'processes.labels.PROCESS_NAME' | translate}}:
            </label>
            <input type="text" placeholder="Enter process name" id="create-processes-process-name"
                class="create-process-name-input col-md-2"
                ng-model="processName" />
        </div>
        <div class="create-processes-country row">
            <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 col-md-2"
                ng-model="selectedCountry">
                <option id="catete-process-country-{{idCountry}}" ng-repeat="countryInfo in countries" value={{countryInfo.id}}>
                    {{countryInfo.name}}
                </option>
            </select>
        </div>
    </div>
    <div class="create-process-steps-container">
        <div class="create-processes-name-description">
            <div>
                <div id="create-processes-add-new-step-link" class="btn btn-primary add-step-label" ng-click="isStepFormOpen = !isStepFormOpen">
                    {{'processes.labels.NEW_STEP' | translate}}
                </div>
            </div>
            <div>
                <div class="add-process-steps" ng-if="isStepFormOpen">
                    <h3>{{'processes.buttons.ADD_STEP' | translate}}</h3>
                    <div class="create-processes-description col-md-12">
                        <label id="create-processes-short-desc-label" for="packageDescription" class="col-md-3">
                            {{'processes.labels.STEP_SHORT_DESC' | translate}}:
                        </label>
                        <textarea id="process-step-short-description"
                            placeholder="{{'processes.placeholders.SHORT_DESC' | translate}}"
                            class="form-control-static col-md-8"
                            ng-model="$parent.$parent.processStepShortDesc"></textarea>
                    </div>
                    <div class="create-processes-description col-md-12">
                        <label id="create-processes-full-desc-label" for="packageDescription" class="col-md-3">
                            {{'processes.labels.STEP_FULL_DESC' | translate}}:
                        </label>
                        <div id="proces-step-full-description" class="col-md-8">
                            <textarea
                                ui-tinymce="tinymceOptions"
                                ng-model="$parent.$parent.processStepFullDesc"></textarea>
                        </div>
                    </div>
                    <div class="create-processes-description col-md-12">
                        <label id="create-processes-customer-checkbox-label" for="packageDescription" class="package-label col-md-3">
                            {{'processes.labels.STEP_VISIBLE_CUSTOMER' | translate}}
                        </label>
                        <span ng-click="setVisible()" class="glyphicon {{isStepVisibleToCustomer()}}"></span>
                    </div>
                    <div class="create-processes-description col-md-12">
                        <label id="create-processes-step-extra-action-label" class="package-label col-md-3">
                            {{'processes.labels.EXTRA_ACTION' | translate}}
                        </label>
                        <select id="create-processes-step-extra-action-select" ng-model="$parent.$parent.selectedExtraAction" class="col-md-2">
                            <option id="create-processes-step-extra-action-{{extraAction.actionCode}}" ng-repeat="extraAction in extraActions" value={{extraAction.idActionCode}}>
                                {{extraAction.name}}
                            </option>
                        </select>
                    </div>
                    <div ng-if="$parent.$parent.selectedExtraAction" class="col-md-12">
                        <div class="create-process-notice alert alert-info">
                            <span class="glyphicon glyphicon-info-sign"></span>
                            {{getExtraActionDescription()}}
                        </div>
                    </div>
                    <div class="create-processes-description col-md-12">
                        <label id="create-processes-step-rights-label" for="processStepUserType" class="package-label col-md-3">
                            {{'processes.labels.STEP_RIGHTS' | translate}}
                        </label>
                        <select id="create-processes-step-rights-select"
                            class="col-md-2"
                            ng-model="$parent.$parent.selectedUserTypeId">
                            <option id="create-processes-step-rights-{{userType.id}}" ng-repeat="userType in userTypes" value={{userType.id}}>
                                {{userType.type}}
                            </option>
                        </select>
                    </div>
                    <div class="create-process-steps-add-button col-md-12">
                        <button type="button"
                                id="add-process-step-button"
                                class="btn btn-primary"
                                ng-click="addProcessStep()">{{'processes.buttons.ADD_STEP' | translate}}</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="create-process-lists-container" class="create-packages-container">
            <div class="create-packages-titles row">
                <div class="col-md-4">
                    <div id="create-processes-products-title" class="create-process-title">
                        {{processListsTitle('process') | translate}}
                    </div>
                </div>

                <div class="col-md-4">
                    <div id="create-processes-packages-title" class="create-process-title">
                        {{processListsTitle('steps') | translate}}
                    </div>
                </div>
            </div>

            <div id="create-processes-step-dragndrop-container" class="steps-container row">
                <div class="col-md-4">
                    <div id="create-processes-step-dragndrop-available"
                        class="processes-list process-col-margin"
                        ui-sortable="sortableOptionsList.available" ng-model="availableSteps">
                        <div ng-repeat="(position, step) in availableSteps" class="create-package-row product-draggable">
                            <div id="available-list-{{position}}-position" class="create-processes-products-display">
                                <span class="glyphicon {{isVisibleToCustomer(step.isVisibleForCustomer)}}"></span>
                                <div class="create-processes-product">
                                    {{step.shortDesc}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="draggable-icon-steps">
                    <span class="glyphicon glyphicon-transfer"></span>
                </div>

                <div class="col-md-4">
                    <div id="create-processes-step-dragndrop-process"
                        class="processes-list process-col-margin"
                        ui-sortable="sortableOptionsList.process" ng-model="processSteps">
                        <div ng-repeat="(position, step) in processSteps" class="create-package-row product-draggable">
                            <div id="available-list-{{position}}-position"
                                class="create-processes-products-display">
                                <span class="glyphicon {{isVisibleToCustomer(step.isVisibleForCustomer)}}"></span>
                                <div class="create-processes-step-number">
                                     {{getStepNumber(position)}}
                                </div>
                                <div class="create-processes-product">
                                    {{step.shortDesc}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="create-processes-button col-md-12" ng-if="processSteps">
        <button id="create-processes-add-process-button" type="button" class="btn btn-primary" ng-click="addProcess()">
            {{'processes.buttons.ADD_PROCESS' | translate}}
        </button>
    </div>
</div>
