@extends('layouts.app')

@section('content')

    <section class="header-inner ">
        <div class="container ">
            <div class="row">
                <div class="col-12 col-md-10 mx-auto  text-center text-lg-left">
                    <div class="row">
                        <div class="col-12 col-lg-10">
                            <h1 data-animate="text-implode">Webinars</h1>
                            <p data-animate="slide-up">Browse through our upcoming webinars, find a topic that interests you and register to attend.</p>
                        </div>
                        <div class="col-12 col-lg-2">
                            <img class="w-100 d-none d-lg-inline-block" src="{{ asset('storage/icons/svg/online-learning.svg') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="space-ptb bg-light">
        <div class="container">
            <div class="row">
                @foreach($webinars as $i => $webinar)
                    <div class="col-12 col-md-6 col-lg-12"  data-animate="slide-up" style="animation-delay: calc({{ $i + 1 }} * 50ms)">
                        <x-webinar.list-item :webinar="$webinar"/>
                    </div>
                @endforeach
            </div>
            @if ($webinars->hasPages())
                <div class="row">
                    <div class="col-12 text-center mt-4">
                        {{ $webinars->links() }}
                    </div>
                </div>
            @endif
        </div>
    </section>

@endsection