@extends('layouts.public')
@section('title', $event->title)

@section('content')
@include('partials.page-header', ['title' => $event->title])

<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card card-hover shadow-sm">
                    @if($event->image)
                        <img src="{{ image_url($event->image) }}" class="card-img-top" style="height:320px;object-fit:cover;" alt="{{ $event->title }}">
                    @endif
                    <div class="card-body p-4">
                        <div class="d-flex flex-wrap gap-3 mb-4">
                            <span class="badge rounded-pill bg-primary bg-opacity-10 text-primary px-3 py-2"><i class="bi bi-calendar3 me-1"></i> {{ $event->event_date->format('d/m/Y') }}</span>
                            @if($event->event_time)<span class="badge rounded-pill bg-warning bg-opacity-10 text-warning px-3 py-2"><i class="bi bi-clock me-1"></i> {{ substr($event->event_time, 0, 5) }}</span>@endif
                            @if($event->location)<span class="badge rounded-pill bg-success bg-opacity-10 text-success px-3 py-2"><i class="bi bi-geo-alt me-1"></i> {{ $event->location }}</span>@endif
                        </div>
                        <p class="text-muted" style="line-height:1.8;">{{ $event->description ?: 'Sin descripcion adicional.' }}</p>
                        <a href="{{ route('events.index') }}" class="btn btn-outline-primary rounded-pill mt-2"><i class="bi bi-arrow-left me-1"></i> Volver a eventos</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection