{% load humanize mathfilters %}

<div class="table-responsive">
    <table class="table table-bordered table-hover table-sm">
        <thead class="text-center bg-light">
        <tr>
            <th rowspan="2" style="width: 15%">프로젝트</th>
            <th rowspan="2" style="width: 13%">총 매출예산 (A)</th>
            <th rowspan="2" style="width: 12%">총 계약금액 (B)</th>
            <th rowspan="2" style="width: 12%">실 수납금액 (C)</th>
            <th rowspan="2" style="width: 12%">계약 미수금액 (B-C)</th>
            <th rowspan="2" style="width: 12%">미 계약금액 (A-B)</th>
        </tr>
        </thead>
        <tbody>
        <tr class="bg-dragula">
            <th class="text-center"><i class="mdi mdi-folder-open font-17"></i> {{ this_project|default:"-" }}</th>
            <th class="text-right">{{ total_budget|default:"-"|intcomma }}</th>
            <th class="text-right">{{ total_contract|default:"-"|intcomma }}</th>
            <th class="text-right">{{ total_paid|default:"-"|intcomma }}</th>
            <th class="text-right">{{ total_contract|sub:total_paid|default:"-"|intcomma }}</th>
            <th class="text-right">{{ total_budget|sub:total_contract|default:"-"|intcomma }}</th>
        </tr>
        {% for type in types %}
            <tr>
            {% with cn=contract_num.pop pt=payment_type.pop total=type.average_price|mul:type.num_unit %}
                <td class="pl-5"><i class="mdi mdi-box-shadow font-17" style="color: {{ type.color }}"></i> {{ type }}</td>
                <td class="text-right">{{ total|default:"-"|intcomma }}</td>
                {% with contract_total=type.average_price|mul:cn %}
                <td class="text-right text-dark">{{ contract_total|default:"-"|intcomma }}</td>
                <td class="text-right text-primary">{{ pt|default:"-"|intcomma }}</td>
                <td class="text-right text-danger">{{ type.average_price|mul:cn|sub:pt|default:"-"|intcomma }}</td>
                <td class="text-right">{{ total|sub:contract_total|default:"-"|intcomma }}</td>
                {% endwith %}
            {% endwith %}
            </tr>
        {% endfor %}
        <tr class="bg-dragula">
            <td class="pl-5"><i class="mdi mdi-box-shadow text-black-50 font-17"></i> 근린생활시설</td>
            <td class="text-right">-</td>
            <td class="text-right">-</td>
            <td class="text-right">-</td>
            <td class="text-right">-</td>
            <td class="text-right">-</td>
        </tr>
        </tbody>
    </table>
</div>