@extends('layouts.frontend')
@push('page-title')
    Our Events
@endpush
@section('content')

    <section id="eventsPageTop">
        <img class="img-fluid mainBgImage" src="{{ asset('images/homepage/Liverpool_Puffin_Room_2_A.jpg') }}">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <h1>Upcoming events at Puffin Rooms Edinburgh</h1>
                        <p>
                            Edinburgh's newest and most exciting venue now open with live jazz nightly and Sunday afternoon blues.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="eventsPageMain">
        <div class="container">
            <div class="row">
                @foreach($events as $event)
                    <div class="col-md-6">
                        <div class="eventItem">
                            @if($event->image)
                                <img class="img-fluid eventMainImage" src="{{ Storage::url($event->image) }}" alt="{{ $event->title }} featured image">
                            @endif
                            <h4>{{ $event->title }}</h4>
                            @if($event->sub_title)
                                <h6>{{ $event->sub_title }}</h6>
                            @endif
                            <div class="dates">
                                {{ $event->dates }}
                            </div>
                            <div class="description">
                                {!! $event->description !!}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection