<div class="speakers-grid speakers-grid--{{ $block->alignment }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/team-list">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="speakers-grid__wrapper">
        @if($block->block_title)
            <h2 class="speakers-grid__title heading1">@title($block->block_title)</h2>
        @endif
        <div class="speakers-grid__container">
            @foreach ($block->speakers as $speaker)
                @include('frontend.templates.blocks.speaker-card', ['speaker' => $speaker])
            @endforeach
        </div>
    </div>
    <div class="team-list__overlay modal-overlay" data-role="overlay">
        <div class="team-list__drawer">
            @foreach ($block->speakers as $speaker)
                <div class="team-list__detail" data-role="detail" data-member="{{ $speaker->id }}">
                    <div class="team-list__detail-header">
                        <div class="team-list__detail-image">
                            @if ($speaker->image)
                                <picture>
                                    <source media="(min-width: 768px)" type="image/webp" srcset="{{ getMediaUrl($speaker->image->filename, '640x828') }}.webp">
                                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($speaker->image->filename, '640x828') }}">
                                    <source type="image/webp" srcset="{{ getMediaUrl($speaker->image->filename, '290x360') }}.webp">
                                    <img src="{{ getMediaUrl($speaker->image->filename, '290x360') }}" alt="{{ htmlentities($speaker->title) }}">
                                </picture>
                            @endif
                        </div>
                        <div class="team-list__detail-info">
                            <div>
                                <div class="team-list__detail-name">
                                    {{ $speaker->title }}
                                </div>
                                <div class="team-list__detail-position">
                                    {{ $speaker->subtitle }}
                                </div>
                            </div>
                            <div class="team-list__detail-links">
                                @if ($speaker->linkedin_url)
                                    <a href="{{ $speaker->linkedin_url }}" class="social-link social-link--linkedin" target="_blank"></a>
                                @endif
                                @if ($speaker->facebook_url)
                                    <a href="{{ $speaker->facebook_url }}" class="social-link social-link--facebook" target="_blank"></a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="team-list__detail-content">
                        {!! $speaker->bio !!}
                    </div>
                </div>
            @endforeach
            <button class="team-list__close-drawer modal-close" data-action="close-detail"></button>
        </div>
    </div>
</div>
