<div class="packages-details-layer row" ng-init="getProductsArray(data)">
    <div class="col-md-4 package-description-layer">
        <h4 class="package-header">
            <span class="flag-icon flag-icon-{{data.countryCode}}"></span> {{data.name}}
        </h4>
        <div ng-bind-html="renderHtml(data.description)" class="package-description"></div>
    </div>
    <div class="col-md-8 package-info-layer">
        <div class="info-box col-md-4">
            <div class="big-title">
                <span class="glyphicon glyphicon-list-alt"></span>
                {{'packages.headers.PAY_PLANS' | translate}}:
                <?php
                    if($user->getUserType() === USER_TYPES['BROKER']){
                        require('packagesDetailsBroker/PackagesDetailsBrokerSetPriceBtn.html');
                    }
                ?>
            </div>
            <div class="info-group extra-option">
                <div class="price-type" ng-repeat="price in data.prices">
                    {{price.payType}}
                </div>
            </div>
        </div>

        <div ng-if="hasExtraPackages(data)" class="info-box col-md-4">
            <div class="big-title">
                {{'packages.headers.PACKAGE_OPTIONS_DETAILS' | translate}}:
                <?php
                    if($user->getUserType() === USER_TYPES['BROKER']){
                        require('packagesDetailsBroker/PackagesDetailsBrokerLinkOptionsBtn.html');
                    }
                ?>
            </div>
            <div class="info-group extra-option">
                <div class="option-group" ng-repeat="group in data.extraPackages.groups">
                    <div class="small-title">
                        <span class="glyphicon glyphicon-folder-open"></span>
                        {{group.groupName}}
                    </div>
                    <div class="option-pacakge" ng-repeat="option in group.options">
                        {{option.packageName}}
                        <?php
                            if($user->getUserType() === USER_TYPES['BROKER']){
                                require('packagesDetailsBroker/PackagesDetailsBrokerSetOptionPriceBtn.html');
                            }
                        ?>
                        <span ng-if="!areAllPayTypesAvailable(data.prices, option.prices)"
                            class="glyphicon glyphicon glyphicon-warning-sign warning-icon"
                            ng-click="showHideInfoBox(option)"></span>
                        <div ng-if="option.isInfoBoxVisible" class="alert-warning warning-message">
                            {{'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="big-title">
                {{'packages.headers.ADDITIONAL_PACKAGES_DETAILS' | translate}}:
                <?php
                    if($user->getUserType() === USER_TYPES['BROKER']){
                        require('packagesDetailsBroker/PackagesDetailsBrokerLinkOptionsBtn.html');
                    }
                ?>
            </div>
            <div ng-if="data.extraPackages.additionalPackages.length" class="info-group additional-package">
                <div class="additional" ng-repeat="additionalPackage in data.extraPackages.additionalPackages">
                    <div class="additional-pacakge">
                        {{additionalPackage.packageName}}
                        <?php
                            if($user->getUserType() === USER_TYPES['BROKER']){
                                require('packagesDetailsBroker/PackagesDetailsBrokerSetAdditonalPriceBtn.html');
                            }
                        ?>
                        <span ng-if="!areAllPayTypesAvailable(data.prices, additionalPackage.prices)"
                            class="glyphicon glyphicon glyphicon-warning-sign warning-icon"
                            ng-click="showHideInfoBox(additionalPackage)"></span>
                        <div ng-if="additionalPackage.isInfoBoxVisible" class="alert-warning warning-message">
                            {{'packages.messages.NOT_ALL_PAY_AVAILABLE' | translate}}
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="!data.extraPackages.additionalPackages.length">-</div>
        </div>
        <div class="info-box col-md-4">
            <div class="big-title">
                {{'packages.headers.PRODUCTS' | translate}}:
            </div>
            <div class="info-group">
                <div class="product-in-package-{{data.id}}" ng-repeat="product in productsArray">
                    {{product}}
                </div>
            </div>
        </div>
        <div ng-if="!hasExtraPackages(data)" class="info-box col-md-4">
            <?php
                if($user->getUserType() === USER_TYPES['BROKER']){
                    require('packagesDetailsBroker/PackagesDetailsBrokerLinkOptionsBigBtn.html');
                }
            ?>
        </div>
    </div>
</div>
