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

{% block title %}Invoices{% endblock %}

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

{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <h2>Invoice Summary</h2>
            <ul class="nav nav-pills">
                <li>
                    <a href="{% url 'invoice_projects' %}">Create Invoice</a>
                </li>
                {# Not sure why the below is here if it doesn't link to anywhere. Adding inline styling for now until that question is answered. #}
                <li style="padding: 8px;">
                    Previous Invoices
                </li>
            </ul>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <form class="form-inline" accept-charset="UTF-8" method="get" action="">
                {{ search_form|as_bootstrap:"inline" }}
                <button type="submit" class="btn">Search</button>
            </form>
        </div>
    </div>

    {% load pagination_tags %}

    <div class="row-fluid">
        <div class="span12">
            {% if invoices %}
                {% autopaginate invoices %}
                {% paginate %}
                <table class="table table-bordered table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Reference</th>
                            <th>Project</th>
                            <th>Status</th>
                            <th>Invoiced by</th>
                            <th>Created on</th>
                            <th>Starting on</th>
                            <th>Ending on</th>
                            <th>Comments</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for invoice in invoices %}
                            <tr>
                                <td><a href="{% url 'view_invoice' invoice.pk %}">{{ invoice.pk }}</a></td>
                                <td>{{ invoice.number|default:'' }}</td>
                                <td>{{ invoice.project }}</td>
                                <td>{{ invoice.status|capfirst }}</td>
                                <td>{{ invoice.user.get_full_name }}</td>
                                <td>{{ invoice.created|date:"M d Y P" }}</td>
                                <td>{{ invoice.start|date:"M d Y" }}</td>
                                <td>{{ invoice.end|date:"M d Y" }}</td>
                                <td title="{{ invoice.comments }} ">{{ invoice.comments|truncatewords:12 }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% paginate %}
            {% else %}
                <p>There are no invoices.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}
