{% load helpers %}

<div class="card">
<h5 class="card-header">
    Non-Racked Devices
</h5>
<div class="card-body">
{% if nonracked_devices %}
    <table class="table table-hover">
        <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Type</th>
            <th colspan="2">Parent Device</th>
        </tr>
        {% for device in nonracked_devices %}
        <tr{% if device.device_type.u_height %} class="warning"{% endif %}>
            <td>
                <a href="{% url 'dcim:device' pk=device.pk %}">{{ device }}</a>
            </td>
            <td>{{ device.device_role }}</td>
            <td>{{ device.device_type }}</td>
            {% if device.parent_bay %}
                <td>{{ device.parent_bay.device|linkify }}</td>
                <td>{{ device.parent_bay }}</td>
            {% else %}
                <td colspan="2" class="text-muted">&mdash;</td>
            {% endif %}
        </tr>
        {% endfor %}
    </table>
    {% else %}
        <div class="text-muted">
            None
        </div>
    {% endif %}
    </div>
    {% if perms.dcim.add_device %}
        {% if object|meta:'verbose_name' == 'rack' %}
        <div class="card-footer text-end noprint">
            <a href="{% url 'dcim:device_add' %}?site={{ object.site.pk }}&rack={{ object.pk }}" class="btn btn-primary btn-sm">
                <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
                Add a Non-Racked Device
            </a>
        </div>
        {% elif object|meta:'verbose_name' == 'site' %}
        <div class="card-footer text-end noprint">
            <a href="{% url 'dcim:device_add' %}?site={{ object.pk }}" class="btn btn-primary btn-sm">
                <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
                Add a Non-Racked Device
            </a>
        </div>
        {% elif object|meta:'verbose_name' == 'location' %}
        <div class="card-footer text-end noprint">
            <a href="{% url 'dcim:device_add' %}?site={{ object.site.pk }}&location={{ object.pk }}" class="btn btn-primary btn-sm">
                <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
                Add a Non-Racked Device
            </a>
        </div>
        {% endif %}
    {% endif %}
</div>