@props([
    'comment' => null,
    'placeholder' => '',
    'model',
    'autofocus' => false,
])
<!--begin::Input group-->
  <div class="position-relative w-100">
      <!--begin::Input-->
      <textarea
      wire:model="{{ $model }}"
      @if($autofocus)
          x-data
          x-on:open-editor-{{ $comment->id }}.window="$nextTick(() => $el.focus())"
      @endif
     type="text" class="form-control form-control-solid border border-gray-300 ps-5" rows="1" name="search" value="" data-kt-autosize="true" placeholder="{{ $placeholder }}" id="kt_autosize" data-kt-initialized="1"
     ></textarea>
      <!--end::Input-->         

      <!--begin::Actions-->
      <div class="position-absolute top-0 end-0 translate-middle-x mt-1 me-n14">   
          <!--begin::Btn-->                       
          <button class="btn btn-icon btn-sm btn-color-gray-500 btn-active-color-primary w-25px p-0">
              <i class="ki-outline ki-disconnect fs-2"></i>                    </button>
          <!--end::Btn-->
          
          <!--begin::Btn-->
          <button class="btn btn-icon btn-sm btn-color-gray-500 btn-active-color-primary w-25px p-0">
              <i class="ki-outline ki-picture fs-2"></i>                    </button>
          <!--end::Btn-->
          
          <!--begin::Btn-->
          <button class="btn btn-icon btn-sm btn-color-gray-500 btn-active-color-primary w-25px p-0">
              <i class="ki-outline ki-emoji-happy fs-2"></i>                    </button>
          <!--end::Btn-->
          
          <!--begin::Btn-->
          <button class="btn btn-icon btn-sm btn-color-gray-500 btn-active-color-primary w-25px p-0">
              <i class="ki-outline ki-geolocation fs-2"></i>                    </button>
          <!--end::Btn-->
      </div>
      <!--end::Actions-->
  </div>
  <!--end::Input group-->