@extends('layouts/sidebar')

@section('title')
    Streekagenda
@endsection

@section('page_class')
    news_post post_container breadcrumb_no_border
@endsection
@section('page_container_class')
    grey_background
@endsection
@section('site_container_class')
    grey_background
@endsection

@section('content_class')
@endsection

@section('breadcrumb')
    <ul class="bread_crumb">
        <li><a title="Home" href="/">Home</a></li>
        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
        <li>Regio-agenda</li>
    </ul>
@endsection

@if(!count($events))
    @section('content')
        <div class="page_body margin_bottom">
            <p>Er zijn geen items in de streekagenda. Iets te melden? Mail het naar {{Html::mailto("info@nhgooi.nl")}}
                .</p>
        </div>
    @endsection
@else

    @section('content')
        @parent
        <div data-tabs class="page_body">
                <div style="padding: 0" class="tab_content active" id="agenda">
                    @php($count = 0)
                    @foreach($events as $event)
                            @php($count++)
                <?php $url = $event->url; ?>
                            <div class="box featured">
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <a href="{{$url}}" title="{{$event->title}}">
                                            <img src="{{$event->images && $event->images[0] && $event->images[0]->url ? $imgBase . $event->images[0]->url : '/images/noimage.png'}}"/>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <h2 class="post_title"><a href="{{$url}}" title="{{$event->title}}">{!!$event->title!!}</a></h2>
                                        <div class="sub_title" style="flex-wrap: wrap">
                        <ul class="post_tags" style="width: 100%; margin: 0 0 8px 0;height: 25px;">
                        @foreach($event->tags as $tag)
                        <li><a style="padding: 3px 8px 3px" title="{{$tag->title}}">{{$tag->title}}</a></li>
                                                @endforeach
                                            </ul>
                                            <span class="post_date" style="line-height: 1.17; height: 14px;" title="{{Formatter::relativeDate($event->starts, 'W d m y?')}}">
                                                <i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($event->starts, 'W d m y?')}}
                                                @if($event->ends && $event->starts != $event->ends)
                                                    @if($event->ends->format('d M y') != $event->starts->format('d M y'))
                                                        t/m {{strtolower(Formatter::relativeDate($event->ends, 'W d m y?'))}}
                                                    @else
                                                        van {{ $event->starts->format('H:i') }} uur tot {{ $event->ends->format('H:i') }} uur 
                                                    @endif
                                                @endif
                                            </span>
                                        </div>
                                        <p class="clipText clipText-7" title="{{Formatter::excerpt($event->content, 150)}}">
                                            {!!Formatter::excerpt($event->content, 150)!!}
                                        </p>
                                        <a class="btn fit_content" href="{{$url}}">Lees verder</a>
                                    </div>
                                </div>
                    @if($count == 0)
                    <p>Er zijn geen items gevonden. Iets te melden? Mail het naar <a href="mailto:info@nhgooi.nl">info@nhgooi.nl</a>.</p>
                    @endif
                </div>
            @endforeach
        </div>
      </div>
    @endsection
@endif