@extends('layouts/full')

@section('title')
    @if(isset($program))
        {{ $program->name }}
    @else
        NH Gooi Podcast
    @endif
@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>NH Gooi podcast</li>
        @if(isset($program))
            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
            <li><a title="{{$program->name}}"
                   href="/podcast{{$program->url}}">{{$program->name}}</a></li>
        @endif
    </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="no-box full-width post single">
                        <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), 'isPodcast' => $isPodcast])
                        </div><!--/.row-->
                    </div>
                @else
                    <div class="box full-width">
                        <p class="page_body">Er zijn geen items 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), 'isPodcast' => $isPodcast])
                            <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.banner_sidebar')
            </div>
        </div>
    </div>

@endsection

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