{{ 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 .ConfigFetchError }}
    {{/* Hold is reachable but the config blob fetch failed, so layer
         commands are missing. DB layers are still rendered below. */}}
    {{ template "alert" (dict "Type" "warning" "Message" "Layer commands couldn't be loaded from the hold. Showing what we have from the registry.") }}
    {{ end }}
    {{ if .Layers }}
    <div class="overflow-x-auto">
        <table class="table table-xs w-full layers-table">
            <caption class="sr-only">Image layer history</caption>
            <thead>
                <tr class="text-xs">
                    <th scope="col" class="w-8">#</th>
                    <th scope="col">Command</th>
                    <th scope="col" class="text-right">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>
                        {{ else if not .EmptyLayer }}
                            <span class="text-xs text-base-content/40 italic">no command recorded</span>
                        {{ end }}
                    </td>
                    <td class="text-right text-sm whitespace-nowrap" data-bytes="{{ .Size }}">{{ humanizeBytes .Size }}</td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    {{ else }}
    {{ template "state-empty" (dict
        "Icon" "history"
        "Title" "No layer history"
        "Subtext" "This image was built without history metadata, common for squashed images or tarballs imported with docker load."
    ) }}
    {{ end }}
</div>
{{ end }}