@extends('layouts/full')

@section('title')
    Fragment gemist
@endsection

@section('page_class')
    post_container breadcrumb_no_border
@endsection

@section('breadcrumb')
    <ul class="bread_crumb ">
        <li><a title="Home" href="/">Home</a></li>
        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
        <li><a title="Fragment gemist" href="{{route('gemist')}}">Fragment gemist</a></li>
        <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
        @if(isset($program))
            <li><a title="{{$program->name}}"
                   href="{{route('gemist.programma') . $program->url}}">{{$program->name}}</a></li>
            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
        @endif
        <li>Fragmenten</li>
    </ul>
@endsection

@section('content')
    <div class="">
        <div class="row news_post">
            <div class="col-12 col-md content_container md_padding_top_80">
                @if(isset($program))
                    <div class="box full-width post single">
                        <h1 class="page_title">{{$program->name}}</h1>
                        <div class="post_body">
                            <div class="content_box clearfix section_margin_top">
                                <div class="post_content page_margin_top_section ">
                                    <div class="excerpt">{!!$program->description!!}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                    @if($podcasts)

                        <div class="page_layout clearfix">
                            <div class="grid" id="items">
                                @include('partial/podcastdirectitems', ['podcasts' => array_slice($podcasts, 0, 2)])
                            </div><!--/.row-->
                        </div>
                    @else
                        <div class="box full-width">
                            <p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
                        </div>
                    @endif
            </div>
            <div class="col-12 col-md-auto sidebar">

                @if (isset($podcasts) && count($podcasts) > 2)
                    <div data-tabs>
                        <div class="tabs">
                            <h4 data-tab-content-id="tab_more_fragmenten"
                                class="box_header small flex-grow-1 active"><span>Meer fragmenten</span>
                            </h4>
                        </div>
                        <div id="tab_more_fragmenten" class="box tab_content podcast_items active">
                            @include('partial/podcastitems', ['id' => 'items-podcasts', 'showTime' => false, 'showImage' => false, 'podcasts' => array_slice($podcasts, 2)])
                            <a class="btn auto_width" id="meer-nieuws-more-podcast" href="#"
                               data-loadmorenews='{"container":["#items-podcasts"]}'>
                                <span class="fas fa-spinner fa-spin" id="loading"></span>
                                Meer fragmenten
                            </a>
                        </div>
                    </div>
                @endif

                @include('widgets/add_sidebar', ['ad_sidebar' => $ad_sidebar1 ?? 'nhgooi_section_side', 'ad_sidebarId' => 'nhgooi_sidebar1'])
            </div>
        </div>
    </div>

@endsection

@push('styles')
    <style>
        #gemist_tabs li {
            width: 50%;
        }
    </style>
@endpush