{% extends 'timepiece/base.html' %}

{% load bootstrap_toolkit %}
{% load static %}
{% load timepiece_tags %}

{% block crumbs %}
    {{ block.super }}
    <li><span class="divider">/</span> <a href="{% url 'clock_in' %}">Clock In</a></li>
{% endblock crumbs %}

{% block title %}Clock In{% endblock title %}

{% block extrajs %}
    <script charset="utf-8" src="{% static "timepiece/js/prevent_double_click.js" %}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function newParameters(query) {
                query.project = $('#id_project').val();
            }
            $('#id_activity_0').djselectable('option', 'prepareQuery', newParameters);
        });
    </script>
    <script>
        $.ui.djselectable.prototype._comboButtonTemplate = function (input) {
            var icon = $("<i>").addClass("icon-chevron-down");
            // Remove current classes on the text input
            $(input).attr("class", "");
            // Wrap with input-append
            $(input).wrap('<div class="input-append" />');
            // Return button link with the chosen icon
            return $("<a>").append(icon).addClass("btn ");
        };
        $.ui.djselectable.prototype._removeButtonTemplate = function (item) {
            var icon = $("<i>").addClass("icon-remove-sign");
            // Return button link with the chosen icon
            return $("<a>").append(icon).addClass("btn pull-right");
        };
    </script>
{% endblock extrajs %}

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <h2>Clock Into Project</h2>

            <br style="clear: both;" />

            {% if active %}
                <div class="alert">
                    <button type="button" class="close" data-dismiss="alert">x</button>
                    <h4 class="alert-heading">Switching Projects</h4>
                    <p>You are currently clocked into {{active.activity.name }} for {{ active.project }} with {{ active.get_total_seconds|humanize_seconds }} time clocked. Switching to a new project below will clock out of this entry and start a new one. Please enter any notes about switching below.</p>
                </div>
            {% endif %}

            <form class="form-horizontal prevent-doubleclick" accept-charset="utf-8"
                    action="" method="post">
                {% csrf_token %}
                {{ form|as_bootstrap:"horizontal" }}
                <div class="form-actions">
                    <input class="btn btn-primary" type="submit" name="submit" value="Clock In" />
                    <input class="btn cancel" type="button" value="Cancel" onclick="history.back()" />
                </div>
            </form>
        </div>
    </div>
{% endblock content %}
