{{-- Der Vorspann steht, bis wirklich Daten fließen — nicht, bis der Socket
     offen ist. Ein Socket, der steht, sagt noch nichts darüber, ob am anderen
     Ende eine Sitzung entstanden ist; der Unterschied fällt sonst erst auf,
     wenn jemand ins Leere tippt. --}}
<div class="flex h-screen w-screen flex-col bg-ink"
     data-terminal
     data-ticket="{{ $ticket }}"
     data-host="{{ $host->name }}">

    <div data-terminal-splash class="flex flex-1 items-center justify-center">
        {{-- Schriftgrafik, keine Bilddatei — deshalb `role="img"` mit einem
             lesbaren Namen statt `aria-hidden`: ein Screenreader soll "CluPilot"
             hören, nicht die einzelnen Zeichen der Zeichnung. --}}
        <pre class="font-mono text-[11px] leading-[1.15] text-accent select-none" role="img" aria-label="CluPilot">
   ___ _      ___  _ _     _
  / __| |_  _| _ \(_) |___| |_
 | (__| | || |  _/| | / _ \  _|
  \___|_|\_,_|_|  |_|_\___/\__|
</pre>
        <p class="sr-only">{{ __('hosts.terminal.connecting', ['host' => $host->name]) }}</p>
    </div>

    {{-- wire:ignore: xterms eigener DOM-Baum liegt in einem von Livewire
         verwalteten Baum. Heute hat die Komponente keine Aktion, die einen
         Re-Render auslöst — aber das erste `wire:`-irgendwas auf dieser Seite
         würde xterm sonst beim nächsten Umlauf löschen. --}}
    <div data-terminal-screen wire:ignore class="hidden flex-1"></div>
</div>