@extends('layouts/master')

@section('content_class')
    box
@endsection

@section('page')
    <div class="@yield('container_class')">
        <div class="row @yield('page_class')">
            <div class="col-12">
                @yield('breadcrumb_top')
            </div>
            <div class="col-12 col-md content_container">
                <div class="full-width md_margin_top @yield('content_class')">
                    @yield('breadcrumb')
                    @yield('tags')
                    <h1 class="page_title">@yield('title')</h1>
                    @yield('content')
                </div>
            </div>

            <div class="col-12 col-md-auto sidebar">
                @section('sidebar')
                    @if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
                        <div data-tabs>
                            <div class="tabs">
                                @if (isset($populair) && $populair)
                                    <h4 data-tab-content-id="tab_most_read"
                                        class="box_header small flex-grow-1 active"><span>Meest gelezen</span>
                                    </h4>
                                @endif
                                @if (isset($newsItems) && $newsItems)
                                    <h4 data-tab-content-id="tab_more_news"
                                        class="box_header small{{!$populair? ' active' : ''}}">
                                        <span>Meer nieuws</span></h4>
                                @endif
                            </div>
                            @if (isset($populair) && $populair)
                                <div id="tab_most_read" class="box tab_content active">
                                    @include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
                                    <a class="btn auto_width" id="meer-nieuws-most-read" href="#"
                                       data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
                                        <span class="fas fa-spinner fa-spin" id="loading"></span>
                                        Klik hier voor meer nieuws
                                    </a>
                                </div>
                            @endif
                            @if (isset($newsItems) && $newsItems)
                                <div id="tab_more_news" class="box tab_content">
                                    @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
                                    <a class="btn auto_width" id="meer-nieuws-more-news" href="#"
                                       data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
                                        <span class="fas fa-spinner fa-spin" id="loading"></span>
                                        Klik hier voor meer nieuws
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endif

                    @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])

                    @include('widgets.banner_sidebar')

                    @include('widgets/contact', [])
                @show
            </div>
        </div>
    </div>

@endsection