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

{% block title %}Current Contracts{% endblock title %}
{% block bodyid %}contracts{% endblock bodyid %}

{% block extrajs %}
    <script>
        var max_work_fraction = {{ max_work_fraction }};
        var max_schedule_fraction = {{ max_schedule_fraction }};
    </script>
    <script charset="utf-8" src="{{ STATIC_URL }}timepiece/js/contract.js"></script>
{% endblock extrajs %}

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <h2 class="page-title">Current Contracts</h2>
            <table class="table table-bordered table-striped table-condensed contracts">
                <thead>
                    <tr>
                        <th rowspan="2">Name</th>
                        <th rowspan="2">Start Date</th>
                        <th rowspan="2">End Date</th>
                        <th rowspan="2">Contract Hours</th>
                        <th colspan="2">Hours Worked</th>
                        <th rowspan="2" class="hidden-phone">Progress: days elapsed/hours worked</th>
                        <th rowspan="2">Contract Type</th>
                    </tr>
                    <tr>
                        <th>Billable</th>
                        <th>Non-billable</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contract in contracts %}
                        {% if contract.end_date < today %}
                            <tr class="expired" title="This contract has expired.">
                        {% elif contract.end_date < warning_date %}
                            <tr class="expiring-soon" title="This contract will expire in less than 2 weeks.">
                        {% else %}
                            <tr>
                        {% endif %}
                            <td><a href="{% url 'view_contract' contract.id %}">{{ contract.name }}</a></td>
                            <td class="nowrap">{{ contract.start_date|date:'M j, Y' }}</td>
                            <td class="nowrap{% if contract.end_date < today %} past{% endif %}">
                                {{ contract.end_date|date:'M j, Y' }}
                                {% if contract.end_date >= today and contract.end_date < warning_date %}
                                    <i class="icon-warning-sign"></i>
                                {% endif %}
                            </td>
                            <td class="nowrap hours">
                                {{ contract.contracted_hours|floatformat:2 }}
                                {% if contract.pending_hours %}
                                    <span class="pending_hours">(+{{ contract.pending_hours|floatformat:2 }})</span>
                                {%  endif %}
                            </td>
                            <td class="nowrap hours">{{ contract.hours_worked|floatformat:2 }} ({% widthratio contract.hours_worked contract.contracted_hours 100 %}%)</td>
                            <td class="nowrap hours">{{ contract.nonbillable_hours_worked|floatformat:2 }}</td>
                            <td class="hidden-phone">
                                <div class="project-bar" style="width: 100%"
                                    data-fraction="{{ contract.fraction_schedule }}"></div>
                                <div class="project-bar" style="width: 100%"
                                    data-fraction="{{ contract.fraction_hours }}"></div>
                            </td>
                            <td class="nowrap">{{ contract.get_type_display }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock content %}
