@extends('layouts.app')

@section('title', 'Community Events')

@section('content')
<div class="page-hero">
    <div class="page-hero-inner">
        <h1><i class="fas fa-calendar-alt"></i> Community Events</h1>
        <p>Blood donation drives & community gatherings</p>
    </div>
</div>

<div class="container">
    <div style="display:grid;gap:20px">
        @forelse($events as $event)
        <a href="{{ route('events.show', $event) }}" class="card" style="text-decoration:none;color:inherit;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px">
            <div style="width:48px;height:48px;background:linear-gradient(135deg,#fef2f2,#fee2e2);color:var(--primary);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0">
                <span style="font-size:0.7rem;font-weight:600">{{ $event->date->format('M') }}</span>
                <span style="font-size:1.25rem;font-weight:700;line-height:1">{{ $event->date->format('d') }}</span>
            </div>
            <div style="flex:1;min-width:0">
                <strong style="font-size:1rem">{{ $event->title }}</strong>
                <p class="text-muted" style="font-size:0.85rem;margin-top:2px">{{ Str::limit($event->description, 60) }}</p>
                <p class="text-muted" style="font-size:0.8rem;margin-top:2px"><i class="fas fa-map-marker-alt"></i> {{ $event->location ?? 'TBA' }}</p>
            </div>
            <i class="fas fa-chevron-right" style="color:var(--text-muted)"></i>
        </a>
        @empty
        <div class="card" style="text-align:center;padding:48px">
            <i class="fas fa-calendar-alt" style="font-size:3rem;color:var(--text-muted);margin-bottom:16px"></i>
            <h3 style="margin-bottom:8px">No upcoming events</h3>
            <p class="text-muted">Check back later for blood donation camps and community events.</p>
        </div>
        @endforelse
    </div>

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