@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{breadcrumbs('brand',$page)}}
            </div>
        </div>

        <section class="section brands-page pt-0">
            <div class="container">
                <div class="catalog-top">
                    <h1>{{$page->h1}}</h1>
                    <div class="catalog-top-desc">
                        {!! $page->body !!}
                    </div>
                </div>
                @if($catalog && $catalog->isNotEmpty())
                    <div class="brand-list-component">
                        @include('front.templates.brand.brand-list')
                    </div>

                    <div class="section-link">
                        <a href="javascript:;" id="load-more-brands" class="button">{{ShowLabelById(15)}}</a>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection


@push('js')
    <script>
        $('#load-more-brands').on('click',function(){
            let __this = $(this);
            let action = '{{route('brands.more')}}';
            simpleAjaxTemplate(function(response){

                $('.brand-list-component').html(response.render);
                __this.remove();
            },action);

        });
    </script>
@endpush