<div>
    <div *ngIf="type.toLowerCase() === 'creative-agency'; else elseBlock">
        <swiper class="mt-12" [config]="config1">
            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
                <div class="border-2 border-gray/10 bg-gray/[0.06] p-[30px]">
                    <p class="font-semibold leading-7">{{ feedback.message }}</p>
                    <div class="mt-12 flex items-center gap-2.5">
                        <div>
                            <img [src]="feedback.thumbnail" alt="" />
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
                            <p class="mt-[2px] text-sm font-bold italic">{{ feedback.role }}</p>
                        </div>
                    </div>
                </div>
            </ng-template>
        </swiper>
        <div class="mt-5 flex items-center justify-end gap-2.5">
            <button
                type="button"
                class="client-swiper-button-prev flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
            >
                <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 2L2 8L8 14" stroke="white" stroke-width="2" stroke-linecap="square" />
                    <path d="M18 8H4" stroke="white" stroke-width="2" stroke-linecap="square" />
                </svg>
            </button>
            <button
                type="button"
                class="client-swiper-button-next flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
            >
                <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 2L17 8L11 14" stroke="white" stroke-width="2" stroke-linecap="square" />
                    <path d="M1 8H15" stroke="white" stroke-width="2" stroke-linecap="square" />
                </svg>
            </button>
        </div>
    </div>
    <ng-template #elseBlock>
        <swiper [config]="config2">
            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
                <div class="flex justify-between gap-7 p-7">
                    <div class="flex items-center gap-2.5">
                        <div
                            class="flex h-14 w-14 items-end justify-center overflow-hidden rounded-full border border-[rgba(125,132,150,0.2)] bg-gradient-to-t from-[rgba(125,132,150,0.1)] to-[125,132,150]"
                        >
                            <img [src]="feedback.thumbnail" alt="" class="h-full w-full object-cover" />
                        </div>
                        <div>
                            <h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
                            <p class="text-sm font-bold italic">{{ feedback.role }}</p>
                        </div>
                    </div>
                </div>
                <div class="border border-gray/10"></div>
                <div class="p-7">
                    <h3 class="text-lg font-bold italic text-black dark:text-white">new bungalow house</h3>
                    <p class="mt-4 text-base font-semibold leading-7">{{ feedback.message }}</p>
                    <div class="text-right">
                        <p class="mt-7 inline-flex bg-[rgba(8,17,31,0.06)] p-2 text-sm font-semibold text-black dark:text-white">San Diego, California</p>
                    </div>
                </div>
            </ng-template>
        </swiper>
        <div class="absolute top-7 z-10 flex gap-2.5 ltr:right-7 rtl:left-7">
            <a
                href="javascript:"
                class="feedback-slider-button-prev flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
            >
                <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
                    <path d="M7 16L1 9L2.5 7.25M7 2L5 4.33333" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
                </svg>
            </a>
            <a
                href="javascript:"
                class="feedback-slider-button-next flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
            >
                <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
                    <path d="M2 2L4 4.33333M2 16L8 9L6.5 7.25" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </ng-template>
</div>
