@extends('frontend.layouts.app')

@section('title')
    {{ $achievement->title }}
@endsection

@push('style')
    <style>
        .event-detail-image {
            width: 100%;
            height: 700px;
            object-fit: cover;
            border-radius: 12px;
        }

        .event-meta {
            font-size: 14px;
            color: gray;
        }

        .event-description p {
            line-height: 1.8rem;
            font-size: 17px;
        }

        .share-icons i {
            font-size: 22px;
            margin-right: 15px;
            cursor: pointer;
        }

        .share-icons i:hover {
            color: #0d6efd;
        }
    </style>
@endpush

@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => [['name' => 'Achievements', 'url' => '#'], ['name' => $achievement->title, 'url' => null]],
    ])

    <div class="container-fluid my-4">

        <div class="row justify-content-center">
            <div class="col-12">

                <img src="{{ asset($achievement->image) }}" class="event-detail-image mb-4" alt="{{ $achievement->title }}">
                <h2 class="text-primary fw-bold mb-3">{{ $achievement->title }}</h2>
                <div class="event-meta mb-4">
                    <i class="ri-calendar-2-line"></i> {{ $achievement->created_at->format('d M, Y') }}
                </div>
                <div class="event-description mb-5">
                    {!! $achievement->description !!}
                </div>
            </div>
        </div>

    </div>
@endsection

@push('script')
@endpush