@extends('layouts.public')
@section('title', $speaker->name . ' | 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">
                            {{ $speaker->name }}
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Speaker</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="pricing" class="section-padding">
        <div class="container">
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt="Speaker"
                        class="img-fluid w-100 rounded-2">
                </div>
                <div class="col-md-8 position-relative ">
                    <div class="position-relative mb-4 ">
                        <div class="fw-bold ">{{ $speaker->name }}</div>
                        <div class="fst-italic ">{{ $speaker->title }}</div>
                        <div class="fst-italic fw-bolder mb-3 ">{{ $speaker->organization }}</div>
                        <hr>

                        <div class="">{!! $speaker->message !!}</div>
                    </div>
                    <div class="position-absolute bottom-0 d-none ">
                        Share
                    </div>
                </div>
            </div>
            <div class="border-bottom mb-3"><button class="btn rounded-0 btn-info fw-bold ">Other speakers</button></div>
            <div class="row g-3">
                @if (isset($speakers) && count($speakers) > 0)
                    @foreach ($speakers as $speaker)
                        <div class="col-sm-6 col-md-4 col-lg-3 text-center">
                            <div class=" position-relative">
                                <a href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}">
                                    <div class="rounded-2 overflow-hidden">
                                        <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt=""
                                            class="img-fluid rounded-2">
                                    </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
                @else
                    <div class="col-12 py-3">
                        <button class="" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Coming soon...
                        </button>
                    </div>
                @endif
            </div>
            {{-- <div class="d-flex justify-content-center ">{{ $speakers->links() }}</div> --}}
        </div>
    </section>
@endsection