<div id="send-support-mail" class="row">
    <div class="order-informations col-md-12">
        <h4>{{'orders.tables.extra.ORDER_DETAILS' | translate}}</h4>
        <div>
            <span class="order-number-icon">#</span>
            <b>{{'orders.tables.headers.orderNumber' | translate}}: </b>
            {{ordersDetails.orderNumber}}
        </div>
        <div ng-if="ordersDetails.reference">
            <span class="glyphicon glyphicon-link"></span>
            <b>{{'orders.tables.headers.reference' | translate}}: </b>
            {{ordersDetails.reference}}
        </div>
        <div ng-if="ordersDetails.tender">
            <span class="glyphicon glyphicon-dashboard"></span>
            <b>{{'orders.tables.headers.tender' | translate}}: </b>
            {{ordersDetails.tender}}
        </div>
        <div>
            <span class="glyphicon glyphicon-user"></span>
            <b>{{'orders.tables.headers.commercialLead' | translate}}: </b>
            {{ordersDetails.commercialLead}}
        </div>
        <hr />
    </div>
    <div class="packages-info col-md-12">
        <h4>{{'orders.tables.headers.orderItems' | translate}}</h4>
        <div class="order-details-extra-info col-md-12">
            <div class="order-details-item" ng-repeat="package in packages">
                <div class="send-support-mail-details">
                    <span class="glyphicon glyphicon-shopping-cart"></span>
                    {{package.units}} x {{package.packageName}}
                </div>
                <div class="package-item-info">
                    <div class="send-support-mail-details">
                        <b>{{'orders.tables.extra.PRICE' | translate}}: </b>
                        {{calculatePrice([package.packageFixedPrice], package.units)}}
                        ( {{calculatePrice([package.packageRecuringPrice, package.packageServicePrice], package.units)}} / {{package.periodUnit}} )
                    </div>
                    <div class="prices-info">
                        <div class="send-support-mail-details" 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}}
                        </div>
                        <div class="send-support-mail-details">
                            <b>{{'orders.tables.extra.SERVICE_AND_SUPPORT' | translate}}: </b>
                            {{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="send-support-mail-details">
                        <b>{{'orders.tables.headers.agreement' | translate}}: </b>
                        <div class="order-info-box" ng-if="package.packagePayPeriod > 0">
                            <b>{{'orders.tables.extra.PACKAGE_AGREEMENT' | translate}}: </b>
                            {{package.packagePayPeriod}} {{package.periodUnit}}
                        </div>
                        <div class="order-info-box" ng-if="package.servicesContractPeriod > 0">
                            <b>{{'orders.tables.extra.SERVICES_AGREEMENT' | translate}}: </b>
                            {{package.servicesContractPeriod}} {{package.periodUnit}}
                        </div>
                    </div>
                    <div ng-if="package.shortDesc" class="send-support-mail-details">
                        <b>{{'orders.tables.headers.step' | translate}}: </b>
                        {{package.shortDesc}}
                    </div>
                    <div ng-if="package.endOfLife" class="send-support-mail-details">
                        <b>{{'orders.tables.headers.endOfLife' | translate}}</b>:
                        {{package.endOfLife}}
                    </div>
                    <div class="package-item-status order-status-{{package.status}}">
                        <b>{{'orders.tables.headers.status' | translate}}: </b>
                        {{package.status}}
                    </div>
                </div>
                <hr />
            </div>
        </div>
    </div>

    <div class="order-support-mail-text">
        <div class="mail-support-text-header col-md-12">
            {{'orders.tables.extra.SUPPORT_USER_TEXT' | translate}}
        </div>
        <div id="mail-support-container" class="col-md-offset-1 col-md-10 col-md-offset-1">
            <textarea class="mail-support-text col-md-12" ng-model="supportMailText"></textarea>
        </div>
    </div>

</div>
