<div class="col-md-12">
    <h3 class="col-md-12">{{ 'packages.headers.MANAGE_PACKAGE_OPTIONS' | translate }}</h3>
    <div  class="all-packages-layer col-md-4">
        <div class="options-container">
            <div class="options-header">{{ 'packages.headers.SELECT_PACKAGE_FOR_OPTIONS' | translate }}</div>
            <div class="options-list">
                <div ng-click="selectPackage(package)" class="package-layer {{getPackageClass(package)}}" ng-repeat="package in standardPackages">
                    <span class="flag-icon flag-icon-{{package.countryCode}}"></span> {{package.packageName}}
                </div>
            </div>
        </div>
    </div>

    <div class="options-link-area col-md-8">
        <div class="options-big-container col-md-12">
            <div class="col-md-6">
                <div id="linked-package-options" class="options-container">
                    <div class="options-header">{{selectedPackage.packageName}} {{ 'packages.headers.PACKGE_OPTIONS' | translate }}</div>
                    <div id="linked-package-options-list" class="options-list">
                        <div id="option-group-{{group.idGroup}}" class="option-group"
                            data-drop="true"
                            jqyoui-droppable="{onDrop:'packageOptionAdded(\'option-group\', group)'}"
                            ng-repeat="(index, group) in selectedPackage.groups">
                            <div class="option-group-name">
                                <input type="text"
                                placeholder="{{ 'packages.headers.GROUP_NAME' | translate }}"
                                ng-model="group.groupName"/>
                                <div ng-click="removeGroup(index)" class="btn btn-danger remove-group">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </div>
                            </div>
                            <div class="linked-options-layer option-row linked {{getPackageWarningClass(option.hasAllPrices)}}"
                                data-drag="true"
                                drop-to="all-options"
                                id-option-package="{{option.idPackage}}"
                                id-group="{{group.idGroup}}"
                                jqyoui-draggable="{animate:true, onStart:'packageDragStart(\'linked-package-options-list\')', onStop:'packageDragStop(\'linked-package-options-list\')', scroll: false}"
                                data-jqyoui-options="{revert: true}"
                                ng-repeat="option in group.options">
                                    {{option.packageName}}
                                    <span ng-if="!option.hasAllPrices">
                                        <span class="glyphicon glyphicon-warning-sign"></span>
                                        {{ 'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate }}
                                    </span>
                                <div ng-if="isDefault(option)" class="default-value">{{ 'packages.headers.DEFAULT' | translate }}</div>
                                <div ng-if="!isDefault(option)"
                                    ng-click="setDefaultOption(group, option)"
                                    class="btn btn-primary default-btn">{{ 'packages.buttons.SET_DEFAULT' | translate }}</div>
                            </div>
                        </div>

                        <div ng-click="addGroup()" class="btn btn-primary add-btn">
                            <span class="glyphicon glyphicon-plus"></span> {{ 'packages.buttons.ADD_GROUP' | translate }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="all-options"
                    data-drop="true"
                    jqyoui-droppable="{onDrop:'packageOptionRemoved(\'all-options\')'}"
                    class="options-container">
                    <div class="options-header">{{ 'packages.headers.AVAILABLE_OPTIONS' | translate }}</div>
                    <div id="all-options-list" class="options-list all-options-list">
                        <div ng-if="option.isAvailable"
                            class="all-options-layer option-row not-linked {{getPackageWarningClass(option.hasAllPrices)}}"
                            data-drag="true"
                            drop-to="option-group"
                            id-option-package="{{option.idPackage}}"
                            jqyoui-draggable="{animate:true, onStart:'packageDragStart(\'all-options-list\')', onStop:'packageDragStop(\'all-options-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}"
                            ng-repeat="option in options">
                                {{option.packageName}}
                                <span ng-if="!option.hasAllPrices">
                                    <span class="glyphicon glyphicon-warning-sign"></span>
                                    {{ 'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate }}
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="options-link-area col-md-8 col-md-offset-4">
        <div class="options-big-container col-md-12">
            <div class="col-md-6">
                <div class="options-container">
                    <div class="options-header">{{selectedPackage.packageName}} {{ 'packages.headers.ADDITIONAL_PACKAGES' | translate }}</div>
                    <div id="linked-package-additional-list"
                        data-drop="true"
                        jqyoui-droppable="{onDrop:'packageAdditionalAdded(\'linked-package-additional-list\')'}"
                        class="options-list linked-package-additional-list">
                        <div class="linked-additionals-layer option-row linked {{getPackageWarningClass(additionalPackage.hasAllPrices)}}"
                            data-drag="true"
                            drop-to="all-additional-list"
                            id-additional-package="{{additionalPackage.idPackage}}"
                            jqyoui-draggable="{animate:true, onStart:'packageDragStart(\'linked-package-additional-list\')', onStop:'packageDragStop(\'linked-package-additional-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}"
                            ng-repeat="additionalPackage in selectedPackage.additionalPackages">
                                {{additionalPackage.packageName}}
                                <span ng-if="!additionalPackage.hasAllPrices">
                                    <span class="glyphicon glyphicon-warning-sign"></span>
                                    {{ 'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate }}
                                </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="options-container">
                    <div class="options-header">{{ 'packages.headers.AVAILABLE_ADDITIONAL' | translate }}</div>
                    <div id="all-additional-list"
                        data-drop="true"
                        jqyoui-droppable="{onDrop:'packageAdditionalRemoved(\'all-additional-list\')'}"
                        class="options-list all-additional-list">
                        <div class="all-additional-layer option-row not-linked {{getPackageWarningClass(additionalPackage.hasAllPrices)}}"
                            ng-if="additionalPackage.isAvailable"
                            data-drag="true"
                            drop-to="linked-package-additional-list"
                            id-additional-package="{{additionalPackage.idPackage}}"
                            jqyoui-draggable="{animate:true, onStart:'packageDragStart(\'all-additional-list\')', onStop:'packageDragStop(\'all-additional-list\')', scroll: false}"
                            data-jqyoui-options="{revert: true}"
                            ng-repeat="additionalPackage in additionalPackages">
                                {{additionalPackage.packageName}}
                                <span ng-if="!additionalPackage.hasAllPrices">
                                    <span class="glyphicon glyphicon-warning-sign"></span>
                                    {{ 'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate }}
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="options-link-buttons col-md-12">
        <div class="btn btn-primary" ng-click="updatePackageOptions()">
            {{ 'packages.buttons.SAVE' | translate }}
        </div>
    </div>
</div>
