{#if layoutMode === 'single'}

{#if dropdownOpen} {/if}

{:else if layoutMode === 'multi'}

{:else}

{/if}

{#if layoutMode === 'multi' || layoutMode === 'grouped'}

{#if layoutMode === 'grouped'}

{/if}

{#if layoutMode === 'grouped'} {@const validFavoriteGroups = favoriteGroups.filter(g => g?.name && g?.containers)} {#if validFavoriteGroups.length > 0}

Saved groups

{#each validFavoriteGroups as savedGroup, idx (savedGroup.name || `group-${idx}`)}

loadFavoriteGroup(savedGroup)} onkeydown={(e) => e.key === 'Enter' && loadFavoriteGroup(savedGroup)} role="button" tabindex="0" >

{savedGroup.name}

{savedGroup.containers.length} container{savedGroup.containers.length !== 1 ? 's' : ''}

{/each}

{/if} {/if} {#if filteredContainers().length === 0}

{containers.length === 0 ? 'No containers' : 'No matches found'}

{:else} {#if layoutMode === 'multi' && favoriteContainers().length > 0}

Favorites

{#each favoriteContainers() as container} {@const isMultiSelected = multiModeSelections.has(container.id)}

selectContainer(container)} onkeydown={(e) => e.key === 'Enter' && selectContainer(container)} role="button" tabindex="0" draggable="true" ondragstart={(e) => handleDragStart(e, container.name)} ondragover={(e) => handleDragOver(e, container.name)} ondragleave={handleDragLeave} ondragend={handleDragEnd} ondrop={(e) => handleDrop(e, container.name)} >

{container.name}

{container.image}

{/each}

{/if} {#if layoutMode === 'grouped' && favoriteContainers().length > 0}

Favorites

{#each favoriteContainers() as container} {@const isSelected = selectedContainerIds.has(container.id)} {@const containerColor = groupedContainerInfo.get(container.id)?.color}

toggleContainerSelection(container.id)} onkeydown={(e) => e.key === 'Enter' && toggleContainerSelection(container.id)} role="button" tabindex="0" >

{#if isSelected}

{:else}

{/if}

{container.name}

{container.image}

{/each}

{/if} {#if layoutMode === 'multi' ? nonFavoriteContainers().length > 0 : (layoutMode === 'grouped' ? nonFavoriteContainers().length > 0 : filteredContainers().length > 0)} {#if (layoutMode === 'multi' || layoutMode === 'grouped') && favoriteContainers().length > 0}

All containers

{/if} {#each layoutMode === 'multi' || layoutMode === 'grouped' ? nonFavoriteContainers() : filteredContainers() as container} {@const isSelected = layoutMode === 'grouped' ? selectedContainerIds.has(container.id) : selectedContainer?.id === container.id} {@const isMultiSelected = multiModeSelections.has(container.id)} {@const containerColor = groupedContainerInfo.get(container.id)?.color}

layoutMode === 'grouped' ? toggleContainerSelection(container.id) : selectContainer(container)} onkeydown={(e) => e.key === 'Enter' && (layoutMode === 'grouped' ? toggleContainerSelection(container.id) : selectContainer(container))} role="button" tabindex="0" > {#if layoutMode === 'grouped'}

{#if isSelected}

{:else}

{/if}

{:else if layoutMode === 'multi'} {/if}

{container.name}

{container.image}

{#if layoutMode === 'multi'} {/if}

{/each} {/if} {/if}

{#if layoutMode === 'grouped'}

{selectedContainerIds.size} selected {containers.length} total

{#if selectedContainerIds.size > 0} {#if showSaveGroupInput}

e.key === 'Enter' && saveCurrentGroup()} use:focusOnMount class="h-6 text-xs flex-1 px-2 rounded border border-input bg-background focus:outline-none focus:ring-1 focus:ring-ring" />

{:else} {/if} {/if}

{:else}

{#if multiModeSelections.size > 0} {multiModeSelections.size} selected {:else} {containers.length} container{containers.length !== 1 ? 's' : ''} {/if}

{#if multiModeSelections.size >= 2} {/if}

{/if}

{#if layoutMode === 'grouped'} {#if selectedContainerIds.size === 0}

Select containers from the list to view merged logs

{:else}

{#if streamingEnabled} {#if isConnected}

Live

{:else if loading}

Connecting...

{:else if connectionError} {/if} {:else}

Paused

{/if}

{#if stackName} {stackName} {:else if groupedContainerInfo.size === 1} {@const singleContainer = Array.from(groupedContainerInfo.values())[0]}

{singleContainer.name}

{/if} {#if stackName || groupedContainerInfo.size > 1} {#each Array.from(groupedContainerInfo.entries()) as [id, info]}

{/each} {/if}

{ fontSize = Number(v); saveState(); }}> {fontSize}px {#each fontSizeOptions as size} {size}px {/each} {#if logSearchActive}

{#if matchCount > 0} {currentMatchIndex + 1}/{matchCount} {:else if logSearchQuery} 0/0 {/if}

{:else} {/if}

{#if loading && mergedLogs.length === 0}

{:else if loading}

{/if}

{#each formattedMergedLogs() as log}

[{log.containerName}] {@html log.formattedText}

{/each}

{/if} {:else if !selectedContainer}

{layoutMode === 'multi' ? 'Select a container from the list' : 'Select a container to view logs'}

{:else}

{#if streamingEnabled} {#if isConnected}

Live

{:else if loading}

Connecting...

{:else if connectionError} {:else}

Offline

{/if} {:else}

Paused

{/if} {#if selectedContainer}

{selectedContainer.name}

{/if}

{ fontSize = Number(v); saveState(); }}> {fontSize}px {#each fontSizeOptions as size} {size}px {/each} {#if logSearchActive}

{#if matchCount > 0} {currentMatchIndex + 1}/{matchCount} {:else if logSearchQuery} 0/0 {/if}

{:else} {/if}

{#if loading && !logs}

Loading logs...

{:else}

{@html highlightedLogs()}

{/if} {/if}