{#if isOpen}
e.key === 'Escape' && handleBackdropClick()} role="button" tabindex="-1" >
{/if}
{$activeHost.name}
{#if isOpen}
{#each $hosts as host (host.id)} {#if editingHost?.id === host.id}
Save
{ editingHost = null; newHostName = ''; newHostUrl = ''; }} class="px-3 py-1.5 text-sm rounded-lg {$theme === 'light' ? 'bg-slate-200 hover:bg-slate-300' : 'bg-slate-600 hover:bg-slate-500'}" > Cancel
{:else}
selectHost(host.id)} class="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-left {$activeHost.id === host.id ? ($theme === 'light' ? 'bg-blue-50 text-blue-700' : 'bg-blue-500/20 text-blue-300') : ($theme === 'light' ? 'hover:bg-slate-50' : 'hover:bg-slate-700/50')}" >
{#if host.isLocal}
{:else}
{/if}
{host.name}
{host.isLocal ? 'Current machine' : host.url}
{#if $activeHost.id === host.id}
{/if} {#if !host.isLocal}
handleEditHost(host, e)} class="p-1 rounded hover:bg-white/10 text-slate-400 hover:text-slate-200" >
handleRemoveHost(host.id, e)} class="p-1 rounded hover:bg-red-500/20 text-slate-400 hover:text-red-400" >
{/if}
{/if} {/each}
{#if showAddForm}
Add Host
{ showAddForm = false; newHostName = ''; newHostUrl = ''; }} class="px-3 py-2 text-sm rounded-lg {$theme === 'light' ? 'bg-slate-100 hover:bg-slate-200' : 'bg-slate-700 hover:bg-slate-600'}" > Cancel
{:else}
showAddForm = true} class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors {$theme === 'light' ? 'text-blue-600 hover:bg-blue-50' : 'text-blue-400 hover:bg-blue-500/20'}" >
Add Remote Host
{/if}
{/if}