<?php

	use Tech360\Utils as Utils;

?>

<div class="header-image position-relative" style="<?php Utils::_header_style( get_the_ID() ) ?>">
	<div class="container position-relative z-index-1">
		<div class="row">
			<div class="col-md-6">
				<h1 class="text-light"><?php the_title() ?></h1>
			</div>
		</div>
	</div>
<?php
if( get_field( 'header_overlay_opacity' ) ) {
	$overlay_style = [ 'background-color: #000' ];
	$overlay_style[] = sprintf( 'opacity: %s', ( intval( get_field( 'header_overlay_opacity' ) ) / 100 ) );
?>
	<span class="bg-overlay" style="<?php echo implode( '; ', $overlay_style ) ?>"></span>
<?php
}
?>
</div>

<div id="page-main-content" class="container py-5">
	<div class="row">
		<?php
		if( has_post_thumbnail() ) {
		?>
		<div class="col-md-7">
			<?php the_content() ?>
		</div>
		<div class="col-md-5 mt-4 mt-md-0">
			<?php the_post_thumbnail( 'post-thumbnail', [ 'class' => 'img-fluid img-border' ] ) ?>
		</div>
		<?php
		} else {
		?>
		<div class="col">
			<?php the_content() ?>
		</div>
		<?php
		}
		?>
	</div>
	<div class="row mt-5">
		<div class="col-md-8 offset-md-2 text-center">
			<h2><?php esc_html_e( 'Explore our services', 'tech360' ) ?></h2>
		</div>
	</div>
	<div class="row">
		<?php
		foreach( Utils::get_all( 'service' ) as $service ) {
		?>
		<div class="col-md-6 col-lg-4 auto-mt auto-mt-4">
			<div class="img-border h-100">
				<?php
				if( has_post_thumbnail( $service->ID ) ) {
				?>
				<div class="post-thumbnail embed-responsive embed-responsive-16by9">
					<a href="<?php echo get_the_permalink( $service->ID ) ?>" title="<?php echo get_the_title( $service->ID ) ?>">
						<?php echo get_the_post_thumbnail( $service->ID, 'post-thumbnail', [ 'class' => 'img-cover' ] ) ?>
					</a>
				</div>
				<?php
				}
				?>
				<div class="post-excerpt px-3 pb-3 mt-3">
					<a href="<?php echo get_the_permalink( $service->ID ) ?>" title="<?php echo get_the_title( $service->ID ) ?>">
						<h4>
							<?php echo get_the_title( $service->ID ) ?>
						</h4>
					</a>
					<?php tech360_excerpt( $service->ID ) ?>
					<p>
						<a class="btn btn-primary" href="<?php echo get_the_permalink( $service->ID ) ?>" title="<?php echo get_the_title( $service->ID ) ?>"><?php esc_html_e( 'Learn more', 'tech360' ) ?></a>
					</p>
				</div>
			</div>
		</div>
		<?php
		}
		?>
	</div>
</div>
