<style>
.binary-preview strong {
display: block;
margin-bottom: 0.25rem;
}
.binary-summary {
margin: 0;
display: grid;
gap: 0.125rem;
}
.binary-summary-row {
display: grid;
grid-template-columns: 5.625rem 1fr;
gap: 0.375rem;
}
.binary-summary-row dt,
.binary-summary-row dd {
margin: 0;
}
.binary-summary-row dt {
color: var(--status-neutral-text-muted);
}
.binary-summary-row dd {
font-weight: 600;
color: var(--status-neutral-text);
}
</style>
<div class="binary-preview">
<dl class="binary-summary">
{% match self.body %}
{% when BinaryPreviewBody::Modified with { expected_size, actual_size, added_bytes, deleted_bytes } %}
<div class="binary-summary-row">
<dt>expected</dt>
<dd>{{ expected_size }} bytes</dd>
</div>
<div class="binary-summary-row">
<dt>actual</dt>
<dd>{{ actual_size }} bytes</dd>
</div>
<div class="binary-summary-row">
<dt>added</dt>
<dd>{{ added_bytes }} bytes</dd>
</div>
<div class="binary-summary-row">
<dt>deleted</dt>
<dd>{{ deleted_bytes }} bytes</dd>
</div>
{% when BinaryPreviewBody::Single with { size } %}
<div class="binary-summary-row">
<dt>size</dt>
<dd>{{ size }} bytes</dd>
</div>
{% endmatch %}
</dl>
</div>