<div class="w-full min-height-50px mb-10px justify-between items-center">
    <div class="flex justify-between">
        <div class="flex pr-2">
            <div class="flex">
                <div class="flex items-center">
                    <input type="checkbox" class="ti-form-checkbox" id="hs-default-checkbox">
                    <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2">0 Selected</label>
                </div>
                <div class="mx-1 flex items-center">
                    <button (click)="isChecked = !isChecked" id="hs-checkbox-group-2" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
                      <i class="fs-l transition-all duration-200"
                         [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isChecked, 'ri-checkbox-multiple-fill text-primary': isChecked}"></i>
                    </button>
                    <label for="hs-checkbox-group-2" class="text-sm text-gray-500 ml-2">Select All</label>
                  </div>
            </div>
        </div>
        <div class="flex justify-end">
            <div class="px-1">
                <div class="relative shadow-md">
                    <input type="text" id="hs-leading-icon" name="hs-leading-icon"
                        class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
                        [(ngModel)]="search" (ngModelChange)="searchChange()">

                    <div
                        class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                        <i class="ri-search-line text-gray"></i>
                    </div>
                </div>
            </div>
            <div class="px-1">
                <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                    data-hs-overlay="#department-register-modal-add">
                    <i class="ri-add-line"></i>
                    Add
                </button>
            </div>
            <div class="px-1">
                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md">
                    <i class="ti ti-trash fs-l"></i>
                    Delete
                </button>
            </div>
            <div class="px-1">
                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
                    <i class="ti ti-book fs-l"></i>
                    Help
                </button>
            </div>
        </div>
    </div>
</div>