<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
	<head>
		<meta charset='utf-8' />
		<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
		<meta http-equiv='X-UA-Compatible' content='IE=edge' />
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
		<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php' />
		<link rel='icon' href='{$favicon}' />
		<script language='JavaScript' type='text/javascript' src='{$project_path}/resources/jquery/jquery.min.js.php'></script>
		<script language='JavaScript' type='text/javascript'>

			//message bar display
			{literal}
			function display_message(msg, mood, delay) {
				mood = mood !== undefined ? mood : 'default';
				delay = delay !== undefined ? delay : {/literal}{$message_delay}{literal};
				if (msg !== '') {
					var message_text = $(document.createElement('div'));
					message_text.addClass('message_text message_mood_'+mood);
					message_text.html(msg);
					message_text.on('click', function() {
						var object = $(this);
						object.clearQueue().finish();
						$('#message_container div').remove();
						$('#message_container').css({opacity: 0, 'height': 0}).css({'height': 'auto'});
					} );
					$('#message_container').append(message_text);
					message_text.css({'height': 'auto'}).animate({opacity: 1}, 250, function(){
						$('#message_container').delay(delay).animate({opacity: 0, 'height': 0}, 500, function() {
							$('#message_container div').remove();
							$('#message_container').animate({opacity: 1}, 300).css({'height': 'auto'});
						});
					});
				}
			}
			{/literal}

			{literal}
			$(document).ready(function() {
				{/literal}

				{$messages}

				//message bar hide on hover
					{literal}
					$('#message_container').on('mouseenter',function() {
						$('#message_container div').remove();
						$('#message_container').css({opacity: 0, 'height': 0}).css({'height': 'auto'});
					});
					{/literal}

			{literal}
			}); //document ready end
			{/literal}

		</script>
		<title>{$login_title}</title>
	</head>
	<body>
		{if !empty($background_video)}
		<video id="background-video" autoplay muted poster="" disablePictureInPicture="true" onloadstart="this.playbackRate = 1;">
			<source src="{$background_video}" type="video/mp4">
		</video>
		{/if}
		<div id='background-image'></div>
		<div id='background-color'></div>
		<div id='page' align='center'>
			<div id='message_container'></div>
			<div id='default_login'>
				<a href='{$project_path}/'><img id='login_logo' style='width: {$login_logo_width}; height: {$login_logo_height};' src='{$login_logo_source}' /></a><br />
				<form method='post' name='frm' action=''>
					<div class='login_text'>
						{if !empty($username)}
							{$login_password_description}
							<br /><br />
							<input type='hidden' name='username' id='username' value="{$username}" />
						{else}
							<input type='text' class='txt login' style='text-align: center; min-width: 200px; width: 200px; margin-bottom: 8px;' name='username' id='username' placeholder="{$label_username}" /><br />
						{/if}
						<input type='password' class='txt login' style='text-align: center; min-width: 200px; width: 200px; margin-bottom: 8px;' name='password' placeholder="{$label_password}" /><br />
						{if !empty($login_domain_name_visible) && $login_domain_name_visible}
							{if empty($login_domain_names)}
								<input type='text' class='txt login' style='text-align: center; min-width: 200px; width: 200px; margin-bottom: 8px;' name='domain_name' id='domain_name' placeholder="{$label_domain}" /><br />
							{else}
								<select class='txt login' style='text-align: center; min-width: 200px; width: 200px; margin-bottom: 8px;' name="domain_name" id="domain_name">
									{foreach from=$login_domain_names item=option}
									<option value="{$option}">{$option}</option>
									{/foreach}
								</select>
							{/if}
						{/if}
					</div>
					<div>
						<input type='submit' id='btn_login' class='btn' style='width: 100px; margin-top: 15px;' value='{$button_login}' /><br />
						{if !empty($login_password_reset_enabled) && $login_password_reset_enabled}
							<a class='login_link' style='display: inline-block; margin-top: 15px;' href='{$project_path}/resources/login.php?action=request'>{$button_forgot_password}</a><br />
						{/if}
						{if !empty($username)}
							<a class='login_link' style='display: inline-block; margin-top: 15px;' href='{$project_path}/logout.php'>{$button_cancel}</a>
						{/if}
						{if isset($banners)}
							<div style="display: flex; align-items: center; gap: 10px;">
								<hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
									<span style="font-size: 0.8em; color: #666;">or</span>
								<hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
							</div>
							{foreach $banners as $banner}
								<a class='{$banner.class}' style='display: inline-block; margin-top: 15px;' href='{$project_path}{$banner.url}'>
									{$banner.image}
								</a><br />
							{/foreach}
						{/if}
					</div>
				</form>
			</div>
		</div>
		<script>document.getElementsByName('username')[0].focus();</script>
	</body>
</html>
