<div class="team-list 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="team-list__wrapper">
        @if($block->block_title)
            <div class="team-list__header" data-aos="fade">
                <h2>@title($block->block_title)</h2>
            </div>
        @endif
        <div class="team-list__list">
            @foreach ($block->teamMemberGroup->teamMembers as $member)
                <div class="team-list__member" data-role="cta-block" data-action="click-cta" data-aos="fade-up">
                    <div class="team-list__member-image">
                        @if ($member->photo)
                            <picture>
                                <source media="(min-width: 768px)" type="image/webp" srcset="{{ getMediaUrl($member->photo->filename, '640x828') }}.webp">
                                <source media="(min-width: 768px)" srcset="{{ getMediaUrl($member->photo->filename, '640x828') }}">
                                <source type="image/webp" srcset="{{ getMediaUrl($member->photo->filename, '290x360') }}.webp">
                                <img src="{{ getMediaUrl($member->photo->filename, '290x360') }}" alt="{{ htmlentities($member->title) }}">
                            </picture>
                        @endif
                    </div>
                    <div class="team-list__member-content">
                        <a class="team-list__member-name" href="#" data-action="open-detail" data-member="{{ $member->id }}">
                            {{ $member->title }}
                        </a>
                        <div class="team-list__member-position">
                            {{ $member->title_position }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="team-list__overlay modal-overlay" data-role="overlay">
        <div class="team-list__drawer">
            @foreach ($block->teamMemberGroup->teamMembers as $member)
                <div class="team-list__detail" data-role="detail" data-member="{{ $member->id }}">
                    <div class="team-list__detail-header">
                        <div class="team-list__detail-image">
                            @if ($member->photo)
                                <picture>
                                    <source media="(min-width: 768px)" type="image/webp" srcset="{{ getMediaUrl($member->photo->filename, '640x828') }}.webp">
                                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($member->photo->filename, '640x828') }}">
                                    <source type="image/webp" srcset="{{ getMediaUrl($member->photo->filename, '290x360') }}.webp">
                                    <img src="{{ getMediaUrl($member->photo->filename, '290x360') }}" alt="{{ htmlentities($member->title) }}">
                                </picture>
                            @endif
                        </div>
                        <div class="team-list__detail-info">
                            <div>
                                <div class="team-list__detail-name">
                                    {{ $member->title }}
                                </div>
                                <div class="team-list__detail-position">
                                    {{ $member->title_position }}
                                </div>
                            </div>
                            <div class="team-list__detail-links">
                                @if ($member->linkedin_link)
                                    <a href="{{ $member->linkedin_link }}" class="social-link social-link--linkedin" target="_blank"></a>
                                @endif
                                @if ($member->twitter_link)
                                    <a href="{{ $member->twitter_link }}" class="social-link social-link--twitter" target="_blank"></a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="team-list__detail-content">
                        {!! $member->content !!}
                    </div>
                </div>
            @endforeach
            <button class="team-list__close-drawer modal-close" data-action="close-detail"></button>
        </div>
    </div>
</div>
