{% extends "timepiece/base.html" %}
{% load timepiece_tags bootstrap_toolkit %}

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

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

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <h2>Reports</h2>
            <ul class="nav nav-pills">
                <li>
                    {% if perms.timepiece.view_entry_summary %}
                        <a href="{% url hourly_report %}">Hourly</a>
                    {% endif %}
                </li>
                <li class="active">
                    <a href="#">Billable Hours</a>
                </li>
                <li>
                    {% if perms.timepiece.view_entry_summary %}
                        <a href="{% url timepiece-summary %}">General Ledger</a>
                    {% endif %}
                </li>
                <li>
                    {% if perms.timepiece.view_payroll_summary %}
                        <a href="{% url payroll_summary %}">Payroll Report</a>
                    {% endif %}
                </li>
            </ul>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            {% date_filters %}
        </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">
                <div class="dates span2">
                    {{ date_form|as_bootstrap }}
                    <input class="btn" type="submit" name="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>

    

    <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 content %}
