<div class="dialog" style="width: 520px">
    <h1>
        <span localize="contract_completed"></span>
        <i class="fa fa-times pull-right close-button" close-all-ui></i>
    </h1>
    <div class="padding">
        <p localize="contract_delivered_resume" localize-data-number="ctrl.job.number"></p>

        <table class="medium">
            <tbody>
                <tr>
                    <td localize="deadline"></td>
                    <td class="text-bold">{{Helpers.GetDeadlineText(ctrl.job.hoursLeft) }}</td>
                </tr>
                <tr>
                    <td localize="initial_price"></td>
                    <td class="text-bold">{{ ctrl.job.price | currency }}</td>
                </tr>
                <tr>
                    <td localize="past_due_fee"></td>
                    <td class="text-bold color-red">
                        -{{ ctrl.job.pastDueFee | currency }}
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td localize="xp_gained"></td>
                    <td class="text-bold text-green">{{ ctrl.job.xpEarned }}</td>
                </tr>
                <tr class="text-bold">
                    <td localize="total_payout">Total Payout</td>
                    <td class="color-green" ng-class="{'color-green': ctrl.job.totalPayout >= 0, 'color-red': ctrl.job.totalPayout < 0 }">{{ ctrl.job.totalPayout | currency  }}</td>
                </tr>
            <tr>
                <td colspan="2" class="text-center">
                    <button type="button" class="cancel" close-all-ui>Close</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
