at-container-registry/pkg/appview/templates/partials/digest-content.html

{{ define "digest-content" }}
<!-- Layers + Vulnerabilities Side by Side -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Layers (Left) -->
    <div class="card bg-base-200 shadow-sm border border-base-300 p-6 space-y-4 min-w-0">
        <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">
                <caption class="sr-only">Image layers</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>
                            {{ 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 manifest has no layer history recorded."
        ) }}
        {{ end }}
    </div>

    <!-- Vulnerabilities + SBOM (Right) -->
    <div class="card bg-base-200 shadow-sm border border-base-300 p-6 space-y-4 min-w-0">
        <div role="tablist" class="tabs tabs-bordered">
            <input type="radio" id="scan-tab-vulns" name="scan-tabs" role="tab" class="tab" aria-label="Vulnerabilities" aria-controls="scan-panel-vulns" checked="checked" />
            <div id="scan-panel-vulns" role="tabpanel" aria-labelledby="scan-tab-vulns" class="tab-content pt-4">
                {{ if .VulnData }}
                    {{ template "vuln-details" .VulnData }}
                {{ else }}
                    {{ template "state-empty" (dict
                        "Icon" "shield-check"
                        "Title" "No scan data yet"
                        "Subtext" "The scanner hasn't reported results for this manifest."
                    ) }}
                {{ end }}
            </div>

            <input type="radio" id="scan-tab-sbom" name="scan-tabs" role="tab" class="tab" aria-label="SBOM" aria-controls="scan-panel-sbom" />
            <div id="scan-panel-sbom" role="tabpanel" aria-labelledby="scan-tab-sbom" class="tab-content pt-4">
                {{ if .SbomData }}
                    {{ template "sbom-details" .SbomData }}
                {{ else }}
                    <p class="text-base-content">No SBOM data available</p>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ end }}