@extends('layouts.main')
@section('content')
    <div class="articlePage">
        <article class="articleContent">
            <div class="producentsList">
                <ul class="manufacturers-scroll">
                    @foreach($manufacturersList as $manufacturer)
                        <li>
                            <div class="item">
                                <a class="mask" href="{{ route('search::product', 'm/' . $manufacturer->id . '/' .
                                    str_slug($manufacturer->name)) }}">{{ $manufacturer->name }}
                                </a>
                                <div class="logoRow">
                                    <div class="logoColumn">
                                        <div class="producentContainer">
                                            <a href="{{ route('search::product', 'm/' . $manufacturer->id . '/' .
                                                str_slug($manufacturer->name)) }}">
                                                <img src="{{ asset('images/manufacturers/' . $manufacturer->icon) }}"
                                                     title="{{ $manufacturer->name }}" alt="{{ $manufacturer->name }}">
                                            </a>
                                            <div class="producentName">
                                                <a href="{{ route('search::product', 'm/' . $manufacturer->id . '/' .
                                                    str_slug($manufacturer->name)) }}">{{ $manufacturer->name }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </li>
                    @endforeach
                    @if ($manufacturersList->isNotEmpty())
                        {{  $manufacturersList->links() }}
                    @endif
                </ul>
            </div>
        </article>
    </div>
@endsection

@push('footScripts')
<script>
    $(function() {
        $('.manufacturers-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<div class=\"jscrollLoader\"><div><span></span>{{ trans('Manufacturers::client/manufacturers.loading') }}</div></div>',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'ul.manufacturers-scroll',
            callback: function() {
                $('ul.pagination').remove();
                $('.jscroll-added').children().unwrap();
                $('.manufacturers-scroll:not(:first)').children().unwrap();
            }
        });
    });
</script>
@endpush

<style>
    .jscroll-added {
        display: inline;
    }
</style>