<view class="amd-search-bar {{className ? className : ''}} {{ showCancelButton ? 'amd-search-bar-padding-right' : '' }} {{ focus ? 'amd-search-bar-focus' : '' }}">
  <view class="amd-search-bar-input {{ focus ? 'amd-search-bar-input-focus' : ''}} {{showBizIcon ? 'amd-search-bar-input-biz' : ''}}"
    style="{{borderColor ? `border-color: ${borderColor};` : ''}}">
    <view class="amd-search-bar-synthetic">
      <amd-icon class="amd-search-bar-synthetic-icon"
        type="SearchOutline"
        size="x-small" />
    </view>
    <input class="amd-search-bar-value"
      type="{{type}}"
      confirm-type="search"
      id="{{id}}"
      name="{{name}}"
      placeholder="{{placeholder}}"
      maxlength="{{maxLength}}"
      foucs="{{autoFocus}}"
      disabled="{{disabled}}"
      value="{{cValue}}"
      controlled="{{true}}"
      enableNative="{{enableNative}}"
      onInput="onInput"
      onFocus="onFocus"
      onBlur="onBlur"
      onConfirm="onSubmit" />
    <view
      className="amd-search-bar-clear-icon {{showBizIcon ? 'amd-search-bar-clear-icon-biz' : ''}}"
      onTap="onClear"
      a:if="{{cValue.length > 0}}"
      >
      <amd-icon
        type="CloseCircleFill"/>
    </view>
    <view 
      a:if="{{showBizIcon || showVoice}}"
      className="amd-search-bar-biz-icon"
      onTap="onBizIconTap">
      <amd-icon 
        type="{{bizIconType}}"/>
    </view>
  </view>

  <view
    a:if="{{showCancelButton}}"
    class="amd-search-bar-cancel-container {{showCancelButton? 'amd-search-bar-cancel-container-show' : ''}}"
    onTap="onCancel"> 
    <view 
      class="amd-search-bar-cancel">
        {{cancelText}}
    </view>
  </view> 
</view>
