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

{% block title %}Dashboard{% endblock title %}

{% block bodyid %}dashboard{% endblock bodyid %}

{% block breadcrumb %}{% endblock breadcrumb %}

{% block extrajs %}
    <script>
        var basePath = "{% url 'dashboard' %}",
            tabIds = ['progress', 'all-entries', 'online-users'],
            defaultTab = 'progress';
    </script>
    <script charset="utf-8" src="{{ STATIC_URL }}timepiece/js/permanent_tabs.js"></script>

    <script>
        // The largest number of hours worked or assigned on any project.
        var max_hours = {% get_max_hours %};
    </script>
    <script charset="utf-8" src="{{ STATIC_URL }}timepiece/js/dashboard.js"></script>
    <script charset="utf-8" src="{{ STATIC_URL }}timepiece/js/prevent_double_click.js"></script>
{% endblock extrajs %}

{% block content %}
    {% if perms.entries.can_clock_in %}
        <h2>{{ week_start|date:'M j' }} to {{ week_end|date:'M j' }}</h2>

        <div class="row-fluid">
            <div class="span12" id="active-entry">

                <div id="active-buttons">
                    <div class="pull-left">
                        <a class="btn btn-primary" href="{% url 'clock_in' %}">
                            {% if active_entry %}Switch Entry{% else %}Clock In{% endif %}
                        </a>
                        {% if active_entry %}
                            <a class="btn btn-primary" href="{% url 'clock_out' %}">Clock Out</a>
                            <a class="btn btn-{% if active_entry.is_paused %}inverse{% else %}primary{% endif %} prevent-doubleclick"
                                    href="{% url 'toggle_pause' %}">
                                {% if active_entry.is_paused %}Resume{% else %}Pause{% endif %}
                            </a>
                            <a class="btn btn-primary" href="{% url 'edit_entry' active_entry.pk %}">Edit</a>
                        {% endif %}
                    </div>
                    <div class="hidden-phone pull-right">
                        <a class="btn btn-primary" href="{% url 'create_entry' %}" title="Add Entry">
                            <i class="icon-white icon-plus"></i>
                        </a>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div id="active-text">
                    {% if active_entry %}
                        You have been clocked into
                        <strong>{{ active_entry.activity.name }} for {{ active_entry.project }}</strong>
                        since {{ active_entry.start_time|time }}
                        {% ifnotequal active_entry.start_time.date today %}
                            {% if active_entry.start_time.date < week_start or active_entry.start_time.date > week_end %}
                                on {{ active_entry.start_time|date:'M j' }}
                            {% else %}
                                on {{ active_entry.start_time|date:"l" }}
                            {% endif %}
                        {% endifnotequal %}
                        ({{ active_entry.get_total_seconds|humanize_seconds }} time clocked{% if active_entry.seconds_paused or active_entry.is_paused %} and {{ active_entry.get_paused_seconds|humanize_seconds }} paused{% endif %}).
                    {% else %}
                        You are not currently clocked into a project.
                    {% endif %}
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs">
            <li{% if active_tab == 'progress' %} class="active"{% endif %}>
                {% url "dashboard" "progress" as link %}
                <a class="tab-link" to="progress" href="{{ link|add_parameters:request.GET }}">Progress</a>
            </li>
            <li{% if active_tab == 'all-entries' %} class="active"{% endif %}>
                {% url "dashboard" "all-entries" as link %}
                <a class="tab-link" to="all-entries" href="{{ link|add_parameters:request.GET }}">All Entries</a>
            </li>
            <li{% if active_tab == 'online-users' %} class="active"{% endif %}>
                {% url "dashboard" "online-users" as link %}
                <a class="tab-link" to="online-users" href="{{ link|add_parameters:request.GET }}">Online Users</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane{% if active_tab == 'progress' %} active{% endif %}" id="progress">
                <div id="overall-progress">
                    <div id="overall-label">
                        <span>Total:</span>
                        {{ total_worked|humanize_hours:"{hours:02d}:{minutes:02d}" }} worked
                        of {{ total_assigned|humanize_hours:"{hours:02d}:{minutes:02d}" }} expected
                    </div>
                    <div id="overall-bar"
                        data-worked="{{ total_worked }}"
                        data-assigned="{{ total_assigned }}">
                    </div>
                </div>
                <div id="project-progress">
                    {% if project_progress %}
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>Hours Assigned</th>
                                    <th>Hours Worked</th>
                                    <th class="hidden-phone progress-col">Progress</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for data in project_progress %}
                                    <tr{% if active_entry.project.pk == data.project.pk %} id="active-project"{% endif %}>
                                        <td><a href="{% url 'clock_in' %}?project={{ data.project.pk }}">{{ data.project }}</a></td>
                                        <td class="nowrap">
                                            {{ data.assigned|humanize_hours:"{hours:02d}:{minutes:02d}" }}
                                        </td>
                                        <td class="nowrap">
                                            {{ data.worked|humanize_hours:"{hours:02d}:{minutes:02d}" }}
                                        </td>
                                        <td class="hidden-phone progress-col project-bar"
                                            data-worked = "{{ data.worked }}"
                                            data-assigned = "{{ data.assigned }}">
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <p>No entries or assignments exist for this week.</p>
                    {% endif %}
                </div>
            </div>

            <div class="tab-pane{% if active_tab == 'all-entries' %} active{% endif %}" id="all-entries">
                {% if week_entries %}
                    {% url 'dashboard' active_tab='all-entries' as next_url %}
                    {% regroup week_entries by start_time|date:'l, F j' as daily_entries %}
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Project</th>
                                <th class="hidden-phone">Activity</th>
                                <th>From</th>
                                <th>To</th>
                                <th class="hidden-phone">Pause Time</th>
                                <th>Total Time</th>
                                <th class="hidden-phone">Comment</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for day in daily_entries %}
                                {% sum_hours day.list as daily_total %}
                                <tr class="emphasized-row">
                                    <th colspan="3" style="border-right: 0px;">{{ day.grouper }}</th>
                                    <th class="hidden-phone" colspan="2" style="border-left: 0px;"></th>
                                    <th>{{ daily_total|humanize_seconds:"{hours:02d}:{minutes:02d}" }}</th>
                                    <th class="hidden-phone"></th>
                                </tr>
                                {% for entry in day.list %}
                                    <tr rel="tooltip" title="{{ entry.comments|escape }}">
                                        <td>
                                            {% if entry.status == "unverified" %}
                                                <a href="{% url 'edit_entry' entry.id %}?next={{ next_url|add_parameters:request.GET|urlencode }}"><i class="icon-pencil"></i></a>
                                                <a href="{% url 'delete_entry' entry.id %}?next={{ next_url|add_parameters:request.GET|urlencode }}"><i class="icon-remove"></i></a>
                                            {% else %}
                                                <span class="label label-success"><i class="icon-ok icon-white"></i></span>
                                            {% endif %}
                                            {{ entry.project }}
                                        </td>
                                        <td class="hidden-phone">{{ entry.activity.name }}</td>
                                        <td class="nowrap">{{ entry.start_time|time }}</td>
                                        <td class="nowrap">
                                            {% if entry.end_time %}
                                                {{ entry.end_time|time }}
                                            {% else %}
                                                current
                                            {% endif %}
                                        </td>
                                        <td class="hidden-phone nowrap">
                                            {% with entry.get_paused_seconds as pause_time %}
                                                {% if pause_time %}
                                                    {{ pause_time|humanize_seconds }}
                                                {% endif %}
                                            {% endwith %}
                                        </td>
                                        <td class="nowrap">{{ entry.get_total_seconds|humanize_seconds:"{hours:02d}:{minutes:02d}" }}</td>
                                        <td class="hidden-phone">
                                            {% if entry.comments|length > 50 %}
                                                {{entry.comments|slice:':50'}}&hellip;
                                            {% else %}
                                                {{ entry.comments }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p>No entries exist for this week.</p>
                {% endif %}
            </div>

            <div class="tab-pane{% if active_tab == 'online-users' %} active{% endif %}" id="online-users">
                {% if others_active_entries %}
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Project</th>
                                <th class="hidden-phone">Since</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for entry in others_active_entries %}
                                <tr>
                                    <td><i class="icon-user"></i> {{ entry.user.first_name }} {{ entry.user.last_name }}</td>
                                    <td><span class="hidden-phone">{{ entry.activity.name }} for </span>{{ entry.project }}</td>
                                    <td class="hidden-phone nowrap">
                                        {{ entry.start_time|time }}
                                        {% ifnotequal entry.start_time.date today %}
                                            {% if entry.start_time.date < week_start or entry.start_time.date > week_end %}
                                                on {{ entry.start_time|date:'M j' }}
                                            {% else %}
                                                on {{ entry.start_time|date:"l" }}
                                            {% endif %}
                                        {% endifnotequal %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p>Currently there are no other users with an active entry.</p>
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock content %}
