<div class="dialog" style="width: 800px; height: 705px; max-height: 705px; text-align: center">
    <h1 localize="new_contract_available"></h1>

    <div class="padding">
        <p style="margin-bottom: 20px;" localize="contract_request_description"> </p>

        <contract ng-contract="contractRequest" ng-hide-actions="true" class="border"></contract>

        <hr class="big">

        <!-- Price Per Hour Range -->
        <div ng-if="contractRequest.type != ContractTypes.FixedPrice">
            <p style="margin-bottom: 20px;" class="alert alert-info" localize="competing_other_companies"></p>

            <div ng-if="contractRequest.status == ContractStatuses.NotSet">
                <span localize="price_per_hour" localize-data-price="{{ctrl.pricePerHour}}" localize-data-price-format="currency"></span>
                <br />
                <input type="range" class="secondary-color" ng-model="ctrl.pricePerHour"
                       value="100" step="10" min="80" max="500"
                       style="width: 100%;margin-right: 10px;display: inline-block;">
                <table class="price-range-indicator">
                    <tr>
                        <td localize="cheap"></td>
                        <td localize="average"></td>
                        <td localize="expensive"></td>
                    </tr>
                </table>
            </div>

            <div class="flex-row" ng-if="contractRequest.status != ContractStatuses.NotSet">
                <div class="flex1">
                    <!-- Winners -->
                    <table class="big text-left" ng-if="contractRequest.offers.length">
                        <tbody>
                        <tr ng-repeat="offer in contractRequest.offers">
                            <td ng-class="{ 'text-bold': !offer.competitor }">
                                <i class="fa fa-check-circle color-green"
                                   ng-if="contractRequest.winnerOffer.name == offer.name"></i>
                                {{ offer.name }}
                            </td>
                            <td class="text-right">
                                <span uib-tooltip="{{ GetLocalized('price_per_hour', { price: Math.round(offer.price / contractRequest.chargeableHours) }) }}">{{ offer.price | currency }}</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex1 flex-super-center">
                    <div class="stamp red" ng-if="contractRequest.winnerOffer != null" ng-class="{
                                'red': contractRequest.status == ContractStatuses.Lost,
                                'yellow': contractRequest.status == ContractStatuses.Cancelled,
                                'green': contractRequest.status == ContractStatuses.Won
                            }" localize="{{ contractRequest.status }}">
                         <!-- Should show completed instead of Won -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="margin-top flex-super-center" ng-if="contractRequest.status == ContractStatuses.NotSet">
            <button ng-click="ctrl.declineContract()"
                    class="red" style="width: 220px; height: 60px; margin: 5px;" localize="decline_contract">
            </button>

            <button ng-click="ctrl.sendOffer()"
                    class="blue"
                    ng-if="contractRequest.type != ContractTypes.FixedPrice"
                    style="width: 220px; height: 60px; margin: 5px;">
                <span localize="send_offer"></span>
                <br>
                ({{ contractRequest.chargeableHours *
                ctrl.pricePerHour | currency }})
            </button>

            <button ng-click="ctrl.acceptContract()"
                    ng-if="contractRequest.type == ContractTypes.FixedPrice"
                    style="width: 220px; height: 60px; margin: 5px;" localize="accept_contract">
            </button>
        </div>

        <!-- Close -->
        <button ng-click="ctrl.close()"
                ng-if="contractRequest.status != ContractStatuses.NotSet"
                class="cancel"
                style="margin-top: 10px;" localize="close"></button>
    </div>
</div>
