<view class="composer {{reserveSafeArea ? 'composer--safe-area' : 'composer--compact-bottom'}}">
  <mention-picker
    wx:if="{{mentionVisible}}"
    class="composer__mention-layer"
    visible="{{mentionVisible}}"
    items="{{mentionItems}}"
    locale-version="{{localeVersion}}"
    active-index="{{mentionActiveIndex}}"
    bindselect="onSelectMention"
  />

  <view class="composer__row">
    <view class="composer__input-shell">
      <textarea
        class="composer__input"
        value="{{value}}"
        focus="{{inputFocused}}"
        selection-start="{{selectionStart}}"
        selection-end="{{selectionEnd}}"
        placeholder="{{placeholderLabel}}"
        placeholder-class="composer__input-placeholder"
        bindinput="onInput"
        bindfocus="onFocus"
        bindblur="onBlur"
        bindconfirm="onConfirm"
        confirm-type="send"
        show-confirm-bar="{{false}}"
        hold-keyboard="{{true}}"
        adjust-position="{{false}}"
        cursor-spacing="20"
        auto-height="{{true}}"
        maxlength="-1"
      />
      <button
        class="composer__image {{sending || imagePicking ? 'composer__image--disabled' : ''}}"
        disabled="{{sending || imagePicking}}"
        aria-label="{{sending || imagePicking ? imageSendingLabel : imageLabel}}"
        bindtap="onTapAttach"
        hover-class="composer__image--hover"
      >
        <view wx:if="{{sending || imagePicking}}" class="composer__image-spinner"></view>
        <view wx:else class="icon icon--image"></view>
      </button>
    </view>
    <button
      wx:if="{{showSendButton}}"
      class="composer__send {{sending || imagePicking || !value ? 'composer__send--disabled' : ''}}"
      disabled="{{sending || imagePicking || !value}}"
      aria-label="{{sendLabel}}"
      bindtap="onTapSend"
      hover-class="composer__send--hover"
    >
      <view class="icon icon--send"></view>
    </button>
  </view>
</view>
