<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @package WordPress
 * @subpackage Tourio
 * @since Tourio 1.0
 */
/*
*Template Name: 404 Page
*/
get_header();

$top_url = tourio_get_config('404_top_img');
$bg_img = tourio_get_config('404_bg_img');

$style = '';
if ( !empty($bg_img) ) {
	$style = 'style="background-image: url('.$bg_img.');"';
}

?>
<section class="page-404 justify-content-center flex-middle" <?php echo trim($style); ?>>
	<div id="main-container" class="inner">
		<div id="main-content" class="main-page">
			<section class="error-404 not-found clearfix">
				<div class="container">
					<div class="row d-md-flex align-items-center">
						<div class="left-image col-12 col-md-6">
							<?php if( !empty($bg_img) ) { ?>
								<img src="<?php echo esc_url( $bg_img); ?>" alt="<?php bloginfo( 'name' ); ?>">
							<?php }else{ ?>
								<img src="<?php echo esc_url( get_template_directory_uri().'/images/404.png'); ?>" alt="<?php bloginfo( 'name' ); ?>">
							<?php } ?>
						</div>

						<div class="col-12 col-md-6">
							<div class="content-inner">
								<div class="top-image">
									<?php if( !empty($top_url) ) { ?>
										<img src="<?php echo esc_url( $top_url); ?>" alt="<?php bloginfo( 'name' ); ?>">
									<?php }else{ ?>
										<img src="<?php echo esc_url( get_template_directory_uri().'/images/404-title.png'); ?>" alt="<?php bloginfo( 'name' ); ?>">
									<?php } ?>
								</div>
								<h3 class="title-404">
									<?php
									$title = tourio_get_config('404_title');
									if ( !empty($title) ) {
										echo esc_html($title);
									} else {
										esc_html_e('Oops! It looks like you\'re lost.', 'tourio');
									}
									?>
								</h3>
								<div class="description">
									<?php
									$description = tourio_get_config('404_description');
									if ( !empty($description) ) {
										echo esc_html($description);
									} else {
										esc_html_e(' The page you \'re looking for isn\'t available. Try to search again or use the go to.', 'tourio');
									}
									?>
								</div>
								<div class="page-content">
									<div class="return">
										<a class="btn-theme btn" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e('Go Back To Homepage','tourio') ?> <svg xmlns="http://www.w3.org/2000/svg" class="next" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.5554 0H5.77762C5.53195 0 5.33316 0.198792 5.33316 0.444458C5.33316 0.690125 5.53195 0.888917 5.77762 0.888917H14.4825L0.130036 15.2413C-0.0435893 15.415 -0.0435893 15.6962 0.130036 15.8698C0.216827 15.9566 0.330577 16 0.444286 16C0.557994 16 0.671702 15.9566 0.758536 15.8698L15.111 1.51737V10.2222C15.111 10.4679 15.3097 10.6667 15.5554 10.6667C15.8011 10.6667 15.9999 10.4679 15.9999 10.2222V0.444458C15.9998 0.198792 15.801 0 15.5554 0Z" fill="currentColor"></path></svg></a>
									</div>
								</div><!-- .page-content -->
							</div>
						</div>
					</div>
				</div>
			</section><!-- .error-404 -->
		</div><!-- .content-area -->
	</div>
</section>
<?php get_footer(); ?>