{% load form_helpers %}
{% comment %}
    Cable connection form — A always left, B always right, using HTML table for real rowspan.
{% endcomment %}

{% with conns=form.get_connection_fields %}
    {% if conns %}
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <strong>Connections</strong>
                <button type="button" id="cable-swap-sides" class="btn btn-secondary btn-sm" title="Swap A and B side termination values">
                    <span aria-hidden="true" class="mdi mdi-swap-horizontal me-4"></span>Swap A / B
                </button>
            </div>
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th class="w-50">Side A</th>
                        <th class="w-50">Side B</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in conns.rows %}
                        <tr>
                            {% if row.a_rowspan > 0 %}
                                <td{% if row.a_rowspan > 1 %} rowspan="{{ row.a_rowspan }}"{% endif %} class="align-top border-end p-3">
                                    {% with a=row.a %}
                                        {% if conns.cable_type.is_breakout %}
                                            <h4><strong>A{{ a.connector }}</strong>{% if a.lanes > 1 %} <span class="badge bg-secondary">{{ a.lanes }} lanes</span>{% endif %}</h4>
                                        {% endif %}
                                        <div id="a_conn_{{ a.connector }}_fields">
                                            {% render_field a.type_field %}
                                            <div id="a_conn_{{ a.connector }}_termination_fields">
                                                {% render_field a.parent_field %}
                                                {% render_field a.term_field %}
                                            </div>
                                        </div>
                                    {% endwith %}
                                </td>
                            {% endif %}
                            {% if row.b_rowspan > 0 %}
                                <td{% if row.b_rowspan > 1 %} rowspan="{{ row.b_rowspan }}"{% endif %} class="align-top p-3">
                                    {% with b=row.b %}
                                        {% if conns.cable_type.is_breakout %}
                                            <h4><strong>B{{ b.connector }}</strong>{% if b.lanes > 1 %} <span class="badge bg-secondary">{{ b.lanes }} lanes</span>{% endif %}</h4>
                                        {% endif %}
                                        <div id="b_conn_{{ b.connector }}_fields">
                                            {% render_field b.type_field %}
                                            <div id="b_conn_{{ b.connector }}_termination_fields">
                                                {% render_field b.parent_field %}
                                                {% render_field b.term_field %}
                                            </div>
                                        </div>
                                    {% endwith %}
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endwith %}