{% extends "timepiece/time-sheet/reports/base.html" %}
{% load timepiece_tags bootstrap_toolkit %}
{% load url from future %}

{% block title %}Billable Hours Report{% endblock title %}

{% block bodyid %}billable-hours{% endblock bodyid %}

{% block extrajs %}
    {{ block.super }}
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}timepiece/js/chart/billable_chart.js" data-hours="{{ data }}" data-dates="{{ dates }}"></script>
{% endblock extrajs %}

{% block crumbs %}
    {{ block.super }}
    <li><span class="divider">/</span> <a href="{% url 'billable_hours' %}">Billable Hours Report</a></li>
{% endblock crumbs %}

{% block report_nav %}
    {% with 'billable_hours' as active %}
        {{ block.super }}
    {% endwith %}
{% endblock report_nav %}

{% block report_content %}
    <div class="row-fluid">
        <div class="span12">
            {% date_filters "filter_form" %}
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div id="chart" class="chart"></div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <form class="filter" method="get" id="filter_form">
                <div class="dates span2">
                    {{ date_form|as_bootstrap }}
                    <input class="btn btn-primary" type="submit" value="Update" />
                </div>

                {% for field in billable_form %}
                <div class="control-group {% if field.label == "Group By" %}group-by{% endif %}{% if field.label == "People" %}people{% endif %}">
                    <label class="control-label">
                        {{ field.label }}
                        {% if field.label != "Group By" %}
                            <span>
                                <a href="#" class="select">select all</a> | <a href="#" class="select-none">select none</a>
                            </span>
                        {% endif %}
                    </label>
                    <div class="controls">
                        {{ field }}
                    </div>
                </div>
                {% endfor %}
            </form>
        </div>
    </div>
{% endblock report_content %}
