<wxs src="../common/utils.wxs" module="_" />

<view
  style="{{_._style([style, customStyle])}}"
  class="class {{prefix}}-class {{classPrefix}} {{ !bordered || isLastChild ? classPrefix + '--borderless' : ''}} {{classPrefix}}--{{align}}"
  hover-class="{{ hover ? classPrefix + '--hover' : ''}}"
  hover-stay-time="70"
  bind:tap="onClick"
  aria-role="{{ariaRole || (arrow ? 'button' : '')}}"
  aria-label="{{ariaLabel}}"
>
  <view class="{{classPrefix}}__left {{prefix}}-class-left">
    <t-icon
      wx:if="{{ leftIcon }}"
      name="{{leftIcon}}"
      t-class="{{classPrefix}}__left-icon {{prefix}}-class-left-icon"
    />
    <slot name="left-icon" />
    <t-image
      wx:if="{{ image }}"
      shape="round"
      t-class="{{classPrefix}}__left-image {{prefix}}-class-image"
      src="{{ image }}"
    />
    <slot name="image" />
  </view>
  <view class="{{classPrefix}}__title">
    <view class="{{classPrefix}}__title-text  {{prefix}}-class-title">
      <block wx:if="{{ title }}"> {{ title}} </block>
      <slot name="title" />
      <block wx:if="{{required}}">
        <text decode class="{{classPrefix}}--required">&nbsp;*</text>
      </block>
    </view>

    <view class="{{classPrefix}}__description {{prefix}}-class-description">
      <view wx:if="{{ description }}" class="{{classPrefix}}__description-text">{{description}}</view>
      <slot name="description" />
    </view>
  </view>

  <view class="{{classPrefix}}__note {{prefix}}-class-note">
    <text wx:if="{{ note }}">{{note}}</text>
    <slot name="note" />
  </view>

  <view class="{{classPrefix}}__right {{prefix}}-class-right">
    <t-icon
      wx:if="{{ arrow }}"
      name="chevron-right"
      t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon"
    />
    <block wx:else>
      <t-icon name="{{rightIcon}}" t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon" />
      <slot name="right-icon" />
    </block>
  </view>
</view>
