{% if hosts %}
<div class="row mb-3">
  <div class="col-12">
    <div class="card">
      <h5 class="card-header">Cabinet Layouts</h5>
      <div class="card-body">
        {% for host, mounts in hosts %}
        <div class="mb-4">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">
              <a href="{{ host.get_absolute_url }}">{{ host }}</a>
              {% if host.position %}
                <span class="text-muted small ms-2">U{{ host.position }}{% if host.face %} ({{ host.get_face_display }}){% endif %}</span>
              {% endif %}
              <span class="text-muted small ms-2">
                &middot;
                {% for mount in mounts %}{{ mount.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
              </span>
            </h6>
            <a href="{% url 'dcim:device_cabinet_layout' pk=host.pk %}" class="btn btn-sm btn-outline-primary">
              <i class="mdi mdi-open-in-new"></i> Open Layout tab
            </a>
          </div>
          <div class="border rounded p-2 text-center">
            <object type="image/svg+xml"
                    class="cabinet-svg-embed"
                    data-src="{% url 'dcim:device_cabinet_layout_svg' pk=host.pk %}"
                    style="max-width: 100%; height: auto;"
                    aria-label="Cabinet layout for {{ host }}">
              Cabinet layout for {{ host }}
            </object>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{# v0.7.1: propagate NetBox theme into <object>-embedded SVGs #}
<script>
(function() {
  function getTheme() {
    return localStorage.getItem('netbox-color-mode') ||
           document.documentElement.getAttribute('data-bs-theme') || 'light';
  }
  function buildUrl(baseSrc, mode) {
    var sep = baseSrc.indexOf('?') >= 0 ? '&' : '?';
    return baseSrc + sep + 'theme=' + mode + '&_t=' + Date.now();
  }
  function initSVGs() {
    var mode = getTheme();
    document.querySelectorAll('.cabinet-svg-embed').forEach(function(obj) {
      if (obj.getAttribute('data')) return;
      var baseSrc = obj.getAttribute('data-src');
      if (baseSrc) obj.setAttribute('data', buildUrl(baseSrc, mode));
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSVGs);
  } else {
    initSVGs();
  }
  window.addEventListener('netbox.colorModeChanged', function(evt) {
    var newMode = (evt.detail && evt.detail.netboxColorMode) || getTheme();
    document.querySelectorAll('.cabinet-svg-embed').forEach(function(obj) {
      var baseSrc = obj.getAttribute('data-src');
      if (baseSrc) obj.setAttribute('data', buildUrl(baseSrc, newMode));
    });
  });
})();
</script>
{% endif %}