@extends('index')

@section('main')

    <section class="section top-section top-section--large relative" style="background-image: url('assets/img/img-bg-1.jpg');">
        <figure class="section-abs-img section-abs-img--news-1"><img class="js-paroller" data-paroller-factor="0.2" data-paroller-type="foreground" src="assets/img/img-leaf-1.png" alt=""></figure>
        <figure class="section-abs-img section-abs-img--news-2"><img class="js-paroller" data-paroller-factor="-0.2" data-paroller-type="foreground" src="assets/img/img-leaf-2.png" alt=""></figure>
        <div class="section__inner section__inner--section section__inner--center">

            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <h1 class="top-section__title main-title main-title--white main-title--large text-center--sm">{!! \App\Helpers\Helper::htmlTags(nl2br($page->extra_i18n->top->header ?? ''), [[ 's', 'strong', '']]) !!}</h1>
                    </div>
                </div>

            </div>
        </div>

    </section>

    @if(!empty($news))
    <div class="section news-list margin-top-210">
        <div class="section__inner section__inner--section relative">
            <figure class="section-abs-img section-abs-img--news-3"><img class="js-paroller" data-paroller-factor="0.2" data-paroller-type="foreground" src="assets/img/img-item-12.png" alt=""></figure>
            <figure class="section-abs-img section-abs-img--news-4"><img class="js-paroller" data-paroller-factor="-0.2" data-paroller-type="foreground" src="assets/img/img-item-13.png" alt=""></figure>
            <figure class="section-abs-img section-abs-img--news-5"><img src="assets/img/img-item-8.jpg" alt=""></figure>
            <div class="container z-index">
                <div class="row gutters-14">
                    @foreach($news as $newsItem)
                        <div class="col-md-5 {{ $loop->index % 2 == 0 ? 'col-md-offset-1' : '' }} flex flex--stretch">
                        <a href="{{ $newsItem->getUrl() }}" class="news-item">
                            <figure class="news-item__img"><img src="{{ $newsItem->hasImage() ? $newsItem->getImage()->widen(700) : 'assets/img/img-news-4.jpg' }}" alt="{{ $newsItem->hasImage() ? $newsItem->getImage()->data->name : '' }}"></figure>
                            <div class="news-item__inner">
                                <div class="news-item__label">{{ $newsItem->date->translatedFormat('d F Y') }}</div>
                                <div class="news-item__title">{!! nl2br($newsItem->extra_i18n->small_title ?? $newsItem->name) !!}</div>
                                <div class="news-item__text">
                                    <p>{!! !empty($newsItem->extra_i18n->small_text) ? nl2br($newsItem->extra_i18n->small_text) : Helper::truncate(strip_tags($newsItem->body), 300) !!}</p>
                                </div>
                                <div class="news-item__action">
                                    <i class="ico ico-arrow-right"></i>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>

                <div class="news-list__action flex flex--center-x">
{{--                    <a href="#" class="btn-flip" data-back="Pokaż więcej" data-front="Pokaż więcej"></a>--}}

                    {!! $news->links('vendor.pagination.bootstrap-4', ['modifier' => 'center']) !!}
                </div>
            </div>

        </div>

    </div>
    @endif

@endsection