@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{__('messages.team')}}" bgImage="assets/images/backgrounds/page-header-bg.png"
        homeLink="{{ url('/') }}" />
    <!--Page Header End-->
    <!--Volunteer Carousel Page Start-->
    <section class="volunteer-carousel-page">
        <div class="container">
            <div class="volunteer-carousel-style owl-carousel owl-theme carousel-dot-style">
                @forelse ($team as $teamMember)
                <div class="item">
                    <div class="team-one__single">
                        <div class="team-one__img-box">
                            <div class="team-one__img">
                                <img src="{{ $teamMember->photo ? asset('storage/' . $teamMember->photo) : 'https://placehold.co/370x400' }}" alt="">
                            </div>
                        </div>
                        <div class="team-one__content">
                            <div class="team-one__name-box">
                                <h4 class="team-one__name">{{ $teamMember->name }}</h4>
                                <p class="team-one__sub-title">{{ $teamMember->position }}</p>
                            </div>
                            <div class="team-one__share-and-social team-one__share-and-social--visible">
                                <div class="team-one__social">
                                    @if($teamMember->email)
                                        <a href="mailto:{{ $teamMember->email }}" title="Email"><span class="icon-envelope"></span></a>
                                    @endif
                                    @if($teamMember->phone)
                                        <a href="tel:{{ $teamMember->phone }}" title="Phone"><span class="icon-phone-call"></span></a>
                                    @endif
                                </div>
                                <div class="team-one__share">
                                    <span class="icon-share"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <!--Empty state when no team members-->
                <div class="item">
                    <div class="team-one__single">
                        <div class="team-one__img-box">
                            <div class="team-one__img">
                                <img src="https://placehold.co/370x400" alt="">
                            </div>
                        </div>
                        <div class="team-one__content">
                            <div class="team-one__name-box">
                                <h4 class="team-one__name">No team members yet</h4>
                                <p class="team-one__sub-title">Add team members in the admin panel</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforelse
                <!--Volunteer Page Single End-->
            </div>
        </div>
    </section>
    <!--Volunteer Carousel Page End-->
@endsection