@component('open._layouts.app', [
    'title' => $videosPage->name,
    'meta' => $videosPage->meta(),
])
    <section class="article-list">
        @if(!empty($category))
            {{ Breadcrumbs::render('videosCategory', $category) }}
        @else
            {{ Breadcrumbs::render('videos') }}
        @endif

        <header class="container row header-third-nav u-mb100">
            <div class="row">
                <div class="col col-1 placeholder"></div>
                <div class="col col-10">
                    <h1>{{ $videosPage->name }}</h1>
                    <p>
                        {{ $videosPage->description }}
                    </p>
                </div>
                <div class="col col-1 placeholder"></div>
            </div>
        </header>

        <div class="container contact-container">
            @if($theVideo)
            <div class="card clear-both c-card--promoted">
                    <div class="card-body">
                        <div class="card-date">
                            <div>{{ $theVideo->started_at->format('d') }}</div>
                            <div>
                                <span>{{ get_month_date($theVideo->started_at) }}</span>
                                <span>{{ $theVideo->started_at->format('Y') }}</span>
                            </div>
                        </div>
                        <h4 class="card-title">
                            <a href="{{ $theVideo->path() }}">{{ $theVideo->name }}</a>
                        </h4>
                        @if($category = $theVideo->tagsWithType('articleCategory')->first())
                            <div class="card-theme">- {{ $category->name }} -</div>
                        @endif
                        <p class="u-mt24">{{ str_tease($theVideo->description)  }}</p>

                        <div class="c-card__footer">
                            @if(!empty($theVideo->duration))
                                @lang('pages.videos.duration') {{ $theVideo->duration }}
                            @endif
                            <a href="{{ $theVideo->path() }}" class="read-more pull-right"> @lang('base.readMore')</a>
                        </div>
                    </div>

                <div class="card-map">
                    @if($theVideo->video_id)
                        <div class="u-responsive-video">
                            <iframe src="https://www.youtube.com/embed/{{ $theVideo->video_id }}?rel=0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
                        </div>
                    @endif
                </div>
            </div>
            @endif
            <nav class="header-third-nav u-mb60">
                <div class="row">
                    <ul class="tabs">
                        @foreach($articleCategories as $articleCategory)
                            <li class="tab @if(!empty($category) && $category->name == $articleCategory->name) active @endif">
                                <a href="{{ route('videoCategories.index', [$articleCategory->slug, $articleCategory->id]) }}">
                                    {{ $articleCategory->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </nav>
            @foreach($videos->chunk(3) as $row)
            <div class="row">
                @foreach($row as $video)
                    @if(!empty($video->name)) {{-- todo:hack to check if name is null --}}
                    <div class="col col-4">
                        <div class="card clear-both c-card--flat js-match-height">
                            <div class="card-date">
                                <div>{{ $video->started_at->format('d') }}</div>
                                <div>
                                    <span>{{ get_month_date($video->started_at) }}</span>
                                    <span>{{ $video->started_at->format('Y') }}</span>
                                </div>
                            </div>
                            @if(!empty($video->video_id))
                                <div class="c-card__image--shadowed">
                                    <a href="{{ $video->path() }}">
                                        <img src="{{ getVideoYoutubeThumbByVideoID($video->video_id) }}" alt="{{ $video->name }}" class="u-responsive-image">
                                    </a>
                                </div>
                            @endif
                            <div class="card-body">
                                <h4 class="card-title">
                                    <a href="{{ $video->path() }}">
                                        {{ $video->name }}
                                    </a>
                                </h4>
                                @if($category = $video->tagsWithType('articleCategory')->first())
                                    <div class="card-theme">- {{ $category->name }} -</div>
                                @endif
                            </div>
                            <div class="c-card__footer">
                                @if(!empty($video->duration))
                                    @lang('pages.videos.duration') {{ $video->duration }}
                                @endif
                                <a href="{{ $video->path() }}" class="read-more pull-right"> @lang('base.readMore')</a>
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>
            @endforeach
        </div>

    </section>
@endcomponent