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

    <section id="eventsPageTop">
        <img class="img-fluid mainImage" src="{{ asset('assets/images/homepage/Liverpool_Puffin_Room_2_A.jpg') }}">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h1>Upcoming events at the Puffin' Rooms</h1>
                        <p>
                            Liverpool'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">
                <div class="col-lg-6 offset-lg-3 text-center">
                    <h2>Live in-house music</h2>
                    <ul class="list-unstyled">
                        <li>Monday and Tuesday from <strong>7.30pm</strong></li>
                        <li>Wednesday and Thursday from <strong>8pm</strong></li>
                        <li>Friday and Saturday from <strong>8.30pm</strong></li>
                        <li>Sunday from <strong>4.30pm</strong></li>
                    </ul>
                    <p>
                        You'll love the great acoustics and relaxing atmosphere that only Puffin' Rooms brings.  Unwind and listen to local artists, whether you are sampling one of our 200 rare whiskies or a pinot noir - we've got your covered.
                    </p>
                </div>
            </div>
            <div class="row">
                @foreach($events as $event)
                    <div class="col-lg-6">
                        <div class="eventItem">
                            <h4>{{ $event->title }}</h4>
                            <h5>{{ $event->dates }}</h5>
                            {!! $event->description !!}

                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection