{% extends 'generic/object_retrieve.html' %}
{% load helpers %}

{% block content_left_page %}
    <div class="card">
        <div class="card-header">
            <strong>Cable</strong>
        </div>
        <table class="table table-hover card-body attr-table">
            <tr>
                <td>Type</td>
                <td>{{ object.get_type_display|placeholder }}</td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    {{ object.status| hyperlinked_object_with_color }}
                </td>
            </tr>
            <tr>
                <td>Label</td>
                <td>{{ object.label|placeholder }}</td>
            </tr>
            <tr>
                <td>Cable Type</td>
                <td>
                    {% if object.cable_type %}
                        {{ object.cable_type|hyperlinked_object }}
                    {% else %}
                        <span class="text-secondary">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            {% if object.cable_type %}
                <tr>
                    <td>Lanes</td>
                    <td>{{ object.connected_lanes }} / {{ object.total_lanes }} connected</td>
                </tr>
            {% elif not object.breakout_eligible %}
                <tr>
                    <td></td>
                    <td>
                        <small class="text-secondary">
                            <span class="mdi mdi-information-outline me-4"></span>Breakout not available for this cable's termination types
                        </small>
                    </td>
                </tr>
            {% endif %}
            <tr>
                <td>Color</td>
                <td>
                    {% if object.color %}
                        <span class="label nb-color-block" style="background-color: #{{ object.color }}">&nbsp;</span>
                    {% else %}
                        <span class="text-secondary">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>Length</td>
                <td>
                    {% if object.length %}
                        {{ object.length }} {{ object.get_length_unit_display }}
                    {% else %}
                        <span class="text-secondary">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
{% endblock content_left_page %}

{% block content_right_page %}
    {% with conns=object.get_connections %}
        <div class="card">
            <div class="card-header">
                <strong>Connections</strong>
                {% if object.cable_type.is_breakout %}
                    <span class="badge bg-info float-end">{{ conns.a_connector_count }}A &rarr; {{ conns.b_connector_count }}B</span>
                {% endif %}
            </div>
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Side A</th>
                        <th>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">
                                    {% if object.cable_type.is_breakout %}
                                        <strong>A{{ row.a.connector }}</strong>
                                        {% if row.a.lanes > 1 %}<span class="badge bg-secondary ms-1">{{ row.a.lanes }} lanes</span>{% endif %}
                                        <br>
                                    {% endif %}
                                    {% include 'dcim/inc/cable_connection_termination.html' with term=row.a.termination %}
                                </td>
                            {% endif %}
                            {% if row.b_rowspan > 0 %}
                                <td{% if row.b_rowspan > 1 %} rowspan="{{ row.b_rowspan }}"{% endif %} class="align-top">
                                    {% if object.cable_type.is_breakout %}
                                        <strong>B{{ row.b.connector }}</strong>
                                        {% if row.b.lanes > 1 %}<span class="badge bg-secondary ms-1">{{ row.b.lanes }} lanes</span>{% endif %}
                                        <br>
                                    {% endif %}
                                    {% include 'dcim/inc/cable_connection_termination.html' with term=row.b.termination %}
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if object.cable_type %}
            <div class="card mt-3">
                <div class="card-header">
                    <strong>Lane Mapping</strong>
                    <span class="float-end">{{ object.cable_type|hyperlinked_object }}</span>
                </div>
                <div id="lane-mapping-scroll" class="card-body" style="overflow-x: auto;">
                    {# Wrapper shrink-wraps the diagram so it centers when it fits and scrolls when it doesn't. #}
                    <div style="width: max-content; margin-inline: auto;">
                        {{ object.get_mapping_diagram_svg }}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endwith %}
{% endblock content_right_page %}

{% block javascript %}
    {{ block.super }}
    {% if object.cable_type %}
        <script>
            // Start the lane-mapping diagram scrolled to its center when it's wider than its card.
            (function () {
                const container = document.getElementById("lane-mapping-scroll");
                if (container) {
                    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
                }
            })();
        </script>
    {% endif %}
{% endblock javascript %}