@extends('layouts.main')

@section('page-id', '6036672caa47ec1546c2d39b')

@section('body-class', 'sand')

@section('content')
  <div class="section transparent">
    <div class="wide-container">
      <div class="page-heading-wrapper with-dropdown">
        <h1 class="page-heading">Events</h1>
        <div class="filter-by-wrapper">
          <div>Filter by:</div>
        </div>
      </div>
      <div class="news-columns w-row">
        <div class="news-filter-column w-col w-col-2 w-col-stack">
          <div class="news-filter">
            <div class="news-filter-heading">
              <div>Filter By</div>
            </div>
            <ul role="list" class="news-filter-list w-list-unstyled">
              <!--<li>
                <a href="{{ route('news') }}"
                  class="news-filter-link {{ isset($mainCategory) === false ? 'w--current' : '' }}">All</a>
              </li>-->
@if ($categories)
@foreach ($categories as $category)
              <li>
                <a href="{{ route('news.category', ['category' => $category->slug]) }}" class="news-filter-link {{ (isset($mainCategory) && $mainCategory->id === $category->id) ? 'w--current' : '' }}">{{ $category->title }}</a>
              </li>
@endforeach
@endif
            </ul>
          </div>
        </div>
        <div class="w-col w-col-10 w-col-stack">
          <div class="articles-row">
@if (count($articles) > 0)
@foreach ($articles as $article)
@php
$articleCategory = $article->categories()->first();
@endphp
@if($articleCategory->title === 'Future Events' )
            <div class="articles-column">
              <div class="article-content-wrapper">
                <div class="article-category">{{ $articleCategory->title }}</div>
                <h2 class="mt-0">{{ $article->title }}</h2>
                @if($article->start_date)
                <h3 class="mt-0">{{ $article->end_date ?  date('d-m-Y', strtotime($article->start_date)).' - '.date('d-m-Y', strtotime($article->end_date))  : date('d-m-Y', strtotime($article->start_date))}}
                </h3>
                @endif
                <div class="article-content w-richtext">
                  {!! $article->body !!}
                </div>
              </div>
            </div>
@else
            <div class="articles-column">
              <a href="{{ route('news.article', ['category' => $articleCategory->slug, 'article' => $article->slug]) }}"
                class="article-inner-wrapper no-shadow w-inline-block">
                <div class="article-image" style="background-image: url({{ $article->asset_urls->thumbnail }})"></div>
                <div class="article-content-wrapper">
                  <div class="article-category">{{ $articleCategory->title }}</div>
                  <h2 class="mt-0">{{ $article->title }}</h2>
                  @if($article->start_date)
                  <h3 class="mt-0">{{ $article->end_date ?  date('d-m-Y', strtotime($article->start_date)).' - '.date('d-m-Y', strtotime($article->end_date))  : date('d-m-Y', strtotime($article->start_date))}}</h3>
                  @endif
                  <p>{{ $article->short_description }}</p>
                </div>
              </a>
            </div>
@endif
@endforeach
@else
            <div class="articles-column" style="width: 100%;">
              <div>No articles can be found.</div>
            </div>
@endif
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection