@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @include('frontend.layouts.breadcrumb', ['title' => $pageTeamsTitle ?? 'Our Team'])

    <section class="tv-team-section bg-light space cms-team-page-section">
        <div class="container">
            <div class="title-wrap three text-center">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>{{ $pageTeamsSubtitleLabel ?? 'Our Team' }}</div>
                <h2 class="sec-title">{!! nl2br(e($pageTeamsHeading ?? '')) !!}</h2>
                @if(!empty($pageTeamsIntro))
                    <p class="mb-0 mt-15">{{ $pageTeamsIntro }}</p>
                @endif
            </div>
            <div class="row gy-30">
                @forelse($teams as $member)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                        <div class="tv-team-card wow fadeInUp">
                            <div class="team-photo cms-frame cms-frame--team">
                                <img class="cms-img-cover" src="{{ $member->image ? asset('storage/' . $member->image) : asset('frontend/images/team/hm1-img0' . (($loop->iteration % 3) ?: 3) . '.webp') }}" alt="{{ $member->name }}" width="384" height="420">
                                <div class="team-social">
                                    @if($member->facebook)<a href="{{ $member->facebook }}"><i class="fa-brands fa-facebook-f"></i></a>@endif
                                    @if($member->twitter)<a href="{{ $member->twitter }}"><i class="fa-brands fa-x-twitter"></i></a>@endif
                                    @if($member->linkedin)<a href="{{ $member->linkedin }}"><i class="fa-brands fa-linkedin-in"></i></a>@endif
                                </div>
                            </div>
                            <div class="team-info">
                                <div class="info-inner">
                                    <h3 class="team-name"><a href="{{ route('frontend.teams.show', $member) }}">{{ $member->name }}</a></h3>
                                    <p class="team-role">{{ $member->position }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-lg-12">
                        <div class="cms-inotek-empty text-center">
                            <h3>No team members found</h3>
                            <p>Add active team members from the admin to show them here.</p>
                        </div>
                    </div>
                @endforelse
            </div>

            @if($teams->hasPages())
                <nav class="cms-team-pagination" aria-label="Team pagination">
                    <a class="cms-team-page-link {{ $teams->onFirstPage() ? 'disabled' : '' }}" href="{{ $teams->previousPageUrl() ?: '#' }}" aria-label="Previous team page">
                        <i class="fa-solid fa-arrow-left-long"></i>
                    </a>
                    @for($page = 1; $page <= $teams->lastPage(); $page++)
                        <a class="cms-team-page-link {{ $teams->currentPage() === $page ? 'active' : '' }}" href="{{ $teams->url($page) }}">
                            {{ $page }}
                        </a>
                    @endfor
                    <a class="cms-team-page-link {{ $teams->hasMorePages() ? '' : 'disabled' }}" href="{{ $teams->nextPageUrl() ?: '#' }}" aria-label="Next team page">
                        <i class="fa-solid fa-arrow-right-long"></i>
                    </a>
                </nav>
            @endif
        </div>
    </section>

    @include('frontend.partials.newsletter')
@endsection