{% extends "timepiece/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 crumbs %}
    {{ block.super }}
    <li>
        <span class="divider">/</span>
        <a href="{% url 'report_billable_hours' %}">Billable Hours Report</a>
    </li>
{% endblock crumbs %}

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

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

{% 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-container">
                {% if entries %}
                    <div id="chart"></div>
                {% else %}
                    <p>There are no entries which match your query.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <form class="filter" method="get" id="filter_form">
                <div class="control-group">
                    {% for field in filter_form %}
                        {% if field.name == 'from_date' or field.name == 'to_date' or field.name == 'trunc' %}
                            <label class="control-label{% if field.errors %} error{% endif %}">{{ field.label }}</label>
                            {% if field.errors %}
                                <ul class="error-list">
                                    {% for e in field.errors %}
                                        <li style="color:red;">{{ e }}</li>
                                    {% endfor %}
                                </ul>
                                <div class="clearfix"></div>
                            {% endif %}
                            <div class="controls{% if field.errors %} error{% endif %}">{{ field }}</div>
                        {% endif %}
                    {% endfor %}
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                </div>

                {% for field in filter_form %}
                    {% if field.name != 'from_date' and field.name != 'to_date' and field.name != 'trunc' %}
                        <div class="control-group{% if field.errors %} error{% endif %}{% if field.name == 'users' %} users{% endif %}">
                            <label class="control-label">
                                {{ field.label }}
                                <span>
                                    <a href="#" class="select-all">select all</a> |
                                    <a href="#" class="select-none">select none</a>
                                </span>
                            </label>
                            {% if field.errors %}
                                <ul class="error-list">
                                    {% for e in field.errors %}
                                        <li style="color:red;">{{ e }}</li>
                                    {% endfor %}
                                </ul>
                                <div class="clearfix"></div>
                            {% endif %}
                            <div class="controls">{{ field }}</div>
                        </div>
                    {% endif %}
                {% endfor %}
            </form>
        </div>
    </div>
{% endblock report_content %}
