{% include "horizon/common/_data_table.html" %}

<style>
/* Chevron column - shrink to content */
table#images th:nth-child(1),
table#images td:nth-child(1) {
  width: 1%;
  white-space: nowrap;
}

/* Chevron rotation for image expandable rows
   Uses Bootstrap's automatic .collapsed class management */
a.chevron-toggle {
  color: inherit;
}

a.chevron-toggle>span {
  transition: transform 0.3s ease;
}

/* Rotate chevron 90 degrees when row is expanded (not collapsed) */
a.chevron-toggle:not(.collapsed)>span {
  transform: rotate(90deg);
}

/* Remove padding from detail row cells to eliminate gap when collapsed */
.table>tbody>tr.image-detail-row>td {
  padding: 0;
  overflow: hidden;
  border-top: none;
}

.table>tbody>tr.image-detail-row>td:has(div.in) {
  border-top: 1px solid #ddd;
}

/* Paired property layout for expanded image details */
.table>tbody>tr.image-detail-row>td div.image-details {
  margin: 8px;
}

.image-details .row {
  margin-bottom: 2px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

.image-details .row:last-child {
  border-bottom: none;
}

.image-prop-label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #777;
}

.image-prop-value {
  display: block;
  font-size: 13px;
  word-break: break-all;
}

.image-prop-value code {
  font-size: 12px;
  word-break: break-all;
}
</style>