{{-- @if($activeTab === 'overview' && $this->isTaskUnassigned) --}}
@if( $this->shouldShowUnassignedWarning)
<div class="alert alert-dismissible bg-light-danger border border-danger border-dashed d-flex flex-column flex-sm-row w-100 p-5 mb-10">
    <!--begin::Icon-->
    <i class="ki-duotone ki-message-text-2 fs-2hx text-danger me-4 mb-5 mb-sm-0">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </i>
    <!--end::Icon-->

    <!--begin::Content-->
    <!--begin::Content + Button wrapper-->
    <div class="d-flex flex-grow-1 justify-content-between align-items-center flex-column flex-sm-row w-100">
      <!--begin::Text-->
      <div class="pe-0 pe-sm-10 mb-4 mb-sm-0">
          <h6 class="mb-1">This task is currently unassigned</h6>
          <span>No assignee has been set for this task. If you're responsible, you can assign yourself.</span>
      </div>
      <!--end::Text-->

      <!--begin::Assign Button-->
      <div class="text-end">
          <button wire:click="assignToMe" class="btn btn-sm btn-danger">
              Assign Me
          </button>
      </div>
      <!--end::Assign Button-->
  </div>
  <!--end::Content + Button wrapper-->
    <!--end::Content-->

    <!--begin::Close-->
    <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
        <i class="ki-duotone ki-cross fs-1 text-danger"><span class="path1"></span><span class="path2"></span></i>
    </button>
    <!--end::Close-->
</div>
@endif



@if($pendingImportCheckItems->count())
<div class="alert alert-warning alert-wth-icon fade show mt-4 mb-4" role="alert">
  <div class="d-flex justify-content-between">
    <span class="mt-2">This task have {{ $pendingImportCheckItems->count()}} pending checkitems to import from the current pipeline: {{ $pipeline->name }}</span>
    @if(!$readOnly)
      <p class="mb-0 d-flex justify-content-end"><a class="btn btn-sm btn-outline-danger" wire:click="showImportCheckItemsForm(1)">Import</a></p>
    @endif
  </div>
  @if($isImportCheckItemsFormVisible)
    <div class="mt2">
      <h5>Import CheckItems</h5>
      <div class="separator separator-dashed my-5"></div>
      @forelse ($pendingImportCheckItems as $item)
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="{{$item->id}}" id="checkitem_{{$item->id}}" wire:model="importCheckItems" @disabled($readOnly)>
          <label class="form-check-label" for="checkitem_{{$item->id}}">
            {{$item->title}}
          </label>
        </div>
      @empty
      @endforelse
    </div>
    <div class="separator separator-dashed my-5"></div>
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-secondary btn-sm me-2" wire:click="showImportCheckItemsForm(0)">{{ __('Cancel') }}</button>
      @if(!$readOnly)
        <button class="btn btn-sm btn-primary" wire:click="importSelectedCheckItems">{{ __('Import') }}</button>
      @endif
    </div>
  @endif
</div>


<div class="separator separator-dashed my-5"></div>
@endif

<div class="d-flex justify-content-between align-items-center w-100">
  <!-- Left: Search -->
  <div class="d-flex align-items-center flex-grow-1">
      <div id="kt_header_search" class="header-search d-flex align-items-center w-lg-450px"
           data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter"
           data-kt-search-layout="menu" data-kt-search-responsive="lg" data-kt-menu-trigger="auto"
           data-kt-menu-permanent="true" data-kt-menu-placement="bottom-end" data-kt-search="true">

          <!-- Mobile toggle -->
          <div data-kt-search-element="toggle" class="search-toggle-mobile d-flex d-lg-none align-items-center">
              <div class="btn btn-icon btn-color-gray-700 btn-active-color-primary btn-outline w-40px h-40px">
                  <i class="ki-duotone ki-magnifier fs-1">
                      <span class="path1"></span><span class="path2"></span>
                  </i>
              </div>
          </div>

          <!-- Form -->
          <form x-data="{ input: @entangle('checkItemSearch').defer }" class="d-none d-lg-block w-100 position-relative mb-2 mb-lg-0" autocomplete="off">
    
            <i class="ki-duotone ki-magnifier fs-2 text-gray-700 position-absolute top-50 translate-middle-y ms-4">
                <span class="path1"></span><span class="path2"></span>
            </i>
        
            <input type="text"
                   class="form-control bg-transparent ps-13 fs-7 h-40px"
                   placeholder="Quick Search"
                   wire:model.live.debounce.200ms="checkItemSearch"
                   data-kt-search-element="input">
        
        
            <!-- Clear Button (Alpine only) -->
            <!-- Clear Button -->
            <span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-4"
                  x-show="$wire.checkItemSearch.length > 0"
                  @click="$wire.set('checkItemSearch', '')"
                  x-transition>
                <i class="ki-duotone ki-cross fs-2 fs-lg-1 me-0">
                    <span class="path1"></span><span class="path2"></span>
                </i>
            </span>
        </form>
        
      </div>
  </div>

  <!-- Right: Icons -->
  <div class="d-flex align-items-center flex-shrink-0">

      <!-- Toggle Comments & Project -->
      <div class="d-flex align-items-center ms-3 ms-lg-4">
        <div
          class="btn btn-icon btn-color-gray-700 btn-active-color-primary btn-outline w-40px h-40px position-relative"
          @click="showComments = !showComments"
          :class="{ 'bg-light-primary': showComments }"
          title="Toggle Comments"
        >
          <i class="ki-duotone ki-message-text-2 fs-1">
            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
          </i>
          <span
            class="bullet bullet-dot h-6px w-6px position-absolute translate-middle top-0 start-50"
            :class="showComments ? 'bg-success animation-blink' : 'bg-muted'"
          ></span>
        </div>
      </div>
      
  </div>
</div>


@can('read scrumboard task checkitem')
  @include('scrumboard::livewire.show.drawers.task-drawer.pipeline-checkitems', [
    'checkItemSearch' => $checkItemSearch
  ])
@endcan