<div id="view-package-process-list" class="view-package-process-layer row" ng-controller="viewPackageProcessesController">
    <div id="search-processes" class="search-process-field col-md-12">
        <label id="view-package-process-search-label" class="search-process-label">{{ 'processes.labels.SEARCH_PROCESS' | translate }}</label>
        <input type="text" ng-model="searchProcessValue" class="search-process-input"/>
        <button type="button"
                id="view-package-process-search-button"
                class="search-package-process-button btn btn-info"
                ng-disabled="!searchProcessValue"
                ng-click="searchProcess()">
            {{ 'processes.buttons.SEARCH_PROCESS' | translate }}
        </button>
        <button type="button"
                id="view-package-process-all-button"
                class="search-package-process-button btn btn-success"
                ng-click="listAvailableProcesses()">
            {{ 'processes.buttons.ALL_PROCESSES' | translate }}
        </button>
    </div>

    <div class="view-process-container col-md-12" ng-init="getAvailableProcesses()">
        <div ng-repeat="country in countries" class="package-layer">
            <div id="view-package-process-package-name" class="package-name col-md-12">
                {{country.countryName}}
            </div>
            <div class="processes-layer row">
                <div ng-repeat="process in country.processes" class="col-md-4">
                    <div class="process-info-container process-info">
                        <div id='view-package-process-name' class="process-name">
                            {{process.processName}}
                        </div>
                        <div class="process-steps">
                            <div ng-repeat="(position, step) in process.steps" class="package-process-row">
                                <div class="step-number">
                                     {{position+1}}
                                </div>
                                <div class="process-step">
                                    <span class="glyphicon {{isVisibleForCustomer(step.isVisibleForCustomer)}}"></span>
                                    {{step.stepName}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
