<?php
namespace JetApplication\Installer;

use Jet\MVC_Layout;
use Jet\Tr;
use Jet\UI_icon;
use Jet\UI_messages;

/**
 * @var Installer_Step_Controller[] $steps
 * @var MVC_Layout $this
 */
$steps = $this->getRaw( 'steps' );

$this->requireJavascriptFile( 'https://code.jquery.com/jquery-3.5.1.js' );
$this->requireCssFile( 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css' );
$this->requireCssFile( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css' );

?>
<html>
<head>
	<title><?= Tr::_( 'PHP Jet - Example Project Installer' ); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<jet_layout_meta_tags/>
	<jet_layout_css/>
	<jet_layout_javascripts/>

	<style>

		html, body, .container {
			height: 100%;
		}

		.main-container {
			display: grid;
			grid-template-columns: 1fr 5fr;
			grid-template-rows: 70px calc(100vh - 70px)
		}

		.progress-area {
			background-color: #5c5c5c;
			padding: 10px;
		}
		
		.header {
			background-color: #000000;
			color: #ffffff;
			text-align: left;
			padding-left: 30px;
			padding-top: 10px;
			font-size: 14px;
		}
		
		.step-title {
			background-color: #000000;
			color: #ffffff;
			padding-top: 15px;
			font-size: 30px;
		}
		

		.step {
			padding: 5px;
		}

		.step-prev {

		}

		.step-prev a {
			color: #cccccc;
		}

		.step-current {
			background-color: #0f0f0f;
			color: #c9c9c9;
			padding: 5px;
			font-weight: bolder;
			border-radius: 5px;
		}

		.step-next {
			color: #999999;
		}

		.step-sub {
			padding-left: 10px;
		}

		.main {
			background-color: #ffffff;
			overflow: auto;
			padding: 30px;
		}

	</style>

</head>
<body>


<div class="main-container">
	<div class="header">
		<img src="https://php-jet.net/images/logo-st.svg" style="width: auto;height: 30px"><br>
		<?= Tr::_( 'Example Project Installer' ); ?>
	</div>
	<div class="step-title">
		<?= Installer::getCurrentStepController()->getIcon( UI_icon::SIZE_EXTRA_LARGE ) ?> <?= Installer::getCurrentStepController()->getLabel() ?>
	</div>
	
	<div class="progress-area">
		<div class="steps">
			<?php foreach( $steps as $step ):
				$class = '';
				if( $step->getIsSubStep() ) {
					$class = ' step-sub';
				}
				?>
				<?php if( $step->getIsPast() ): ?>
				<div class="step step-prev<?= $class; ?>">
					<?php if( $step->getIsAvailable() ): ?>
						<a href="<?= $step->getURL(); ?>"><?=$step->getIcon()?> <?= $step->getLabel(); ?></a>
					<?php else: ?>
						<?=$step->getIcon()?> <?= $step->getLabel(); ?>
					<?php endif; ?>
				</div>
			<?php endif; ?>
				<?php if( $step->getIsCurrent() ): ?>
				<div class="step step-current<?= $class; ?>"><?=$step->getIcon()?> <?= $step->getLabel(); ?></div>
			<?php endif; ?>
				<?php if( $step->getIsFuture() ): ?>
				<div class="step step-next<?= $class; ?>"><?=$step->getIcon()?> <?= $step->getLabel(); ?></div>
			<?php endif; ?>
			<?php endforeach; ?>
			
		</div>
	</div>
	<div class="main">
		<div id="system-messages-area">
			<?php
			foreach( UI_messages::get() as $msg ):
				echo $msg;
			endforeach;
			?>
		</div>
		
		<jet_layout_main_position/>
		
	</div>
</div>

</body>
</html>