{% load humanize mathfilters %}

<div class="table-responsive">
    <table class="table table-bordered table-hover table-sm">
        <thead class="text-center bg-dragula">
        <tr>
            <th rowspan="2" style="vertical-align: middle; width: 13%">프로젝트명</th>
            <th rowspan="2" style="vertical-align: middle; width: 8%">타입</th>
            <th rowspan="2" style="vertical-align: middle; width: 8%">세대수</th>
            <th rowspan="2" style="vertical-align: middle; width: 8%">청약건수</th>
            <th colspan="{{ groups.count|add:"1" }}" style="width: 35%">계약건수</th>
            <th rowspan="2" style="vertical-align: middle; width: 8%">잔여세대</th>
            <th rowspan="2" style="vertical-align: middle; width: 10%">계약율</th>
            <th rowspan="2" style="vertical-align: middle; width: 10%">분양율(청약+계약)</th>
        </tr>
        <tr>
            {% for og in groups %}
                <td>{{ og }}</td>
            {% endfor %}
            <th class="bg-light" style="width: 10%">합계</th>
        </tr>
        </thead>

        <tbody>
        {% for type in types %}
            {% with cnum=contract_num.pop un=unit_num.pop rn=reserv_num.pop tn=tcn.pop %}
                <tr>
                    {% if forloop.first %}
                        <td rowspan="{{ types.count }}" class="text-center"
                            style="vertical-align: middle;">{{ this_project }}</td>
                    {% endif %}
                    <td class="text-center" style="background: {{ type.color }};">{{ type }}</td>
                    <td class="text-right">{{ un|default:"-"|intcomma }} 세대</td>
                    <td class="text-right">{{ rn|default:"-"|intcomma }}</td>

                    {% for og in groups %}
                        <td class="text-right">{{ cnum.pop|default:"-"|intcomma }}</td>
                    {% endfor %}
                    <td class="text-right text-dark">{{ tn|default:"-"|intcomma }}</td>
                    <td class="text-right text-dark">{{ un|sub:tn|sub:rn|default:"-"|intcomma }}</td>
                    <td class="text-right">{% if tn and un %}{{ tn|div:un|mul:100|floatformat:2|intcomma }}{% else %}-{% endif %} %</td>
                    {% with cr=rn|add:tn %}
                        <td class="text-right">{% if tn and un %}{{ cr|div:un|mul:100|floatformat:2|intcomma }}{% else %}-{% endif %} %</td>
                    {% endwith %}
                </tr>
            {% endwith %}
        {% endfor %}

        <tr class="bg-light">
            <th class="text-center">합계</th>
            <th class="text-center"></th>
            <th class="text-right">{{ total_unit_num|default:"-"|intcomma }} 세대</th>
            <th class="text-right">{{ total_reserv_num|default:"-"|intcomma }}</th>
            {% for og in groups %}
                <th class="text-right">{% if ocn %}{{ ocn.pop|default:"-"|intcomma }}{% endif %}</th>
            {% endfor %}
            <th class="text-right">{{ total_tcn|default:"-"|intcomma }}</th>
            <th class="text-right">{{ total_unit_num|sub:total_tcn|sub:total_reserv_num|default:"-"|intcomma }}</th>
            <th class="text-right">
                {% if total_unit_num > 0 %}{{ total_tcn|div:total_unit_num|mul:100|floatformat:2|default:"-" }} %{% else %}-{% endif %}
            </th>
            <th class="text-right">
                {% if total_unit_num > 0 %}{{ total_tcn|add:total_reserv_num|div:total_unit_num|mul:100|floatformat:2 }} %{% else %}-{% endif %}
            </th>
        </tr>
        </tbody>
    </table>
</div>