{% extends 'timepiece/time-sheet/contract/base.html' %}
{% load timepiece_tags %}
{% load url from future %}

{% block title %}{{ contract }} Report{% endblock %}

{% block crumbs %}
    {{ block.super }}
    <li><span class="divider">/</span> <a href="{% url 'view_contract' contract.pk %}">Contract Detail</a></li>
{% endblock crumbs %}

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <h2>{{ contract }} Report</h2>
            <ul class="nav nav-pills">
                <li><a href="{% url 'list_contracts' %}">Contracts</a></li>
            </ul>

            <table class='table table-bordered'>
                <tr>
                    <th>Project</th>
                    <td>{{ contract.project }}</td>
                </tr>
                <tr>
                    <th>Time Frame</th>
                    <td>{{ contract.start_date|date }} &mdash; {{ contract.end_date }}</td>
                </tr>
                <tr>
                    <th>Hours</th>
                    <td>Worked {{ contract.hours_worked }} of {{ contract.num_hours }} ({% widthratio contract.hours_worked contract.num_hours 100 %}%)</td>
                </tr>
            </table>
        </div>
    </div>

    {% if contract.milestones.exists %}
        <div class="row-fluid">
            <div class="span12">
                <h3>Milestones</h3>

                <table class='table table-striped table-bordered'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Time Frame</th>
                            <th>Budget</th>
                            <th></th>
                            <th>Worked</th>
                            <th></th>
                            <th>Remaining</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for milestone in contract.milestones.select_related %}
                            <tr>
                                <td>{{ milestone.name }}</td>
                                <td>
                                    {% if milestone.is_complete %}
                                        Complete
                                    {% else %}
                                        {% if milestone.is_before %}
                                            Upcoming
                                        {% else %}
                                            {{ milestone.end_date|work_days }} days left
                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td>{{ milestone.start_date }} &mdash; {{ milestone.end_date }}</td>
                                <td class='hours'>{{ milestone.hours }}</td>
                                <td class='hours'>{{ milestone.total_budget }}</td>
                                <td class='hours'>{{ milestone.hours_worked }}</td>
                                <td class='hours'>{{ milestone.total_hours_worked }}</td>
                                <td class='hours'>{{ milestone.hours_remaining }}</td>
                                <td class='hours'>{{ milestone.total_hours_remaining }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

{% endblock %}
