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

{% block title pageTitle %}
    
{% block content %}
{{ include(workplan_links, {'show_search': false}, with_context = false) }}

{% set available = false %}
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="col-md-5 center center-text">
            <span class="label">{{ pageTitle }}</span>
        </div>
    </div>
    <div class="panel-body">
        <div class="panel-group" id="targets">
            {% for data in details %}
            {% set available = true %}
            {% set id = data.id %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <table class="fillwidth">
                        <tbody>
                            <tr class="clickable" data-toggle="collapse" data-parent="#targets" data-target="#tgt{{ id }}">
                                <td title="Target Detail & Number Of Indicators">
                                    {{ data.detail }}<br/>
                                    # Of Indicators - {{ data.numOfInds }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel-collapse collapse" id="tgt{{ id }}">
                    <table class="table table-bordered" style="{{ tbl_margin }}">
                        <colgroup>
                            <col style="width: available;"/><col style="width: 12%;"/>
                            <col style="width: 12%;"/><col style="width: 12%;"/>
                            <col style="width: 10%;"/><col style="width: 15%;"/>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Indicator</th><th>Planned Qty</th><th>Achieved Qty</th>
                                <th>Achieved %</th><th>Balance</th><th>Period Covered %</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ind in data.inds %}
                            <tr>
                                <td>{{ ind.indicator }}</td>
                                <td>{{ ind.targeted }}</td>
                                <td>{{ ind.achieved }}</td>
                                <td>{{ ((ind.achieved/ind.targeted)*100)|round ~ '%' }}</td>
                                <td>{{ ind.targeted - ind.achieved }}</td>
                                <td>{{ prdConsumed ~ '%' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endfor %}
        </div>
        {% if not available %}
        <div>
            There are no indicators in the selected status currently.
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}