<view
  class="row {{row.unreadCount > 0 || row.manualUnread ? 'row--unread' : ''}}"
  bindtap="onTap"
  bindlongpress="onLongPress"
  hover-class="row--hover"
>
  <view class="row__icon-wrap">
    <avatar-image wx:if="{{row.kind !== 'task' && row.hasAvatar}}" class="row__avatar" source="{{row.avatarUrl}}">
      <view class="row__icon row__icon--{{row.icon}} icon {{row.icon === 'thread' ? 'icon--messages-square' : row.icon === 'human-dm' ? 'icon--user' : (row.icon === 'agent-dm' || row.icon === 'service-dm') ? 'icon--agent' : 'icon--hash'}}"></view>
    </avatar-image>
    <view wx:else class="row__icon row__icon--{{row.icon}} icon {{row.icon === 'thread' ? 'icon--messages-square' : row.icon === 'human-dm' ? 'icon--user' : (row.icon === 'agent-dm' || row.icon === 'service-dm') ? 'icon--agent' : row.icon === 'task' ? 'icon--list-checks' : 'icon--hash'}}"></view>
    <view wx:if="{{row.unreadCount > 0}}" class="row__badge">{{row.unreadCount > 99 ? '99+' : row.unreadCount}}</view>
    <view wx:elif="{{row.manualUnread}}" class="row__manual-unread"></view>
  </view>
  <view class="row__body">
    <view class="row__head">
      <view class="row__title">{{row.title}}</view>
      <text class="row__time">{{row.timestamp}}</text>
      <view wx:if="{{row.kind !== 'task' && row.subscriptionState === 'mute'}}" class="row__muted icon icon--sm icon--bell-off" aria-label="{{mutedLabel}}"></view>
    </view>
    <view class="row__preview">
      <view wx:if="{{row.kind === 'task' && row.assigneeName}}" class="row__assignee">
        <avatar-image
          wx:if="{{row.assigneeAvatarUrl}}"
          class="row__assignee-avatar"
          source="{{row.assigneeAvatarUrl}}"
        >
          <text class="row__assignee-initials row__assignee-initials--{{row.assigneeKind}}">{{row.assigneeInitials}}</text>
        </avatar-image>
        <text wx:else class="row__assignee-initials row__assignee-initials--{{row.assigneeKind}}">{{row.assigneeInitials}}</text>
        <text class="row__assignee-name">{{row.assigneeName}}</text>
        <text class="row__assignee-separator">·</text>
      </view>
      <text wx:if="{{row.hasMention}}" class="row__mention">@</text>
      <text class="row__preview-text">{{row.preview || ' '}}</text>
    </view>
  </view>
</view>
