@if (form != null) {
  <div class="card">
    <form [formGroup]="form">
      <div class="flex justify-between flex-col md:items-center md:flex-row mb-3 gap-3">
        <h2 class="mb-0 h-12 flex items-center">
          Realtime Logs
        </h2>
        <nav class="flex gap-3 w-full md:w-1/2">
          <div class="relative w-full">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              <i class="pi pi-filter text-secondary"></i>
            </span>
            <input
              type="text"
              autocomplete="off"
              placeholder="Case-sensitive filter"
              id="filter"
              formControlName="filter"
              class="w-full pl-9 pr-3 py-2.5 bg-transparent text-main border border-surface rounded outline-none focus:border-primary transition duration-150"
              />
          </div>
          <button
            type="button"
            class="btn btn-secondary p-3.5"
            (click)="stopScroll = !stopScroll"
            appTooltip="{{stopScroll ? 'Start' : 'Stop'}} Scrolling"
            tooltipPosition="left">
            <i class="pi pi-{{stopScroll ? 'play' : 'pause'}} text-lg"></i>
          </button>
          <button
            type="button"
            class="btn btn-secondary p-3.5"
            [disabled]="loadingLogs"
            (click)="downloadLogs()"
            appTooltip="Download Logs"
            tooltipPosition="left">
            <i class="pi pi-{{loadingLogs ? 'spinner pi-spin' : 'download'}} text-lg"></i>
          </button>
          <button
            type="button"
            class="btn btn-secondary p-3.5"
            (click)="clearLogs()"
            appTooltip="Clear Logs"
            tooltipPosition="left">
            <i class="pi pi-trash text-lg"></i>
          </button>
        </nav>
      </div>
      <div id="logs" #scrollContainer>
        @for (log of logs; track $index) {
          <div [ngClass]="log.className">₿ {{log.text | ANSI}}</div>
        }
      </div>
    </form>
  </div>
}