{@render children()}

{displayImageName}

{#if overallStatus === 'idle'} Initializing... {:else if overallStatus === 'pulling'} Pulling... {:else if overallStatus === 'complete'} Complete! {:else if overallStatus === 'error'} Failed {/if}

{#if totalLayers > 0} {completedLayers}/{totalLayers} {/if}

{#if statusMessage && (overallStatus === 'pulling' || overallStatus === 'complete')}

{statusMessage}

{/if} {#if totalLayers > 0} {/if} {#if errorMessage}

{errorMessage}

{/if}

{#if sortedLayers.length > 0}

{#each sortedLayers as layer (layer.id)} {@const StatusIcon = getStatusIcon(layer.status)} {@const percentage = getProgressPercentage(layer)} {@const statusLower = layer.status.toLowerCase()} {@const isDownloading = statusLower.includes('downloading')} {@const isExtracting = statusLower.includes('extracting')}

{layer.id.slice(0, 12)}

{#if (isDownloading || isExtracting) && layer.current && layer.total}

{percentage}%

{:else} {layer.status} {/if}

{/each}

{:else if overallStatus === 'complete'}

Image is up to date

{/if} {#if overallStatus === 'complete' || overallStatus === 'error'}

{/if}