<div
  #viewport
  class="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-background/50"
>
  @if (entries().length === 0) {
    <div class="flex h-full min-h-56 items-center justify-center px-6 py-10 text-center">
      <div>
        <p class="text-sm font-medium text-foreground">No logs match the current filters.</p>
        <p class="mt-1 text-xs text-muted-foreground">Generate activity in the app or loosen the filters to see captured events.</p>
      </div>
    </div>
  } @else {
    <div class="divide-y divide-border/70">
      @for (entry of entries(); track entry.id) {
        <article
          class="px-4 py-3 transition-colors"
          [class]="getRowClass(entry.level)"
        >
          <button
            type="button"
            class="w-full text-left disabled:cursor-default"
            [disabled]="!entry.payloadText"
            (click)="toggleExpanded(entry.id)"
          >
            <div class="flex items-start gap-3">
              <span
                class="min-w-[88px] pt-0.5 text-[11px] font-mono text-muted-foreground"
                [title]="entry.dateTimeLabel"
              >
                {{ entry.timeLabel }}
              </span>

              <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                  <span [class]="getBadgeClass(entry.level)">{{ getLevelLabel(entry.level) }}</span>
                  <span class="rounded-full border border-border bg-secondary/70 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
                    {{ entry.source }}
                  </span>
                  @if (entry.count > 1) {
                    <span class="rounded-full border border-border bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
                      x{{ entry.count }}
                    </span>
                  }
                </div>

                <p class="mt-2 break-words text-sm text-foreground">{{ entry.message }}</p>

                @if (entry.payloadText) {
                  <p class="mt-2 text-xs text-muted-foreground">
                    {{ isExpanded(entry.id) ? 'Hide details' : 'Show details' }}
                  </p>
                }
              </div>

              @if (entry.payloadText) {
                <span class="pt-1 text-muted-foreground">
                  <ng-icon
                    [name]="isExpanded(entry.id) ? 'lucideChevronDown' : 'lucideChevronRight'"
                    class="h-4 w-4"
                  />
                </span>
              }
            </div>
          </button>

          @if (entry.payloadText && isExpanded(entry.id)) {
            <pre class="mt-3 overflow-x-auto rounded-lg bg-background px-3 py-3 text-[11px] leading-5 text-muted-foreground">{{
              entry.payloadText
            }}</pre>
          }
        </article>
      }
    </div>
  }
</div>
