@extends('layouts.public')
@section('title', 'Speakers | Kenya Diaspora Alliance')
@section('content')
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title">
                            Speakers
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Speakers</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="pricing" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
                            Meet our speakers
                        </h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Introducing Our Speakers: Explore a diverse lineup of industry experts, thought leaders, and
                            <br>
                            influencers who will enlighten and inspire you. Get ready to connect with visionary voices at
                            <br>
                            our event.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-5 g-3">
                @foreach ($speakers as $speaker)
                    <div class="col">
                        {{-- <div class="col-sm-6 col-md-4 col-lg-3"> --}}
                        {{-- <div class="row-cols-2 row-cols-sm-3 row-cols-md-5 "> --}}
                        <div class=" position-relative text-center ">
                            <a href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}">
                                {{-- <div class="rounded-2"
                                    style="height: 200px; background-image: url('{{ asset('storage/speakers/' . $speaker->avatar) }}'); background-size: cover; background-position: center top;">
                                </div> --}}
                                <div class="rounded-2 overflow-hidden " style="height: 250px;">
                                    <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt=""
                                        class="img-fluid ">
                                </div>
                            </a>
                            <div class="position-absolute bottom-0 bg-transparent "></div>
                        </div>
                        <div class="mt-2 ">
                            <div class="">
                                <a class="text-decoration-none "
                                    href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"><strong>{{ $speaker->name }}</strong></a>
                            </div>
                        </div>
                        <div class="">
                            {{ $speaker->title }}
                        </div>
                        <div class="">
                            {{ $speaker->organization }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection