<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 ng-if="hasExtraPackages(data)" class="info-box col-md-4">
            <div class="big-title">
                {{'packages.headers.PACKAGE_OPTIONS_DETAILS' | translate}}:
            </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}}
                        <a ng-if="option.isAvailable"
                            href="packages?subModule=selectPackage&idPackage={{option.idPackage}}">
                            <span class="glyphicon glyphicon-pencil edit-icon"></span>
                        </a>
                        <span ng-if="!areAllPayTypesAvailable(data.prices.Default, option)"
                            class="glyphicon glyphicon {{getAlertIcon(option)}} warning-icon"
                            ng-click="showHideInfoBox(option)"></span>
                        <div ng-if="option.isInfoBoxVisible" class="{{getAlertClass(option)}} warning-message">
                            {{getAlertText(option)}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="big-title">
                {{'packages.headers.ADDITIONAL_PACKAGES_DETAILS' | translate}}:
            </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}}
                        <a ng-if="additionalPackage.isAvailable"
                            href="packages?subModule=selectPackage&idPackage={{additionalPackage.idPackage}}">
                            <span class="glyphicon glyphicon-pencil edit-icon"></span>
                        </a>
                        <span ng-if="!areAllPayTypesAvailable(data.prices.Default, additionalPackage)"
                            class="glyphicon {{getAlertIcon(additionalPackage)}} warning-icon"
                            ng-click="showHideInfoBox(additionalPackage)"></span>
                        <div ng-if="additionalPackage.isInfoBoxVisible" class="{{getAlertClass(additionalPackage)}} warning-message">
                            {{getAlertText(additionalPackage)}}
                        </div>
                    </div>
                </div>
            </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>
</div>

<div class="my-packages-details-layer row">
    <div ng-repeat="(customer, price_list) in data.prices">
        <div class="comission-headers">
            <div class="price-col">
                <div class="customer-name">
                    {{customer}}
                </div>
            </div>
            <div class="price-col">{{'packages.headers.MINIMAL_SELL_PRICE' | translate}}</div>
            <div class="price-col">{{'packages.headers.MY_COMMISSION' | translate}}</div>
            <div class="price-col">{{'packages.headers.CUSTOMER_PRICE' | translate}}</div>
            <div class="price-col-small">{{'packages.headers.VISIBLE_TO_CUSTOMER' | translate}}</div>
        </div>
        <div ng-repeat="price in price_list" class="price-group">
            <div class="pay-type">
                {{'packages.headers.PAY_TYPE' | translate}}: {{price.payType}}
            </div>
            <div class="price-row">
                <div class="price-col">
                    {{'packages.headers.FIXED' | translate}}:
                </div>
                <div class="price-col">
                    {{price.minimalFixedPrice}}
                </div>
                <div class="price-col">
                    {{price.fixedCommission}}
                </div>
                <div class="price-col">
                    {{sumPrices([price.minimalFixedPrice, price.fixedCommission])}}
                </div>
                <div class="price-col-small">
                    <span class="glyphicon {{isVisibleToCustomer(price.visibleToCustomer)}}"></span>
                </div>
            </div>
            <div class="price-row">
                <div class="price-col">
                    {{'packages.headers.MONTHLY_RECURENCE' | translate}}:
                </div>
                <div class="price-col">
                    {{sumPrices([price.minimalRecurentPrice, price.minimalServicesPrice])}}
                </div>
                <div class="price-col">
                    {{price.recurentCommission}}
                </div>
                <div class="price-col">
                    {{sumPrices([price.minimalRecurentPrice, price.minimalServicesPrice, price.recurentCommission, price.recurentServicesCommission])}}
                </div>
            </div>
        </div>
    </div>
</div>
