{{ define "layers-section" }}
<div class="space-y-4 min-w-0 pt-6">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">Layers ({{ len .Layers }})</h2>
        <label class="flex items-center gap-2 text-sm cursor-pointer">
            <input type="checkbox" class="checkbox checkbox-xs show-empty-layers-cb" data-toggle-empty-layers>
            <span>Show empty layers</span>
        </label>
    </div>
    {{ if .Layers }}
    <div class="overflow-x-auto">
        <table class="table table-xs w-full layers-table">
            <thead>
                <tr class="text-xs">
                    <th class="w-8">#</th>
                    <th>Command</th>
                    <th class="text-right w-24">Size</th>
                </tr>
            </thead>
            <tbody>
                {{ range .Layers }}
                <tr data-empty="{{ .EmptyLayer }}" data-no-command="{{ and (not .Command) (not .EmptyLayer) }}">
                    <td class="font-mono text-xs">{{ .Index }}</td>
                    <td>
                        {{ if .Command }}
                            <code class="font-mono text-xs break-all line-clamp-2" title="{{ .Command }}">{{ .Command }}</code>
                        {{ end }}
                    </td>
                    <td class="text-right text-sm whitespace-nowrap" data-bytes="{{ .Size }}">{{ humanizeBytes .Size }}</td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    {{ else }}
    <div class="py-8 text-sm text-base-content/70 max-w-prose">
        <p class="font-medium text-base-content">No layer history available</p>
        <p class="mt-1">This image was built without history metadata — common for squashed images or tarballs imported with <code class="font-mono text-xs bg-base-300 px-1 py-0.5 rounded">docker load</code>.</p>
    </div>
    {{ end }}
</div>
{{ end }}