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

{% block title 'Approving Accountabilities Filed' %}

{% block content %}
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="col-md-3 center center-text">
            <span class="label">Approving Accountabilities Filed</span>
        </div>
    </div>
    <div class="panel-body">
        {{ include(mini_tactic, {'tactic': tactic}, with_context = false) }}
                
        {{ form_start(form) }}
        <div id="sub_form" class="row">
            {% for line in form.reqnLines %}
                {% if line.vars.value.amountSpent is not null and 
                    (line.vars.value.accountedFor is not null and 
                    not line.vars.value.accountedFor) %}
                {{ _self.widget_prototype(line) }}
                {% endif %}
            {% endfor %}
        </div>
        <div class="form-group">
            <div class="col-lg-offset-2 col-lg-4">
                {{ form_widget(form.save) }}
            </div>
        </div>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% macro widget_prototype(widget) %}
{% set form = widget %}
{% set name = widget.vars.full_name %}

<div class="col-md-6" data-content="{{ name }}">
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-bordered table-striped" style="{{ tbl_margin }} margin-bottom: 5px;">
                <colgroup>
                    <col style="width: 25%;"/><col style="width: available;"/>
                </colgroup>
                <tbody>
                    <tr><td>Item</td><td>{{ form.itemDetails.vars.value }}</td></tr>
                    <tr><td>Amount Released</td><td>{{ form.amount.vars.value|number_format(2) }}</td></tr>
                    <tr><td>Amount Spent</td><td>{{ form.amountSpent.vars.value|number_format(2) }}</td></tr>
                </tbody>
            </table>
            {{ form_row(form.accountedFor) }}
            {{ form_row(form.reference) }}
        </div>
    </div>
</div>
{% endmacro %}