<div class="order-details-extra-info col-md-4">
    <div class="order-details-items">
        <div class="order-details-label">{{'orders.tables.headers.orderItems' | translate}}</div>
        <div class="order-details-item" ng-repeat="package in data.packages">
            <div class="package-item-name">{{package.units}} x {{package.packageName}}</div>
            <div class="package-item-info">
                <div class="package-item-box">
                    <div class="order-details-label">Price:</div>
                    <div class="order-details-info order-details-price">{{calculatePrice([package.packageFixedPrice], package.units)}}
                    ( {{calculatePrice([package.packageRecuringPrice, package.packageServicePrice], package.units)}} / {{package.periodUnit}} )</div>
                </div>
                <div class="prices-info">
                    <div class="order-text">
                        <span ng-if="package.packagePayPeriod > 0">
                            {{'orders.tables.extra.PACKAGE_RECURENT' | translate}}
                            {{package.units}} x {{package.packageRecuringPrice}} / {{package.periodUnit}}
                            {{'orders.tables.extra.FOR' | translate}} {{package.packagePayPeriod}} {{package.periodUnit}}
                        </span>
                    </div>
                    <div class="order-text">
                        {{'orders.tables.extra.SERVICE_AND_SUPPORT' | translate}}
                        {{package.units}} x {{package.packageServicePrice}} / {{package.periodUnit}}
                        <span ng-if="package.servicesContractPeriod > 0">{{'orders.tables.extra.FOR' | translate}} {{package.servicesContractPeriod}} {{package.periodUnit}}</span>
                        {{'orders.tables.extra.EXTEND' | translate}} {{package.periodUnit}} (Max {{package.maxContractPeriod}})
                    </div>
                </div>
                <div ng-if="hasAgreement(package.packagePayPeriod, package.servicesContractPeriod)" class="package-item-box">
                    <div class="order-details-label">{{'orders.tables.headers.agreement' | translate}}:</div>
                    <div class="order-info-box" ng-if="package.packagePayPeriod > 0">
                        {{'orders.tables.extra.PACKAGE_AGREEMENT' | translate}}
                        {{package.packagePayPeriod}} {{package.periodUnit}}
                    </div>
                    <div class="order-info-box" ng-if="package.servicesContractPeriod > 0">
                        {{'orders.tables.extra.SERVICES_AGREEMENT' | translate}}
                        {{package.servicesContractPeriod}} {{package.periodUnit}}
                    </div>
                </div>
                <div ng-if="package.shortDesc" class="package-item-box">
                    <div class="order-details-label">{{'orders.tables.headers.step' | translate}}:</div>
                    <div class="order-details-info">{{package.shortDesc}}</div>
                </div>
            </div>
            <div class="package-item-status order-status-{{package.status}}">
                <span class="{{getStatusIcon(package.status)}}"></span>
            </div>
        </div>
    </div>
</div>

<div class="order-details-footer row">
<div class="order-details-total col-md-offset-10 col-md-2">
    <div class="order-details-label">{{'orders.tables.headers.total' | translate}}: {{data.orderTotalPrice}}</div>
</div>
</div>
<div class="order-details-status detailed-status detailed-status-{{data.status}}">{{data.status}}</div>
