<view class="page-container {{appearanceClass}}">
  <block wx:if="{{needsSelection}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--key"></view>
      <view class="list-state__title">{{text.notFound}}</view>
    </view>
  </block>

  <block wx:elif="{{status === 'loading'}}">
    <view class="list-state skeleton-list">
      <view wx:for="{{skeletonRows}}" wx:key="key" class="skeleton-row">
        <view class="skeleton-row__icon"></view>
        <view class="skeleton-row__body">
          <view class="skeleton-row__title" style="width: {{item.titleWidthPct}}%"></view>
          <view class="skeleton-row__preview" style="width: {{item.previewWidthPct}}%"></view>
        </view>
      </view>
    </view>
  </block>

  <block wx:elif="{{status === 'error'}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--warning"></view>
      <view class="list-state__title">{{errorMsg}}</view>
      <view class="list-state__actions">
        <button bindtap="onRetry" type="default" size="mini">{{text.retry}}</button>
      </view>
    </view>
  </block>

  <block wx:else>
    <view class="machine">
      <view class="machine__header">
        <view class="machine__header-row">
          <view class="machine__icon icon icon--monitor"></view>
          <text class="machine__name">{{name}}</text>
        </view>
        <view class="machine__status">
          <view class="machine__status-dot machine__status-dot--{{online ? 'online' : 'offline'}}"></view>
          <text class="machine__status-text">{{statusLabel}}</text>
        </view>
      </view>

      <view class="meta">
        <view class="meta__row">
          <text class="meta__label">{{text.hostname}}</text>
          <text class="meta__value">{{hostname || '—'}}</text>
        </view>
        <view class="meta__row">
          <text class="meta__label">{{text.os}}</text>
          <text class="meta__value">{{os || '—'}}</text>
        </view>
        <view class="meta__row">
          <text class="meta__label">{{text.version}}</text>
          <text class="meta__value">{{daemonVersion || '—'}}</text>
        </view>
        <view class="meta__row">
          <text class="meta__label">{{text.runtimes}}</text>
          <view class="meta__runtimes">
            <text wx:if="{{runtimes.length === 0}}" class="meta__value">{{text.runtimesNone}}</text>
            <view wx:for="{{runtimes}}" wx:key="*this" class="runtime-pill">{{item}}</view>
          </view>
        </view>
        <view wx:if="{{createdAtLabel}}" class="meta__row">
          <text class="meta__label">{{text.created}}</text>
          <text class="meta__value">{{createdAtLabel}}</text>
        </view>
      </view>

      <view wx:if="{{!online && !canManage}}" class="notice">
        <text class="notice__text">{{text.connectionOwnerOnly}}</text>
      </view>

      <view class="section">
        <text class="section__title">{{agentCountLabel}}</text>
        <view wx:if="{{agents.length === 0}}" class="section__empty">{{text.noAgents}}</view>
        <view
          wx:for="{{agents}}"
          wx:key="id"
          class="agent-row"
          data-agent-id="{{item.id}}"
          data-title="{{item.title}}"
          bindtap="onTapAgent"
          hover-class="agent-row--hover"
        >
          <view class="agent-row__icon icon icon--agent"></view>
          <view class="agent-row__body">
            <text class="agent-row__title">{{item.title}}</text>
            <text wx:if="{{item.subtitle}}" class="agent-row__subtitle">{{item.subtitle}}</text>
          </view>
          <view
            class="agent-row__presence agent-row__presence--{{item.presence}}"
            aria-label="{{item.presenceLabel}}"
          ></view>
        </view>
      </view>

      <view wx:if="{{canManage}}" class="actions">
        <button class="actions__btn actions__btn--danger" bindtap="onDelete" hover-class="actions__btn--hover">{{text.delete}}</button>
      </view>
    </view>
  </block>
</view>
