
<table id="table-bookings" class="table" style="width:100%">
    <thead>
    <tr>
        <th>Comment</th>
        <td>Date</td>
        <td class="text-right">Cost</td>
    </tr>
    </thead>
    <tbody>

    {% set apps = pi.get_applications() %}

    {# Bookings marker row #}
    <tr class="table-primary">
        <td> Bookings </td>
        <td></td>
        <td></td>
    </tr>

    {# Then the other rows with real bookings info #}
    {% for b in all_bookings %}
    <tr>
        <td>{{ b['id'] }} --- {{ b['title'] }}</td>
        <td>{{ b['pretty_start']}} - {{ b['pretty_end'] }}</td>
        <td class="text-right">{{ b['total_cost'] }}</td>
    </tr>
    {% endfor %}

    {% if transactions|length > 0 %}
        {# Transactions marker row #}
        <tr class="table-primary">
            <td> Extra costs </td>
            <td></td>
            <td></td>
        </tr>

        {% for t in transactions %}
            <tr>
                <td>{{ t.comment }}</td>
                <td>{{ t.date|pretty_date }}</td>
                <td class="text-right">{{ t.amount|int }}</td>
            </tr>
        {% endfor %}

    {% endif %}

    {# Total marker row #}
    {% set booking_total = all_bookings|sum(attribute='total_cost') %}
    {% set extra_total = transactions|sum(attribute='amount') %}
    <tr class="table-primary">
        <td> <strong>TOTAL TO BE INVOICED </strong> </td>
        <td></td>
        <td class="text-right"><strong>{{ booking_total + extra_total|int }}</strong></td>
    </tr>

    </tbody>
</table>


<script>
    var pi_id = '{{ pi.id }}';
    var bookings = {{ all_bookings|tojson }};

    $('#table-bookings').DataTable({
        sDom: 'lrtip',
        paging: false,
        info: false,
        ordering: false
    });

</script>