@can('read scrumboard task comment')
<!--begin::Chat drawer-->
<div id="kt_drawer_chats" class="card bg-body">
	<!--begin::Messenger-->
	<div class="card w-100 border-0 rounded-0" id="kt_drawer_chat_messenger">
		<!--begin::Card header-->
		<div class="card-header pe-5" id="kt_drawer_chat_messenger_header">
			<!--begin::Title-->
			<div class="card-title">
				<!--begin::User-->
				<div class="d-flex justify-content-center flex-column me-3">
					Discussions
				</div>
				<!--end::User-->
			</div>
			<!--end::Title-->
			<!--begin::Card toolbar-->
			<div class="card-toolbar">
				<!--begin::Menu-->
                <div class="me-0">
                    <button class="btn btn-sm btn-icon btn-active-color-primary" data-kt-menu-trigger="hover" data-kt-menu-placement="bottom-end">
                        {!! getIcon('notification', 'fs-2') !!}
                    </button>
                
                    <!--begin::Notification Menu-->
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
                        <!--begin::Heading-->
                        <div class="menu-item px-3">
                            <div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Get Notified</div>
                        </div>
                        <!--end::Heading-->
                
                        <!--begin::Menu items-->
                        <div class="menu-item px-3">
                            <a href="#" class="menu-link px-3">When Participating</a>
                        </div>
                        <div class="menu-item px-3">
                            <a href="#" class="menu-link px-3">On All Comments</a>
                        </div>
                        <div class="menu-item px-3">
                            <a href="#" class="menu-link px-3">Never</a>
                        </div>
                        <!--end::Menu items-->
                    </div>
                    <!--end::Notification Menu-->
                </div>
         
                <!--begin::Delete All-->
                <button class="btn btn-sm btn-icon btn-active-color-primary" data-bs-toggle="tooltip" title="Delete all comments" data-kt-menu-trigger="hover" data-kt-menu-placement="bottom-end">
                    {!! getIcon('trash-square', 'fs-2') !!}
                </button>
                <!--end::Delete All-->

			</div>
			<!--end::Card toolbar-->
		</div>
		<!--end::Card header-->

        @php
    $canComment = $task && $canCreateComment && Gate::check('createComment', $task);
@endphp

@if($canComment)

		<!--begin::Card footer-->
		<div class="card-footer" id="kt_drawer_chat_messenger_footer">

            <!-- Disable comments seciton on footer -->
          <livewire:comments.comment-form
          :model="$task"
          :extra-commentable-type="$pipeline ? $pipeline::class : null"
          :extra-commentable-id="$pipeline?->id"
          :read-only="!$canCreateComment"
          no-replies
          :navigate-parent-comment="$parentcomment"
          key="{{ now() }}"
          :no-reactions="true"
          :use-metronic="true"
          :show-form-only="true"
          :css-class="'col-12'"
          />
      <!--end::Toolbar-->
  </div>
  <!--end::Card footer-->		
@endif

		<!--begin::Card body-->
		<div class="card-body pt-0" id="kt_drawer_chat_messenger_body">
			<!--begin::Messages-->
            <div class="separator separator-dashed my-5"></div>
            <div class="row mt-3" id="comments-section" wire:ignore.self>
                <livewire:comments.comment-list
                    :model="$task"
                    :key="'comments-' . now()->timestamp"
                    :extra-commentable-type="$pipeline ? $pipeline::class : null"
                    :extra-commentable-id="$pipeline?->id"
                    :read-only="!$canCreateComment || $readOnly"
                    no-replies
                    :navigate-parent-comment="$parentcomment"
                    :focused-comment-id="$comment"
                    :no-reactions="true"
                    :use-metronic="true"
                />
            </div>
			<!--end::Messages-->
		</div>
		<!--end::Card body-->
	</div>
	<!--end::Messenger-->
</div>
<!--end::Chat drawer-->
@endcan