<div id="shop-package-details" class="shop-package-details">
    <div id="shop-package-details-layer" class="shop-package-details-layer row">
        <div class="shop-package-general-info col-md-6">
            <div class="shop-package-title col-md-12">{{selectedPackage.name}}</div>
            <div class="shop-package-reference col-md-12">( {{selectedPackage.reference}} )</div>

            <div class="shop-package-full-description">
                <div class="shop-package-text" ng-bind-html="renderHtml(selectedPackage.shortDescription)"></div>
            </div>

            <div class="shop-package-details-country">
                <div class="shop-package-label">{{'shop.headers.SOLD_IN' | translate}}:</div>
                <div class="shop-package-text">
                    {{selectedPackage.country}} <span class="flag-icon flag-icon-{{selectedPackage.countryCode}}"></span>
                </div>
            </div>

            <div class="shop-package-details-documents">
                <div class="shop-package-label">{{'shop.headers.DOCUMENTS' | translate}}:</div>
                <div class="package-documents">
                    <div class="package-document" ng-repeat="document in selectedPackage.documents">
                        <a href="utils/api/downloadFile?idDocument={{document.idDocument}}&fileName={{document.documentName}}.{{document.extension}}">
                            <span class="glyphicon glyphicon-file"></span> {{document.documentName}}.{{document.extension}}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="not-available"class="alert alert-warning col-md-6" ng-if="!selectedPackage.prices.length">
            {{'shop.messages.NOT_AVAILABLE' | translate}}
        </div>

        <div id="shop-package-buy-info" class="shop-package-buy-info col-md-6" ng-if="selectedPackage.prices.length">
            <div class="selection-price">
                {{getFixedPrice()}} {{country.currency}} +
                ( {{getRecurrentPrice()}} {{country.currency}} / {{selectedOptions.price.periodUnit}} )
            </div>

            <div class="shop-package-options">
                <div ng-show="hasOptions()">
                    <div class="shop-package-label options-header">{{'shop.headers.PACKAGE_OPTIONS' | translate}}:</div>
                    <div class="package-option" ng-repeat="group in selectedPackage.groups">
                        <div class="shop-package-label"> {{group.groupName}}:</div>
                        <div>
                            <span class="option-value {{getOptionClass(group.idGroup, option.idOptionPackage)}}"
                                ng-repeat="option in group.options">
                                <input type="radio"
                                       name="package-option-{{option.idOptionPackage}}"
                                       class="package-option-input"
                                       ng-model="selectedOptions.other[group.idGroup]"
                                       value="{{option.idOptionPackage}}"/>
                                <span class="option-value-text"
                                    ng-click="selectOption(group.idGroup, option.idOptionPackage)"
                                    ng-bind-html="getOptionPriceText(option.optionName, option)"></span>
                                <span class="price-info-btn glyphicon glyphicon-info-sign"
                                    ng-if="!option.isAvailable"
                                    ng-click="showOptionInfo(option)"></span>
                                <span class="alert-warning" ng-if="option.isInfoBoxVisible">{{'shop.messages.EXTRA_NOT_AVAILABLE' | translate}}</span>
                            </span>
                        </div>
                    </div>
                </div>

                <div ng-show="selectedPackage.additionalPackages.length">
                    <div class="shop-package-label options-header">{{'shop.headers.ADDITIONAL_PACKAGES' | translate}}:</div>
                    <div ng-repeat="additionalPackage in selectedPackage.additionalPackages">
                        <span class="option-value {{getAdditionalClass(additionalPackage.idAdditionalPackage)}}">
                            <input type="checkbox"
                                class="package-option-checkbox"
                                name="package-option-{{additionalPackage.idAdditionalPackage}}"
                                ng-model="selectedOptions.additionalPackages[additionalPackage.idAdditionalPackage]"/>
                            <span class="option-value-text"
                            ng-click="selectAdditional(additionalPackage.idAdditionalPackage)"
                            ng-bind-html="getOptionPriceText(additionalPackage.packageName, additionalPackage)"></span>
                            <span class="price-info-btn glyphicon glyphicon-info-sign"
                                ng-if="!additionalPackage.isAvailable"
                                ng-click="showOptionInfo(additionalPackage)"></span>
                            <span class="alert-warning" ng-if="additionalPackage.isInfoBoxVisible">{{'shop.messages.EXTRA_NOT_AVAILABLE' | translate}}</span>
                        </span>
                    </div>
                </div>
            </div>

            <div class="shop-package-prices">
                <div class="shop-package-label">{{'shop.headers.AGREEMENT_OPTIONS' | translate}}:</div>
                <div class="shop-package-pay-type {{getPriceClass(price)}}" ng-repeat="price in selectedPackage.prices">
                    <input type="radio"
                           name="price-type"
                           class="price-type-option"
                           ng-model="selectedOptions.idPaymentType"
                           ng-change="onPriceSelect(price.idPaymentType)"
                           value="{{price.idPaymentType}}"/>
                    <span class="price-value-text" ng-click="onPriceSelect(price.idPaymentType)">
                        <div class="shop-package-text shop-pacakge-option-agreement">{{price.payType}}</div>
                        <div class="shop-package-text shop-pacakge-option-price">
                            {{price.fixedExtra}} {{country.currency}} +
                            ( {{sumPrices([price.recurentExtra, price.servicesExtra])}} {{country.currency}} / {{price.periodUnit}} )
                        </div>
                    </span>
                    <span class="price-info-btn glyphicon glyphicon-info-sign" ng-click="showInfo(price)"></span>
                    <div class="price-extra-info alert alert-info" ng-if="price.isInfoVisible">
                        <div class="package-price-recurrent">
                            <span class="price-info-title">{{'shop.headers.PACKAGE_RECURRENT' | translate}}</span>
                            {{price.recurentExtra}} {{country.currency}} / {{price.periodUnit}}
                            <span ng-if="price.packagePayPeriod > 0">{{'shop.extra.FOR' | translate}} {{price.packagePayPeriod}} {{price.periodUnit}}</span>
                        </div>
                        <div class="services-price-recurrent">
                            <span class="price-info-title">{{'shop.headers.SERVICE_RECURRENT' | translate}}</span>
                            {{price.servicesExtra}} {{country.currency}} / {{price.periodUnit}}
                            <span ng-if="price.servicesContractPeriod > 0">{{'shop.extra.FOR' | translate}} {{price.servicesContractPeriod}} {{price.periodUnit}}</span>
                            {{'shop.headers.PRICE_EXTEND' | translate}} {{price.periodUnit}} (Max {{price.maxContractPeriod}} {{price.periodUnit}})
                        </div>
                    </div>
                </div>
            </div>

            <div id="add-to-cart-btn" ng-click="addToCart()" class="btn btn-primary add-to-cart-btn">{{'shop.buttons.ADD_TO_CART' | translate}}</div>

            <div id="shop-packages-details-cl" class="shop-packages-details-cl">
                <div>
                    <div class="shop-package-label">{{'shop.headers.SOLD_BY' | translate}}:</div>
                    <div class="shop-package-text">{{selectedPackage.commercialLead.name}}</div>
                </div>

                <div>
                    <div class="shop-package-label">{{'shop.headers.PHONE' | translate}}:</div>
                    <div class="shop-package-text">{{selectedPackage.commercialLead.phone}}</div>
                </div>

                <div>
                    <div class="shop-package-label">{{'shop.headers.MAIL' | translate}}:</div>
                    <div class="shop-package-text">{{selectedPackage.commercialLead.mail}}</div>
                </div>
            </div>
        </div>
        <div id="back-to-shop-btn" class="back-btn-layer col-md-12">
            <a href="shop"><div class="btn btn-primary">{{'shop.buttons.BACK' | translate}}</div></a>
        </div>
    </div>
</div>
