<h3>
    <span localize="contract_headline"
          localize-data-number="::contractInfo.contract.number"
          localize-data-components="::contractInfo.totalComponents"
          localize-data-name="::contractInfo.product.name"></span>

    <span class="pull-right" ng-class="{ 'color-red': contractInfo.contract.hoursLeft < 0 }"
          ng-if="!contractInfo.contract.completed"><i class="fa fa-clock-o"></i>
        <span localize="hours_left" localize-data-hours="{{ contractInfo.contract.hoursLeft }}"></span></span>
    <span class="pull-right"
          ng-if="contractInfo.contract.completed && contractInfo.contract.status == ContractStatuses.Won">
                    <i class="fa fa-clock-o"></i>
                    <span localize="delivered_on" localize-data-day="::contractInfo.contract.completionDay"></span>
                </span>
</h3>
<div class="label-row">
                <span>
                    <span>
                        <i class="fa fa-chain" ng-if="::contractInfo.contract.type == ContractTypes.FixedPrice"></i>
                        <i class="fa fa-chain-broken" ng-if="::contractInfo.contract.type == ContractTypes.LimitedRFQ"></i>
                        <i class="fa fa-chain-broken" ng-if="::contractInfo.contract.type == ContractTypes.FullRFQ"></i>
                    </span>
                    <span localize="{{ ::contractInfo.contract.type }}"></span>
                </span>

    <span ng-if="::contractInfo.contract.type === ContractTypes.FixedPrice">{{ ::contractInfo.contract.price | currency }}</span>
    <span ng-if="::(contractInfo.contract.type == 'FixedPrice' && contractInfo.contract.status == 'NotSet') && contractInfo.contract.pricePerHour != null" localize="price_per_hour"
          localize-data-price="::contractInfo.contract.pricePerHour" localize-data-price-format="currency"></span>

    <span ng-class="{
                        'color-orange': contractInfo.contract.urgency == 'High',
                        'color-yellow': contractInfo.contract.urgency == 'Medium',
                        'color-green': contractInfo.contract.urgency == 'Low' }"
    ><i class="fa fa-exclamation-circle"></i>
        <span localize="urgency_label" localize-data-urgency="{{ GetLocalized(contractInfo.contract.urgency) }}"></span>
    </span>

    <span><i class="fa fa-hourglass-o"></i> <span localize="production_hours_label" localize-data-hours="::contractInfo.contract.chargeableHours"></span></span>
    <span class="color-red" ng-if="contractInfo.pastDueFee > 0">
                    <i class="fa fa-fire"></i>
                    {{ ::contractInfo.pastDueFee | currency }}</span>
</div>

<div class="flex-row">
    <div class="flex2 requirements">
        <component component="::stack.component"
                   ng-disabled="!stack.isAvailableInInventory"
                   class="small"
                   stack-amount="stack.amount"
                   ng-repeat="stack in contractInfo.stacks track by stack.component.name"
                   show-inventory-amount="true">
        </component>
    </div>

    <!-- Actions/Buttons -->
    <div class="flex1 text-right" ng-if="!hideActions">
        <table class="text-center margin-top">
            <tr>
                <td class="text-right" style="position: relative;">
                    <div ng-if="!contractInfo.contract.completed">
                        <div ng-if="contractInfo.contract.status != ContractStatuses.Lost">
                            <button ng-click="contractCtrl.cancelContract(contractInfo)"
                                    class="small red"
                                    style="width: 220px; margin-bottom: 3px;" localize="cancel_price" localize-data-price="contractInfo.cancellationFee" localize-data-price-format="currency"></button>
                            <button ng-click="contractCtrl.deliverContract(contractInfo)"
                                    class="small"
                                    ng-if="contractInfo.contract.type == 'FixedPrice' || contractInfo.contract.status == 'Won'"
                                    style="width: 220px;"
                                    ng-disabled="!contractInfo.isReadyForDelivery" localize="deliver_now_price" localize-data-price="(contractInfo.contract.price - contractInfo.pastDueFee)" localize-data-price-format="currency">
                            </button>
                        </div>

                        <p class="color-red text-center" ng-if="contractInfo.contract.status == 'Lost'"
                           localize="lost_contract_competitor" localize-data-competitor="contractInfo.contract.winnerOffer.name">
                        </p>
                    </div>

                    <div class="stamp red" ng-class="{
                                'red': contractInfo.contract.status == 'Lost',
                                'yellow': contractInfo.contract.status == 'Cancelled',
                                'green': contractInfo.contract.status == 'Won'
                            }" ng-if="contractInfo.contract.completed" localize="{{ contractInfo.contract.status }}">
                         <!-- Should show completed instead of Won -->
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
