@php
    $isShowHomeStyles = $showHomeStyles ?? false;
@endphp

<a href="#" data-bs-toggle="modal" data-bs-target="#speakerCardModal{{ $speaker->ulid }}">
    <div class="text-center">
        <div class="image-box border border-5 mb-2 @if($loop->even) border-event-color @else border-primary @endif" style="height: 220px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
            <img class="speaker-image" src="{{ $speaker->main_image_thumbnail ?? $speaker->main_image_path }}"  alt="{{ $speaker->name }}"  />
        </div>

        @if (! empty($speaker->company_logo))
            <div class="text-center mb-2">
                <img src="{{ asset('storage/'.$speaker->company_logo) }}" alt="{{ $speaker->company_name }}" class="img-fluid mx-auto speaker-company-logo" />
            </div>
        @endif
        <div class="text-primary lh-md mb-1 speaker-details-info">
            <div class="lh-sm text-capitalize fw-bold mb-1 @if($isShowHomeStyles) fs-20 @else fs-18 @endif">{{ $speaker->name }}</div>
            
            @if (! empty($speaker->job_title))
                <div class="lh-sm @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                    {{ $speaker->job_title }}
                </div>
            @endif
            
            @if (! empty($speaker->company_name))
                <div class="text-capitalize @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                    {{ $speaker->company_name }}
                </div>
            @endif
            
            @if (! empty($speaker->country))
                <div class="text-event-color text-capitalize fw-bold @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                    {{ $speaker->country }}
                </div>
            @endif
        </div>
    </div>                            
</a>

<div class="modal fade" id="speakerCardModal{{ $speaker->ulid }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header py-6">
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-5">
                <div class="row g-5">
                    <div class="col-10 col-lg-3 col-sm-3">
                        <div class="border border-5 mb-3 overflow-hidden d-flex align-items-center justify-content-center @if($loop->even) border-event-color @else border-primary @endif">
                            <img class="speaker-image speaker-image-modal" src="{{ $speaker->main_image_thumbnail }}" srcset="{{ $speaker->main_image_path }} 2x" alt="{{ $speaker->name }}" />
                        </div>
                    </div>

                    <div class="col-12 col-lg">
                        <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                            <div class="text-primary lh-md">
                                <h3 class="text-primary text-capitalize fs-24 fw-bold mb-2">{{ $speaker->name }}</h3>

                                @if (! empty($speaker->job_title))
                                    <div class="fs-15">{{ $speaker->job_title }}</div>
                                @endif

                                @if (! empty($speaker->company_name))
                                    <div class="text-capitalize fs-15">{{ $speaker->company_name }}</div>
                                @endif

                                @if (! empty($speaker->country))
                                    <div class="text-event-color text-capitalize fs-15 fw-bold">{{ $speaker->country }}</div>
                                @endif
                            </div>

                            @if (! empty($speaker->company_logo))
                                <div>
                                    <img src="{{ asset('storage/'.$speaker->company_logo) }}" alt="{{ $speaker->company_name }}" class="img-fluid mx-auto speaker-company-logo" />
                                </div>
                            @endif
                        </div>

                        <div>
                            {!! html_entity_decode($speaker->about) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>