{% extends "::base.html.twig" %}

{% block title "List of Target Transactions" %}
    
{% block content %}
{{ include(workplan_links, {'show_search': false}, with_context = false) }}

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="center-text">
                    <span class="label">Target Transactions</span>
                </div>
            </div>
            <div class="panel-body">
                {% if target is not null %}
                {% set id = target.getId() %}
                <span style="font-size: 14px; font-weight: 400;">
                    {{ target.getDetail() }}<br/>
                    {{ currency ~ ' ' ~ target.budget|number_format(2) }}
                </span><br/>

                <table class="table table-bordered table-condensed">
                    <thead>
                        <tr><th>Date</th><th>Details</th><th>Amount ({{ currency }})</th></tr>
                    </thead>
                    <tbody>
                        {% for post in data %}
                        <tr>
                            <td>{{ post.doneOn|date(date_format) }}</td>
                            <td>{{ post.details }}</td>
                            <td>{{ post.amount|number_format(2) }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="3">There are no transactions under this target currently.</td>
                        </tr>
                        {% endfor %}
                        <tr>
                            <th colspan="2" style="text-align: right; font-size: 14px;">Total Amount</th>
                            <td style="font-size: 14px; font-weight: bold;">{{ spent|number_format(2) }}</td>
                        </tr>
                        <tr>
                            <th colspan="2" style="text-align: right; font-size: 14px;">Balance</th>
                            <td style="font-size: 14px; font-weight: bold;">{{ (target.budget - spent)|number_format(2) }}</td>
                        </tr>
                    </tbody>
                </table>
                {% else %}
                Please click on a target in the left panel to view its details here.
                {% endif %}
            </div>
        </div>                          
    </div>
</div>
{% endblock %}