{% load mathfilters %}
<div class="mr-3 ml-3">

    {% if not types %}
        {% include 'ibs/partials/no_data.html' %}
    {% else %}
        {% for dong in dong_list %} {# 동 수만큼 반복 #}
            <div style="float: left;" class="m-1">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="pt-3">
                            {% with line_list=total_lines.pop units=units.pop w=38 h=18 f=10 %}

                                <div style="height: {{ max_floor.floor_no__max|sub:units.first.floor_no|mul:h|mul:2 }}px;"></div>

                                {% for unit in units %}
                                    {% if 1 == 2 %} {# 상층부 1~ 호라인 등 공백 로직 구현 #}
                                        <div style="width: {{ w }}px; height: {{ h|mul:2 }}" class="bg-light"></div>
                                    {% endif %}

                                    {% if unit.floor_no == 1 %} {# 피로티 로직 구현 #}
                                        {% with lp=line_list.pop %}
                                            {% with fl=forloop.counter|sub:lp fu=forloop.counter|sub:unit.bldg_line %}
                                                {% with n=fl|sub:fu %}
                                                    {% if n > 0 %}
                                                        {% ifchanged n %}
                                                            {% for i in 'a'|mul:n %}
                                                                <div style="width: {{ w }}px; height: {{ h|mul:2 }}px; {% if lp == 1 and forloop.counter == 1 %}clear: left;{% endif %} float: left;"
                                                                     class="bg-secondary-lighten border"></div>
                                                            {% endfor %}
                                                        {% endifchanged %}
                                                    {% endif %}
                                                {% endwith %}
                                            {% endwith %}
                                        {% endwith %}
                                    {% endif %}

                                    <div style="{% if unit.bldg_line == 1 %}clear:left;{% endif %} float:left;">
                                        <div style="width:{{ w }}px; height:{{ h }}px; text-align:center; font-size:{{ f }}px; padding: 1px 0; background: {{ unit.unit_type.color }}"
                                             class="border">
                                            <span>{{ unit.name }}</span>
                                        </div>
                                        <div style="width:{{ w }}px; height:{{ h }}px; text-align:center; font-size:{{ f }}px;"
                                             data-toggle="tooltip" title=""
                                             class="border {% if unit.key_unit.contract.contractor.status == '1' %}bg-success-lighten{% endif %} {% if unit.key_unit.contract.contractor.status == '2' %}bg-primary-lighten{% endif %}">
                                            <a href="{% url 'ibs:contract:register' %}?project={{ this_project.id }}&task={{ unit.key_unit.contract.contractor.status }}&order_group={{ unit.key_unit.contract.order_group.id }}&type={{ unit.key_unit.unit_type.id }}&key_unit={{ unit.key_unit.id }}&unit_number={{ unit.key_unit.houseunit.id }}&cont_id={{ unit.key_unit.contract.id }}">
                                                {{ unit.key_unit.contract.contractor.name }}
                                            </a>
                                        </div>
                                    </div>

                                    {% if forloop.last %} {# 필로티 로직 추가 #}
                                        {% for i in line_list %}
                                            {% if i > unit.bldg_line %}
                                                <div style="width: {{ w }}px; height: {{ h|mul:2 }}px; float: left;"
                                                     class="bg-secondary-lighten border"></div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}

                                {% endfor %}

                            {% endwith %}
                        </td>
                    </tr>
                </table>
                <div class="col-12 text-center"
                     style="border: 1px solid #3e3e3e; padding: 8px; background-color: #848486; color: #FFF; font-weight: bold;">
                    {{ dong }}
                </div>
            </div>
        {% endfor %}
    {% endif %}
</div>