<div
    class="latest-posts block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}"
    data-controller="blocks/latest-posts"
    data-redirect="{{ $redirectPath }}"
>
    <div class="latest-posts__wrapper">
        <div class="latest-posts__container">

            <div class="latest-posts__filter-holder" data-role="filter-holder">
                <div class="latest-posts__filter-container" data-role="filter-container">
                    <div class="latest-posts__filter">
                        <div class="latest-posts__filter-actions">

                            <div class="latest-posts__search">
                                <span class="latest-posts__icon-search">
                                    @include('frontend.svg.search')
                                </span>
                                <input type="text" name="blog-search" class="latest-posts__search-input" value="" placeholder="@lang('frontend.search_in_the_blog')"/>
                            </div>

                            <div class="latest-posts__category-container">
                                <a href="#" class="latest-posts__filter-label-mobile" data-action="toggle-filter">
                                    <span>@lang('frontend.categories')</span>
                                </a>
                                <span class="latest-posts__category-title">
                                    @lang('frontend.pick_a_category')
                                </span>
                            </div>
                        </div>
                        <div class="latest-posts__categories-container">
                            <div class="latest-posts__categories" data-role="filter-items">
                                @foreach($categories as $category)
                                    <a href="{{ $redirectPath . '?c=' . $category->id }}" class="latest-posts__category">
                                        {{ $category->title }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="latest-posts__row latest-posts--first-row">
                @if (!empty($items[0]))
                    <div class="latest-posts__big-posts" data-role="first-post">
                        <div>
                            <a href="{{ lang_url($items[0]->lang_uri) }}" class="latest-posts__big-posts-image">
                                {!! getMediaImg($items[0]->media, '1200x1000', htmlspecialchars($items[0]->title)) !!}
                            </a>
                            <div class="latest-posts__posts-info">
                                <div class="latest-posts__posts-header">

                                    <div class="latest-posts__posts-author-container">
                                        <div class="latest-posts__posts-author-images">
                                            @foreach($items[0]->authors as $author)
                                                <div class="latest-posts__photo">
                                                    {!! getMediaImg($author->media, '200x200', htmlentities($author->title)) !!}
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="latest-posts__posts-author-names">
                                            @foreach($items[0]->authors as $author)
                                                <a href="{{ lang_url($author->uri) }}" class="latest-posts__posts-author">
                                                    <span class="latest-posts__name">
                                                        {{ $author->title }}
                                                    </span>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>

                                    <span class="latest-posts__posts-date latest-posts--desktop">
                                        {{ format_date($items[0]->date) }}
                                    </span>
                                </div>
                                <a href="{{ lang_url($items[0]->lang_uri) }}">
                                    <h3 class="latest-posts__big-posts-title">
                                        @title($items[0]->title)
                                    </h3>
                                </a>
                                <p class="latest-posts__posts-excerpt" data-role="excerpt">
                                    {{ $items[0]->reference_summary }}
                                </p>
                                <span class="latest-posts__posts-date latest-posts--mobile">
                                    {{ format_date($items[0]->date) }}
                                </span>
                                <div class="latest-posts__tags">
                                    @foreach($items[0]->categories as $category)
                                        <a href="{{ $redirectPath . '?c=' . $category->id }}" class="latest-posts__tag">
                                            {{ $category->title }}
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if (!empty($items[1]))
                    <div class="latest-posts__small-posts" data-role="second-post">
                        <a href="{{ lang_url($items[1]->lang_uri) }}" class="latest-posts__small-posts-image">
                            {!! getMediaImg($items[1]->media, '1200x1000', htmlspecialchars($items[1]->title)) !!}
                        </a>
                        <div class="latest-posts__posts-info">
                            <div class="latest-posts__posts-header">

                                <div class="latest-posts__posts-author-container">
                                    <div class="latest-posts__posts-author-images">
                                        @foreach($items[1]->authors as $author)
                                            <div class="latest-posts__photo">
                                                {!! getMediaImg($author->media, '200x200', htmlentities($author->title)) !!}
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="latest-posts__posts-author-names">
                                        @php
                                            $count = count($items[1]->authors) - 1;
                                        @endphp
                                        @foreach($items[1]->authors as $author)
                                            <a href="{{ lang_url($author->uri) }}" class="latest-posts__posts-author" data-count="{{ $count > 0 ? '+'.$count : '' }}">
                                                <span class="latest-posts__name">
                                                    {{ $author->title }}
                                                </span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>

                                <span class="latest-posts__posts-date latest-posts--desktop">
                                    {{ format_date($items[1]->date) }}
                                </span>
                            </div>

                            <a href="{{ lang_url($items[1]->lang_uri) }}">
                                <h3 class="latest-posts__small-posts-title">
                                    @title($items[1]->title)
                                </h3>
                            </a>

                            <p class="latest-posts__posts-excerpt" data-role="excerpt">
                                {{ $items[1]->reference_summary }}
                            </p>

                            <span class="latest-posts__posts-date latest-posts--mobile">
                                {{ format_date($items[1]->date) }}
                            </span>
                            <div class="latest-posts__tags">
                                @foreach($items[1]->categories as $category)
                                    <a href="{{ $redirectPath . '?c=' . $category->id }}" class="latest-posts__tag">
                                        {{ $category->title }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="latest-posts__row latest-posts--second-row">

                @if (!empty($items[2]))
                    <div class="latest-posts__small-posts" data-role="third-post">
                        <a href="{{ lang_url($items[2]->lang_uri) }}" class="latest-posts__small-posts-image">
                            {!! getMediaImg($items[2]->media, '1200x1000', htmlspecialchars($items[2]->title)) !!}
                        </a>
                        <div class="latest-posts__posts-info">
                            <div class="latest-posts__posts-header">

                                <div class="latest-posts__posts-author-container">
                                    <div class="latest-posts__posts-author-images">
                                        @foreach($items[2]->authors as $author)
                                            <div class="latest-posts__photo">
                                                {!! getMediaImg($author->media, '200x200', htmlentities($author->title)) !!}
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="latest-posts__posts-author-names">
                                        @php
                                            $count = count($items[2]->authors) - 1;
                                        @endphp
                                        @foreach($items[2]->authors as $author)
                                            <a href="{{ lang_url($author->uri) }}" class="latest-posts__posts-author" data-count="{{ $count > 0 ? '+'.$count : '' }}">
                                                <span class="latest-posts__name">
                                                    {{ $author->title }}
                                                </span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>

                                <span class="latest-posts__posts-date latest-posts--desktop">
                                    {{ format_date($items[2]->date) }}
                                </span>
                            </div>

                            <a href="{{ lang_url($items[2]->lang_uri) }}">
                                <h3 class="latest-posts__small-posts-title">
                                    @title($items[2]->title)
                                </h3>
                            </a>

                            <p class="latest-posts__posts-excerpt" data-role="excerpt">
                                {{ $items[2]->reference_summary }}
                            </p>
                            <span class="latest-posts__posts-date latest-posts--mobile">
                                {{ format_date($items[2]->date) }}
                            </span>
                            <div class="latest-posts__tags">
                                @foreach($items[2]->categories as $category)
                                    <a href="{{ $redirectPath . '?c=' . $category->id }}" class="latest-posts__tag">
                                        {{ $category->title }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if (!empty($items[3]))
                    <div class="latest-posts__big-posts">
                        <a href="{{ lang_url($items[3]->lang_uri) }}" class="latest-posts__big-posts-image">
                            {!! getMediaImg($items[3]->media, '1200x1000', htmlspecialchars($items[3]->title)) !!}
                        </a>
                        <div class="latest-posts__posts-info">
                            <div class="latest-posts__posts-header">

                                <div class="latest-posts__posts-author-container">
                                    <div class="latest-posts__posts-author-images">
                                        @foreach($items[3]->authors as $author)
                                            <div class="latest-posts__photo">
                                                {!! getMediaImg($author->media, '200x200', htmlentities($author->title)) !!}
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="latest-posts__posts-author-names">
                                        @foreach($items[3]->authors as $author)
                                            <a href="{{ lang_url($author->uri) }}" class="latest-posts__posts-author">
                                                <span class="latest-posts__name">
                                                    {{ $author->title }}
                                                </span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>

                                <span class="latest-posts__posts-date latest-posts--desktop">
                                    {{ format_date($items[3]->date) }}
                                </span>
                            </div>
                            <a href="{{ lang_url($items[3]->lang_uri) }}">
                                <h3 class="latest-posts__big-posts-title">
                                    @title($items[3]->title)
                                </h3>
                            </a>

                            <p class="latest-posts__posts-excerpt" data-role="excerpt">
                                {{ $items[3]->reference_summary }}
                            </p>
                            <span class="latest-posts__posts-date latest-posts--mobile">
                                {{ format_date($items[3]->date) }}
                            </span>
                            <div class="latest-posts__tags">
                                @foreach($items[3]->categories as $category)
                                    <a href="{{ $redirectPath . '?c=' . $category->id }}" class="latest-posts__tag">
                                        {{ $category->title }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
