<article class="c-timeline  js-timeline"
         data-last-update-year="{{ (isset($updates) && $updates->isNotEmpty()) ? $updates->last()->translation->date->year : \Carbon\Carbon::now()->year }}"
         data-updates-route="{{$links->updates->route}}"
         data-read-more-label="@lang('site/global.readMore')"

>

    <div class="js-timeline-items">

        {{-- We need to keep track of the year of the update so we known when to show a year label--}}
        @php $year = \Carbon\Carbon::now()->year; @endphp

        @foreach($updates as $update)

            {{-- If  --}}
            @if($year != $update->translation->date->year)
                <div class="c-timeline__item  c-timeline__item--divider">
                    <div class="c-timeline__year">{{ $update->translation->date->year }}</div>
                </div>
                @php $year = $update->translation->date->year @endphp
            @endif

            <div class="c-timeline__item  js-timeline-item">
                <div class="c-timeline__container">
                    <div class="c-timeline__header">
                        <time class="c-timeline__date"
                              datetime="{{ $update->translation->date->format('Y-m-d') }}">{{ $update->translation->date->day }} @lang('calendar.monthNames.' . ($update->translation->date->month - 1))</time>
                        <h3 class="c-timeline__title">{{ $update->translation->name }}</h3>
                    </div>
                    <div class="c-timeline__body">

                        @if(isset($update->images) && $update->images->isNotEmpty() && !empty($update->languageImages()->isNotEmpty()))
                            <a href="/{{$links->updates->route}}/{{ $update->translation->slug }}">
                                <img class="c-timeline__image" src="{{ str_replace('\\', '/', $update->languageImages()->first()->medium_image_url) }}"/>
                            </a>
                        @endif

                        <div class="c-timeline__content  s-text  checklist-has-x-small-font">
                            {!! $update->translation->description !!}
                        </div>

                        <div class="c-timeline__action">@include('site.components.buttonLink', ['buttonText' => __('site/global.readMore'), 'buttonLink' => '/'.$links->updates->route.'/'.$update->translation->slug])</div>
                    </div>
                </div>
            </div>

        @endforeach

    </div>

    @if($updates->count() == 10)
        <div class="c-timeline__more  js-get-more-updates-container">
            @include('site.components.button', [ 'class' => 'js-get-more-updates', 'modifiers' => ['ghost'], 'buttonText' => __('site/updates.showMoreUpdates')])
        </div>
        <p class="c-timeline__no-more-available  is-hidden  js-no-more-updates-available">@lang('site/updates.noMoreAvailable')</p>
    @endif
</article>