<% use Mojo::JSON qw/encode_json decode_json/; %>
<% use Mojo::IOLoop; %>
<% my $ghome = {}; my $appts; if ($view eq 'home') { 
	<% 
	if ($settings->{'search'}) {
		$appts = &subs::db_query('select * from appointments where (app like ? or file like ?) and file is not null and (type=? or type=?) order by timestamp desc',
			'%' . $settings->{'search'} . '%', '%' . $settings->{'search'} . '%','image','video')->hashes;
		$view = 'album';
		my @temp_apps;
		@temp_apps = map { $_->{'app'} } @{$appts};
		foreach my $ta ( @temp_apps ) {
			unless ( grep { $_ eq $ta } @{$apps} ) {
				push @{$apps}, $ta;
			}
		}
	}
	else {
		$appts = &subs::db_query('select * from appointments where file is not null and (type=? or type=?) order by timestamp desc','image','video')->hashes; 
	}
}	%>
<div id="gallery" unlock="<%= $settings->{'combo_unlock'} %>" view="<%= $view %>" apps="<%= eval { return encode_json $apps } || [] %>" style="text-align:center;display:block;width:105%;max-height:100%;height:100%;background-color:black;">
	<% if ($view ne 'photo') { %>
		<input id="gallery_search" value="<%= $settings->{'search'} %>" style="float:left;" placeholder="Search"><br>
	<% } %>

	<% if ($view eq 'home') { %>
		<div id="gallery_home" style="background-color:white;height: 100%; width:100%;overflow:scroll;">
			<% Mojo::IOLoop->subprocess->run_p(sub { %>

				<% foreach my $appt ( @{$appts} ) {
					if (!$ghome->{$appt->{'app'}}) { $ghome->{$appt->{'app'}} = []; } else {  }
					my $files = eval { return decode_json $appt->{'file'} } || [];

					foreach my $f ( @{$files} ) { 
						$f->{'type'} = $appt->{'type'} unless $f->{'type'};
						$f->{'app'} = $appt->{'app'};
						$f->{'app_uuid'} = $appt->{'uuid'};
						$f->{'info'} = {} unless $f->{'info'};
						if ((!$f->{'info'}->{'duration'} || $f->{'info'}->{'duration'} =~ /[A-Za-z]/gi) && $f->{'type'} eq 'video') {
							$f->{'info'}->{'duration'} = $appt->{'duration'} / 1000;
						}
					}
					push @{$ghome->{$appt->{'app'}}}, @{$files};
				}

				foreach my $app ( sort keys %{$ghome} ) { %>
					<% my $aset = $asettings->{$app} || &subs::settings_grabber({ app => $app, settings => ['main_image','visible'] }); %>
					<% next if $aset->{'visible'} ne 'checked' && $permissive == 0; %>

					<% my $content = $c->render_to_string(
						template => 'apps/gallery_home',
						appts => $appts, 
						aset => $aset, 
						app => $app, 
						ghome => $ghome, 
						settings => $settings, 
						asettings => $asettings, 
						pre_count => $count, 
						load => 'all', 
						first_count => 0
					);
					&Websocket::send('music', { patience => 1, destination => $c->param('browser_tab_id'), type => 'append', selector => '#gallery_home', content => $content });
					 %>
				<% } %>
			<% }); %>
			<img src="/images/jbuttons/padlock unlock.png" class="hover tiny_thumb gallery gallery_lock" style="position:absolute;top:35px;right:40px;<% if ($settings->{'combo_unlock'} =~ /[a-zA-Z0-9]/gi) { %>background-color:red;<% } %>">
			<img src="/images/decipherable/home.png" toggled="<%= $settings->{'home_toggled'} %>" class="hover tiny_thumb gallery gallery_home_toggle" style="position:absolute;top:35px;right:0px;">
		</div>
	<% } elsif ($view eq 'album') { %>
		<div id="gallery_album" style="display:inline-block;background-color:white;height:100%; width:100%;overflow:scroll;">
			<%= include 'apps/gallery_album', appts => $appts, settings => $settings, asettings => $asettings, pre_count => $count, load => 'all', first_count => 0 %>
			<% if ($settings->{'scroll_direction'} eq 'asc') { %>
				<img src="/images/make believe/down.png" direction="asc" class="hover tiny_thumb gallery gallery_scroll_direction" style="position:absolute;top:35px;right:70px;">
			<% } else { %>
				<img src="/images/make believe/up.png" direction="desc" class="hover tiny_thumb gallery gallery_scroll_direction" style="position:absolute;top:35px;right:70px;">
			<% } %>
			<img src="/images/jbuttons/padlock unlock.png" class="hover tiny_thumb gallery gallery_lock" style="position:absolute;top:35px;right:40px;<% if ($settings->{'combo_unlock'} =~ /[a-zA-Z0-9]/gi) { %>background-color:red;<% } %>">
			<img src="/images/decipherable/home.png" toggled="<%= $settings->{'home_toggled'} %>" class="hover tiny_thumb gallery gallery_home_toggle" style="position:absolute;top:35px;right:0px;">
		</div>
	<% } elsif ($view eq 'photo') { %>
		<img class="images" id="main_image" style="height:100%;max-height:100%;top:60px;object-fit:contain;"></img>
		<video class="images" loop autoplay id="main_video" style="display:none;height:100%;max-height:100%;object-fit:contain;"></video>
		<img src="/images/studio/back.png" class="hover tiny_thumb image_control" direction="prev" style="position:absolute;left:0px;top:35px;">
		<img src="/images/studio/forward.png" class="hover tiny_thumb image_control" direction="next" style="position:absolute;left:40px;top:35px;">
		<img src="/images/make believe/renew.png" class="hover tiny_thumb image_renew" style="position:absolute;top:35px;left:80px;">
		<img src="/images/studio/repeat.png" class="hover tiny_thumb image_repeat repeat" style="position:absolute;top:35px;left:170px;">
		<img src="/images/studio/shuffle.png" class="hover tiny_thumb image_shuffle shuffle" style="position:absolute;top:35px;left:125px;">
		<img src="/icons/lymeboard/I.png" class="hover tiny_thumb gallery file_information_grabber" style="position:absolute;top:35px;left:220px;">

		<img class="hover little_thumb gallery main_image_selector"	app="" file="" style="position:absolute;top:35px;left:255px;" src="/images/make believe/explosion.png">
		<img src="/images/decipherable/handbook.png" class="hover tiny_thumb gallery gallery_home_album" style="position:absolute;top:35px;right:70px;">
		<img src="/images/jbuttons/padlock unlock.png" class="hover tiny_thumb gallery gallery_lock" style="position:absolute;top:35px;right:40px;<% if ($settings->{'combo_unlock'} =~ /[a-zA-Z0-9]/gi) { %>background-color:red;<% } %>">
		<img src="/images/decipherable/home.png" toggled="<%= $settings->{'home_toggled'} %>" class="hover tiny_thumb gallery gallery_home_toggle" style="position:absolute;top:35px;right:0px;">
	<% } elsif ($view eq 'padlock') { %>
		<div id="gallery_padlock" style="width:100%;height:100%;max-height:100%;top:60px;object-fit:contain;">
			<img src="/images/make believe/cancel_button.png" class="little_thumb" id="gallery_cancel_padlock" style="position:absolute;top:35px;right:5px;">
			<%= include 'padlock', mode => 'gallery' %>
		</div>
	<% } %>
</div>