@extends('layouts/full')

@section('title')
    Programma gemist
@endsection

@section('page_class')
    news_post post_container
@endsection

@section('breadcrumb')
    @if(isset($program))
        <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="{{url('gemist.fragment')}}">Programma gemist</a></li>
            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
            <li>{{$program->name}}</li>
        </ul>
    @else
        <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>Programma gemist</li>
        </ul>
    @endif
@endsection

@section('content')
    <div class="">
        <div class="row news_post post_container">
            <div class="col-12 col-md content_container">
                <div id="gemist_tabs" class="no_scroll clearfix">
                    <div class="tabs fit_content">
                        <h4 class="box_header active">
                            <a href="{{route('gemist.programma')}}" title="Programma gemist">
                                <span>Programma gemist</span>
                            </a>
                        </h4>
                        <h4 class="box_header">
                            <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
                                <span>Fragment gemist</span>
                            </a>
                        </h4>
                    </div>
                </div>
                @if(isset($program))
                    <h2 class="page_title2">{{$program->name}}</h2>
                    <p class="align-right">
                        <a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon
                            alles</a>
                        <a href="{{route('programma') . $program->url}}" title="{{$program->name}}"
                           class="btn btn-info">Programmainfo</a>
                    </p>
                @else
                    <p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven
                        onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.<br/><br/>
                @endif

                @if(isset($programs))

                    <div class="clearfix podcast_items">
                        @include('partial/programitems', [
                            'li' => [
                                'class' => 'col-12 col-md-6'
                            ],
                            'content' => [
                                'class' => 'box full_width flex-column d-flex',
                                'style' => 'height: 270px'
                            ],
                            'ul' => [
                                'class' => 'row overview'
                            ],
                            'body' => [
                                'show' => true,
                                'class' => 'clipText clipText-5'
                            ],
                            'actionButton' => [
                                'class' => 'd-flex flex-column justify-content-end flex-grow-1'
                             ],
                            'showAction' => true,
                            'showTime' => true,
                            'programs' => array_slice($programs, 0, 8)])
                    </div>

                @else

                    <p class="page_body">Er zijn geen fragmenten beschikbaar.</p>

                @endif
            </div>

            <div class="col-12 col-md-auto sidebar">
                @if ((isset($programs)))
                    <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/programitems', ['id' => 'items-programs', 'showTime' => true, 'programs' => array_slice($programs, 8)])
                            <a class="btn auto_width" id="meer-nieuws-more-programs" href="#"
                               data-loadmorenews='{"container":["#items-programs"]}'>
                                <span class="fas fa-spinner fa-spin" id="loading"></span>
                                Meer fragmenten
                            </a>
                        </div>
                    </div>
                @endif

                @include('widgets.banner_sidebar')
            </div>
        </div>
    </div>
    <style>
        @keyframes tilt-shaking {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(5deg);
            }
            50% {
                transform: rotate(0deg);
            }
            75% {
                transform: rotate(-5deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

        .post_container .post_tags li a {
            animation: tilt-shaking 1s linear infinite;
        }
    </style>
@endsection