<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">{{needsSelectionTitle}}</view>
      <view class="list-state__text">{{needsSelectionText}}</view>
      <view class="list-state__actions">
        <button bindtap="onGoToInbox" type="primary" size="mini">{{backHomeLabel}}</button>
      </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">{{retryLabel}}</button>
        <button wx:if="{{recoveryKind === 'switch-server'}}" bindtap="onGoToInbox" type="warn" size="mini">{{backHomeLabel}}</button>
      </view>
    </view>
  </block>

  <block wx:elif="{{status === 'empty'}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--{{emptyState.icon}}"></view>
      <view class="list-state__title">{{emptyState.title}}</view>
      <view class="list-state__text">{{emptyState.subtitle}}</view>
    </view>
  </block>

  <block wx:else>
    <view class="header">
      <text class="header__title">{{channelTitle || defaultTitleLabel}}</text>
      <text class="header__count">{{totalCountLabel}}</text>
    </view>
    <view wx:if="{{refreshError}}" class="refresh-error-banner">
      <text class="refresh-error-banner__text">{{refreshErrorLabel}}</text>
      <view class="refresh-error-banner__actions">
        <text class="refresh-error-banner__btn refresh-error-banner__btn--primary" bindtap="onRetry">{{retryLabel}}</text>
        <text class="refresh-error-banner__btn" bindtap="onDismissRefreshError">{{ignoreLabel}}</text>
      </view>
    </view>
    <view wx:if="{{cachedAtLabel}}" class="cache-banner cache-banner--{{cacheTone}}">
      <text wx:if="{{cacheTone === 'fresh'}}" class="cache-banner__text">{{cacheFreshLabel}}</text>
      <text wx:elif="{{cacheTone === 'stale'}}" class="cache-banner__text">{{cacheStaleLabel}}</text>
      <text wx:else class="cache-banner__text">{{cacheNormalLabel}}</text>
      <text wx:if="{{cacheTone === 'stale'}}" class="cache-banner__action" bindtap="onTapRefreshNow" hover-class="cache-banner__action--hover">{{refreshNowLabel}}</text>
    </view>
    <scroll-view scroll-y class="member-list">
      <block wx:for="{{sections}}" wx:key="key" wx:for-item="section">
        <view class="section-title">{{section.title}}</view>
        <view
          wx:for="{{section.rows}}"
          wx:key="memberId"
          wx:for-item="row"
          class="row"
          data-peer-kind="{{row.peerKind}}"
          data-id="{{row.id}}"
          bindtap="onTapMember"
          hover-class="row--hover"
        >
          <view class="row__avatar row__avatar--{{row.peerKind}} {{row.avatarUrl ? 'row__avatar--image' : ''}}">
            <avatar-image wx:if="{{row.avatarUrl}}" class="row__avatar-img" source="{{row.avatarUrl}}">
              <view class="row__avatar-fallback">{{row.initials}}</view>
            </avatar-image>
            <view wx:else class="row__avatar-fallback">{{row.initials}}</view>
          </view>
          <view class="row__body">
            <text class="row__title">{{row.title}}</text>
            <text class="row__subtitle">{{row.subtitle}}</text>
          </view>
        </view>
      </block>
    </scroll-view>
  </block>
</view>
