{% include 'views/front/' ~ template ~ '/popups/signin-popup.html.twig' %}
{% include 'views/front/' ~ template ~ '/popups/signup-popup.html.twig' %}
{% include 'views/front/' ~ template ~ '/popups/create-playlist.html.twig' %}
{% include 'views/front/' ~ template ~ '/popups/add-playlist.html.twig' %}
{% include 'views/front/' ~ template ~ '/popups/share.html.twig' %}
{% include 'views/front/' ~ template ~ '/popups/track-options.html.twig' %}

{% if app.SystemSetting.show_cookie_box and app.cookie_accepted == false %}
<div
	id="cookies-with-stacked-buttons" class="fixed bottom-0 end-0 z-[60] sm:max-w-sm w-full mx-auto p-6">
	<!-- Card -->
	<div class="p-4 bg-white/60 backdrop-blur-sm rounded-xl shadow-2xl dark:bg-gray-900 dark:shadow-black/70">
		<div class="flex justify-between gap-x-5">
			<div class="grow">
				<h2 class="text-gray-800 dark:text-white">
					{{lang.translate('Cookie Settings')}}
				</h2>
			</div>
			<button onclick="(function(){return jQuery('#cookies-with-stacked-buttons').remove()})()" type="button" class="inline-flex rounded-full p-2 text-gray-400 hover:bg-white focus:outline-none focus:bg-white dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800" data-hs-remove-element="#cookies-with-stacked-buttons">
				<span class="sr-only">{{lang.translate('Dismiss')}}</span>
				<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M18 6 6 18"></path>
					<path d="m6 6 12 12"></path>
				</svg>
			</button>
		</div>
		<p class="mt-2 text-sm text-gray-800 dark:text-gray-100">
			{{app.SystemSetting.cookie_text|raw}}
		</p>
		<div class="mt-5 mb-2 w-full flex gap-x-2">
			<div class="grid w-full">
				<button onclick="(function(){ return fetch('/accept-cookie') , jQuery('#cookies-with-stacked-buttons').remove(); })()" type="button"  class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
					{{app.SystemSetting.cookie_button}}
				</button>
			</div>
			<div class="grid w-full">
				<button type="button" onclick="(function(){return fetch('/accept-cookie'), jQuery('#cookies-with-stacked-buttons').remove(); })()" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
					{{lang.translate('Reject all')}}
				</button>
			</div>
		</div>

	</div>
	<!-- End Card -->
</div>
{% endif %}


<div id="app-cover" class="hidden show-child">
	<div id="player">
		<span  onclick="(function(){ return jQuery('#app-cover').addClass('hidden')})()" class=" absolute bottom-4 ml-2 cursor-pointer z-10"><img src="/src/front_assets/svg/close.svg" class="w-4"/></span>

		<div id="player-track" class="active dark:text-gray-100">
			<div id="album-name" class="truncate"></div>
			<div id="track-name" class="truncate"></div>
			<div id="track-time" class="active">
				<div id="current-time"></div>
				<div id="track-length"></div>
			</div>
			<div id="s-area">
				<div id="ins-time"></div>
				<div id="s-hover"></div>
				<div id="seek-bar"></div>
			</div>
		</div>
		<div id="player-content">
			<div id="album-art" class="active">
				<img src="" class="active" id="track-poster">
				<div id="buffer-box">Buffering ...</div>
			</div>
			<div id="player-controls">
				<div class="control relative">
					<div id="volume-mute" class="text-xs button" style="background-color:transparent; padding:3px; margin:0">
						<img id="volume-mute-img" class="dark:brightness-200" src="/src/front_assets/svg/player-volume.svg" width="24"/>
						<div id="volume-bar" class="absolute lg:block hidden pt-2">
							<input type="range" class="volume w-20" id="player-audio" min="0" max="1" step="0.1" value="1" data-css="0.5">
						</div>
					</div>
				</div>

				<div class="control">
					<div class="button" id="player-previous">
						<img
						width="24" class="dark:brightness-200" src="/src/front_assets/svg/player-start.svg">
					{# <img src="/src/front_assets/svg/" > #}
					</div>
				</div>
				<div class="control">
					<div class="button" id="player-pause-button">
						<img width="24" class="play dark:brightness-200" src="/src/front_assets/svg/player-play.svg">
						<img width="24" class="pause dark:brightness-200" src="/src/front_assets/svg/player-pause.svg">
					</div>
				</div>
				<div class="control">
					<div class="button" id="player-next">
						<img width="24" class="dark:brightness-200" src="/src/front_assets/svg/player-end.svg">
					</div>
				</div>

			</div>
		</div>
	</div>
</div>


<div id="station-app-cover" class=" hidden">
	<div id="station-player">
		<div id="station-player-track" class="active dark:text-gray-100">
			<div id="station-album-name" class="truncate">Album name</div>
			<div id="station-track-name" class="truncate">Item name</div>
		</div>
		<div id="station-player-content">
			<div id="album-art" class="active">
				<img src="" class="active" id="station-track-poster">
				<div id="buffer-box">Buffering ...</div>
			</div>
			<div id="station-player-controls">
				<div class="control relative">
					<div id="volume-mute" class="text-xs button" style="background-color:transparent; padding:3px; margin:0">
						<img id="volume-mute-img" class="dark:brightness-200" src="/src/front_assets/svg/player-volume.svg" width="24"/>
						<div id="station-volume-bar" class="absolute lg:block hidden pt-2">
							<input type="range" class="volume w-20" id="station-player-audio" min="0" max="1" step="0.1" value="1" data-css="0.5">
						</div>
					</div>
				</div>

				<div class="control">
					<div class="button" id="station-player-pause-button">
						<img width="24" class="play dark:brightness-200" src="/src/front_assets/svg/player-play.svg">
						<img width="24" class="pause dark:brightness-200" src="/src/front_assets/svg/player-pause.svg">
					</div>
				</div>

			</div>
		</div>
	</div>
</div>


<figure id="videoContainer" class="w-full  shadow-xl absolute top-0 left-0 " style="z-index:99999">
	<video id="footer-video" class="hidden" data-container="videoContainer" crossorigin="anonymous">
		<source src="" type="video/mp4"/>
	</video>

	<div style="bottom: 0; right:10px; z-index: 9999; width:300px ; height: 300px" class="hidden fixed z-10 show-child " ondragstart="isDragging = true" id="videoCanvasContainer"><img id="pause-video-side-popup" src="/src/front_assets/svg/close.svg" class="absolute brighness-200 brightness-200 right-2 top-2 w-4 z-10 cursor-pointer show-on-hover"/>
		<canvas id="videoCanvas" data-container="videoContainer" data-player="footer-video" width="300" height="300" class=""></canvas>
	</div>

	<div id="video-controls" class="flex px-6 gap-4 text-gray-400 absolute bottom-0 left-0 w-full gradient-top-overlay pt-10" data-state="hidden">
		<button class="play-video brightness-200" id="play" data-player="footer-video" type="button" data-state="play"><img src="/src/front_assets/svg/video-play.svg" class="w-4 brightness-200"/></button>
		<button class="pause-video brightness-200" id="pause" data-player="footer-video" type="button" data-state="pause"><img src="/src/front_assets/svg/video-pause.svg" class="w-4 brightness-200"/></button>
		<div id="current-time"></div>
		<div class="progress w-full">
			<progress id="progress" class="bg-gray-800 w-full rounded-2xl overflow-hidden " data-player="footer-video" value="0" min="0" step="1" max="">
				<span id="progress-bar"></span>
			</progress>
		</div>
		<span id="video-duration"></span>
		<div class="volume relative show-child ">
			<button class="brightness-200" id="mute" type="button" data-player="footer-video" style="padding-top: 5px" data-state="mute"><img src="/src/front_assets/svg/video-volume.svg" class="w-4 brightness-200"/></button>
			<input type="range" id="video-volume" min="0" data-player="footer-video" step=".1" max="1" class="show-on-hover absolute bottom-0 h-2 left-1 w-20" style="transform-origin: left; transform: rotate(270deg);"/>
		</div>
		<button id="fs" class="fullscreen " data-player="footer-video" data-container="videoContainer" id="pause" type="button" data-state="go-fullscreen"><img src="/src/front_assets/svg/fullscreen.svg" class="w-4 brightness-200"/></button>
	</div>
</figure>


<div id="page-loader" class="fixed w-full h-full left-0 top-0 hidden " style="z-index:999">
	<div class="w-full h-full absolute dark:bg-gray-800 bg-white opacity-70"></div>
	<img src="/uploads/img/loader.gif" class="w-40 h-40 my-auto m-auto absolute left-0 right-0 bottom-0 top-0"/>
</div>
<input id="activeItemId" type="hidden"/>
<input id="activeItemPicture" type="hidden"/>
<input id="stations-interval" value="{{app.SystemSetting.station_interval}}" type="hidden"/>
<input id="station_media_chunk" value="{{app.SystemSetting.station_media_chunk}}" type="hidden"/>
<audio autoplay id="main_audio"></audio>
<style>
	.channel-slider {
		animation-duration: 20s;
	}
</style>
 <script src="/src/front_assets/js/slide.js"></script>
 <script src="/src/front_assets/js/custom.js"></script>
 <script src="/src/front_assets/js/video-player.js"></script>
 <script src="/src/front_assets/js/main.js"></script>
 <script src="/src/front_assets/js/purchase-handler.js"></script>
 
 <!-- PWA Support -->
 <script src="/pwa.js"></script>
 <script src="/offline-enhancements.js"></script>
 <script>
    // Add PWA install button to navigation if needed
    document.addEventListener('DOMContentLoaded', function() {
        // You can add a manual install button to your UI
        const installButton = document.querySelector('#pwa-install-manual');
        if (installButton) {
            installButton.addEventListener('click', function() {
                PWA.install();
            });
        }
        
        // Add notification permission request button
        const notificationButton = document.querySelector('#pwa-notifications');
        if (notificationButton) {
            notificationButton.addEventListener('click', function() {
                PWA.requestNotificationPermission();
            });
        }
    });

let deferredPrompt;

window.addEventListener("beforeinstallprompt", (e) => {
    // Prevent the mini-infobar from appearing
    e.preventDefault();
    deferredPrompt = e;

    // Show your custom install button
    const installBtn = document.getElementById("installBtn");
    installBtn.style.display = "block";

    installBtn.addEventListener("click", async () => {
        installBtn.style.display = "none";

        if (deferredPrompt) {
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            console.log(`User response to install: ${outcome}`);
            deferredPrompt = null;
        }
    });
});
 </script>