{% if connection %}
<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Optical Connection</strong>
    </div>
    <div class="panel-body">
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td><strong>Connection</strong></td>
                <td><a href="{{ connection.get_absolute_url }}">{{ connection }}</a></td>
            </tr>
            {% if connection.interface_a.id == interface.id %}
            {% with remote_iface=connection.interface_z %}
            <tr>
                <td><strong>Remote Device</strong></td>
                <td>
                    <a href="{{ remote_iface.device.get_absolute_url }}">{{ remote_iface.device }}</a>
                </td>
            </tr>
            <tr>
                <td><strong>Remote Interface</strong></td>
                <td>
                    <a href="{{ remote_iface.get_absolute_url }}">{{ remote_iface }}</a>
                </td>
            </tr>
            {% endwith %}
            {% else %}
            {% with remote_iface=connection.interface_a %}
            <tr>
                <td><strong>Remote Device</strong></td>
                <td>
                    <a href="{{ remote_iface.device.get_absolute_url }}">{{ remote_iface.device }}</a>
                </td>
            </tr>
            <tr>
                <td><strong>Remote Interface</strong></td>
                <td>
                    <a href="{{ remote_iface.get_absolute_url }}">{{ remote_iface }}</a>
                </td>
            </tr>
            {% endwith %}
            {% endif %}
        </table>
    </div>
</div>
{% endif %}

{% if mux_mapping %}
<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Mux Wavelength Mapping</strong>
    </div>
    <div class="panel-body">
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td><strong>Wavelength</strong></td>
                <td>
                    <a href="{{ mux_mapping.wavelength.get_absolute_url }}">
                        {{ mux_mapping.wavelength.value }} nm
                    </a>
                </td>
            </tr>
            {% if mux_span %}
            <tr>
                <td><strong>Span</strong></td>
                <td>
                    <a href="{{ mux_span.get_absolute_url }}">{{ mux_span }}</a>
                </td>
            </tr>
            {% endif %}
            <tr>
                <td><strong>Mapping</strong></td>
                <td>
                    <a href="{{ mux_mapping.get_absolute_url }}">
                        View mapping details
                    </a>
                </td>
            </tr>
        </table>
    </div>

</div>
{% endif %}