<view class="app-notification-card app-notification-card--{{statusKind}}">
  <block wx:if="{{loading}}">
    <view class="app-notification-card__skeleton">
      <view class="app-notification-card__skeleton-line"></view>
      <view class="app-notification-card__skeleton-line app-notification-card__skeleton-line--short"></view>
    </view>
  </block>
  <block wx:elif="{{loadFailed}}">
    <view class="app-notification-card__fallback">
      <text class="app-notification-card__fallback-text">{{fallbackText}}</text>
      <view class="app-notification-card__retry" catchtap="refresh">
        <text>{{labelRetry}}</text>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class="app-notification-card__header">
      <text class="app-notification-card__title">{{title}}</text>
      <text wx:if="{{statusLabel}}" class="app-notification-card__status app-notification-card__status--{{statusKind}}">{{statusLabel}}</text>
    </view>

    <view wx:if="{{!substanceRenderable}}" class="app-notification-card__notice app-notification-card__notice--warning">
      <text>{{labelFailClosed}}</text>
    </view>

    <markdown-content
      wx:if="{{bodyText}}"
      class="app-notification-card__body"
      content="{{bodyText}}"
      locale-version="{{localeVersion}}"
    />

    <view wx:if="{{teamRoleDiff}}" class="app-notification-card__diff">
      <view wx:if="{{teamRoleDiff.description}}" class="app-notification-card__diff-row app-notification-card__diff-row--description">
        <text class="app-notification-card__diff-before">{{teamRoleDiff.description.before}}</text>
        <text class="app-notification-card__diff-arrow">→</text>
        <text class="app-notification-card__diff-after">{{teamRoleDiff.description.after}}</text>
      </view>
      <view wx:for="{{teamRoleDiff.members}}" wx:key="teamMemberId" class="app-notification-card__diff-member">
        <text class="app-notification-card__diff-member-name">{{item.memberName}}</text>
        <view wx:if="{{item.roleLabel}}" class="app-notification-card__diff-row">
          <text class="app-notification-card__diff-before">{{item.roleLabel.before}}</text>
          <text class="app-notification-card__diff-arrow">→</text>
          <text class="app-notification-card__diff-after">{{item.roleLabel.after}}</text>
        </view>
        <view wx:if="{{item.roleOverlayPrompt}}" class="app-notification-card__diff-row app-notification-card__diff-row--prose">
          <text class="app-notification-card__diff-before">{{item.roleOverlayPrompt.before}}</text>
          <text class="app-notification-card__diff-arrow">→</text>
          <text class="app-notification-card__diff-after">{{item.roleOverlayPrompt.after}}</text>
        </view>
        <view wx:if="{{item.wakeOnTeamMention}}" class="app-notification-card__diff-row">
          <text class="app-notification-card__diff-before">{{item.wakeOnTeamMention.before ? '✓' : '✗'}}</text>
          <text class="app-notification-card__diff-arrow">→</text>
          <text class="app-notification-card__diff-after">{{item.wakeOnTeamMention.after ? '✓' : '✗'}}</text>
        </view>
      </view>
    </view>

    <view wx:if="{{agentProposalRows.length > 0}}" class="app-notification-card__fields">
      <block wx:for="{{agentProposalRows}}" wx:key="label">
        <view class="app-notification-card__field">
          <text class="app-notification-card__field-label">{{item.displayLabel}}</text>
          <text class="app-notification-card__field-value">{{item.displayValue}}</text>
        </view>
      </block>
    </view>

    <view wx:if="{{fieldRows.length > 0}}" class="app-notification-card__fields">
      <block wx:for="{{fieldRows}}" wx:key="label">
        <view class="app-notification-card__field">
          <text class="app-notification-card__field-label">{{item.displayLabel}}</text>
          <text class="app-notification-card__field-value">{{item.displayValue}}</text>
        </view>
      </block>
    </view>

    <view wx:if="{{pendingRevision && !confirmationPending}}" class="app-notification-card__notice app-notification-card__notice--processing">
      <text>{{labelProcessing}}</text>
    </view>

    <view wx:if="{{confirmationPending}}" class="app-notification-card__notice app-notification-card__notice--processing">
      <text>{{labelConfirmationPending}}</text>
      <view class="app-notification-card__retry" catchtap="refresh">
        <text>{{labelRetry}}</text>
      </view>
    </view>

    <view wx:if="{{errorMessage}}" class="app-notification-card__notice app-notification-card__notice--error">
      <text>{{errorMessage}}</text>
      <view wx:if="{{retryable}}" class="app-notification-card__retry" catchtap="retryPendingAction">
        <text>{{labelRetry}}</text>
      </view>
    </view>

    <view wx:if="{{actionRows.length > 0}}" class="app-notification-card__actions">
      <block wx:for="{{actionRows}}" wx:key="actionKey">
        <button
          wx:if="{{item.type === 'open_url'}}"
          class="app-notification-card__action app-notification-card__action--{{item.semantics === 'revise' ? 'revise' : 'link'}}"
          data-url="{{item.url}}"
          catchtap="onOpenURL"
        >{{item.displayLabel}}</button>
        <button
          wx:else
          class="app-notification-card__action app-notification-card__action--{{item.semantics === 'revise' ? 'revise' : 'primary'}}"
          data-action-key="{{item.actionKey}}"
          disabled="{{acting || pendingRevision}}"
          loading="{{acting}}"
          catchtap="onActionTap"
        >{{item.displayLabel}}</button>
      </block>
    </view>
    <view wx:if="{{sourceAttribution}}" class="app-notification-card__source-attribution">
      <view class="app-notification-card__source-attribution-icon icon icon--sm icon--send"></view>
      <text class="app-notification-card__source-attribution-text">{{sourceAttribution}}</text>
    </view>
  </block>
</view>

<view wx:if="{{rejectOpen}}" class="app-notification-card__reject-mask" catchtap="onRejectCancel">
  <view class="app-notification-card__reject-sheet" catchtap="">
    <view class="app-notification-card__reject-title">{{rejectLabel}}</view>
    <textarea
      class="app-notification-card__reject-input"
      placeholder="{{placeholderRejectReason}}"
      value="{{rejectReason}}"
      maxlength="{{reasonMaxLength}}"
      bindinput="onRejectReasonInput"
      auto-height
    />
    <view wx:if="{{errorMessage}}" class="app-notification-card__reject-error">
      <text>{{errorMessage}}</text>
    </view>
    <view class="app-notification-card__reject-actions">
      <button class="app-notification-card__action app-notification-card__action--revise" catchtap="onRejectCancel">{{labelCancel}}</button>
      <button class="app-notification-card__action app-notification-card__action--destructive" catchtap="onRejectConfirm">{{labelConfirm}}</button>
    </view>
  </view>
</view>
