@extends('layouts.app')
@section('content')
  <div class="m-auto flex items-center p-7">

    @foreach ($events as $event)
        <div class="max-w-sm rounded-xl overflow-hidden shadow-lg my-2 pb-3 bg-gray-50 m-auto">

            <figure class="relative max-w-sm">
                @if ($event->image)
                <img class="w-full rounded-t-lg" src="/storage/{{ $event->image }}" alt="{{ $event->name }}">
                @endif
                <figcaption class="absolute text-lg -mt-14 text-white px-4">
                    <div class="bg-blue-800 rounded-t-md px-4 py-1 mt-6 ml-2">
                    <h4 class="text-base">{{ $event->is_active ? 'Upcoming' : 'Passed' }}</h4>
                    </div>
                </figcaption>
            </figure>

            <div class="px-6 py-3">
            <div class="font-semibold text-xl">{{ $event->name }}</div>
            </div>

            <div class="flex px-6 text-gray-600">
            <div class="flex-shrink-0 h-16 w-32">
                <h4 class="text-xs">Duration</h4>
                <h1 class="font-semibold text-blue-600 text-xl text-left">{{ $event->duration }}</h1>
            </div>

            <div class="flex-shrink-0 h-16 w-32">
                <h4 class="text-xs">Starts on</h4>
                <h1 class="font-semibold text-blue-600 text-xl text-left">{{ Carbon\Carbon::parse($event->is_active)->format('d M') }}</h1>
            </div>
            </div>

            <div class="flex space-x-2 px-6">

            <a class="p-2 bg-blue-800 text-gray-100 mb-2 rounded text-lg" type="submit" href="/apply-for-event/{{ $event->id }}">Sign Up</a>

            </div>

      </div>
    @endforeach

    {{ $events->links() }}
  </div>
@endsection