<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Optical Connections</strong>
    </div>
    <div class="panel-body">
        {% if connections %}
            <table class="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Interface</th>
                        <th>Wavelength</th>
                        <th>Remote Device</th>
                        <th>Remote Interface</th>
                        <th>Span</th>
                    </tr>
                </thead>
                <tbody>
                    {% for connection in connections %}
                        <tr>
                            {% if connection.interface_a.device == device %}
                                <td>
                                    <a href="{{ connection.interface_a.get_absolute_url }}">{{ connection.interface_a }}</a>
                                </td>
                                <td>
                                    {% if connection.wavelength %}
                                        <a href="{{ connection.wavelength.get_absolute_url }}">{{ connection.wavelength.value }} nm</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if connection.interface_z.device %}
                                        <a href="{{ connection.interface_z.device.get_absolute_url }}">{{ connection.interface_z.device }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if connection.interface_z %}
                                        <a href="{{ connection.interface_z.get_absolute_url }}">{{ connection.interface_z }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            {% else %}
                                <td>
                                    <a href="{{ connection.interface_z.get_absolute_url }}">{{ connection.interface_z }}</a>
                                </td>
                                <td>
                                    {% if connection.wavelength %}
                                        <a href="{{ connection.wavelength.get_absolute_url }}">{{ connection.wavelength.value }} nm</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if connection.interface_a.device %}
                                        <a href="{{ connection.interface_a.device.get_absolute_url }}">{{ connection.interface_a.device }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if connection.interface_a %}
                                        <a href="{{ connection.interface_a.get_absolute_url }}">{{ connection.interface_a }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            {% endif %}
                            <td>
                                {% if connection.span %}
                                    <a href="{{ connection.span.get_absolute_url }}">{{ connection.span }}</a>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p class="text-muted">No optical connections found for this device.</p>
        {% endif %}
        
    </div>
</div> 