@php($program = $data[0])
<h2 class="post_title"><a href="{{route('programma') . $program->url}}" title="{{$program->name}}">{{$program->name}}</a></h2>
<span class="post_date">
	<i class="fa-regular fa-clock"></i> {{$program->start->format('H:i')}} - {{$program->end->format('H:i')}}
</span>
@if($program->tagline)
	<p>{{$program->tagline}}</p>
@endif
<p class="now-playing-header-small">
	<strong>Nu:</strong>
	<span class="title"></span> -
	<span class="artist"></span>
</p>
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
<script>
	function updateOnAir() {
		$.ajax({
			url: '{{route('onair')}}',
			success: function (data) {
				$(document).trigger('onAirUpdated', data);
			}
		});
	}

	$(function () {
		updateOnAir();
		var onAirUpdater = setInterval(updateOnAir, 5000);
		var $nowPlaying = {
			container: $(".now-playing-header-small").hide(),
			title: $(".now-playing-header-small .title"),
			artist: $(".now-playing-header-small .artist"),
		};
		$(document).on('onAirUpdated', function (evt, data) {
			var title = data.current ? data.current.title : '';
			var artist = data.current ? data.current.artist : '';
			if (!data.current) {
				// title = data.program.name;
				// artist = data.program.tagline;
				$nowPlaying.container.slideUp();
				return;
			}
			$nowPlaying.title.text(title).attr('title', title);
			$nowPlaying.artist.text(artist).attr('title', artist);
			$nowPlaying.container.slideDown();
		});
	});
</script>

<h3 class="post_title">Daarna:</h3>
<div class="podcast_items">
	<ul class="">
	@php($startDay = $program->start->format('d'))
	@foreach($data as $program)
		@php($isToday = $program->start->format('d') == $startDay)
		@if($loop->index > 5)
			@break
		@elseif(($loop->index >= 3) && $program->nonstop)
			@break
		@elseif(!$loop->first)
			<li class="post" style="margin-bottom: 0">
				<div class="sub_title">
					<a class="program_name" href="{{route('programma') . $program->url}}" title="{{$program->name}}"><strong>{{$program->name}}</strong></a>
					<span class="post_date" title="{{Formatter::relativeDate($program->start)}} om {{$program->start->format('H:i')}}.">
						<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($program->start)}} om {{$program->start->format('H:i')}}.
					</span>
				</div>
			</li>
		@endif
	@endforeach
	</ul>
</div>

@if(isset($recent))
<h3 class="post_title">Net gemist?</h3>
<div class="podcast_items">
	<ul class="">
		<li class="post" style="margin-bottom: 0">
			<div class="sub_title">
				<a class="program_name" href="{{route('programma') . $recent->url}}" title="{{$recent->name}}"><strong>{{$recent->name}}</strong></a>
				<span class="post_date" title="{{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.">
					<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.
				</span>
			</div>
		</li>
	</ul>
</div>
@php($duration = $recent->end->diff($recent->start)->h)
<a class="action_button player" style="margin-top: 0;" href="{{route('luister.programma') . '/' . $recent->start->format('Y/m/d/H') . '/' . $duration}}" title="Luister live">
	<span class="fa fa-history"></span>
	<span>Terugluisteren</span>
</a>
</p>
@endif