<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package Ocean_Theme
 */

get_header();

?>
<div class="reveal-wrapper">
<main class="reveal-content">
<section class='block-404' style='background: url("<?php echo get_field('block_404_bg', 'options') ?>") no-repeat center/cover;'>
	<div class='block-404__cover'></div>
	<div class='container'>
		<div class='block-404__content'>
			<div class='block-404__button' id='backButton'>
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M6.69497 12.0396L2.65137 7.99995L6.70608 3.94922L7.5568 4.79475L4.96053 7.39367H13.3596V8.60067H4.96053L7.54568 11.1858L6.69497 12.0396Z" fill="white"/>
				</svg>
			</div>
			<?php if(have_rows('social_media_list', 'option')) : ?>
		<div class='sticky-social-mob'>
			<?php while(have_rows('social_media_list', 'option')) : the_row(); ?>
			<a href='<?php echo get_sub_field('link') ?>' class='sticky-social__item'><img src='<?php echo get_sub_field('image') ?>'></a>
			<?php endwhile; ?>
		</div>
	<?php endif; ?>
			<div class='block-404__body'>
				<div class='block-404__main-title'>
					404
				</div>
				<div class='block-404__footer'>
					<div class='block-404__footer-top'>
						<div class='block-404__mini-title mini-title visible' style='transform: translatey(-50px);'>
							<div class='circle'></div>
								<h2><?php echo get_field('block_404_mini_title', 'options') ?></h2>
							</div>
						<div class='block-404__title'><?php echo get_field('block_404_title', 'options') ?></div>
					</div>
					<div class='block-404__footer-bottom'>
						<a class='block-404__footer-button' href='/'>
							<p>На головну</p>
							<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M13.4128 8.78394L13.4648 8.83557C13.9676 9.36215 13.975 10.1916 13.4817 10.7271L13.4308 10.7794L10.4601 13.6853L9.67346 12.8811L12.2838 10.3275H3.35779C2.14004 10.3274 1.15288 9.34031 1.15283 8.12256V4.51941C1.15292 3.30169 2.14006 2.31454 3.35779 2.31445H5.78247V3.43945H3.35779C2.76139 3.43954 2.27792 3.92301 2.27783 4.51941V8.12256C2.27788 8.719 2.76136 9.20242 3.35779 9.20251H12.2172L9.68042 6.80859L10.4528 5.99048L13.4128 8.78394Z" fill="#F0F2F5"/>
							</svg>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
  document.getElementById('backButton').addEventListener('click', function() {
    history.back();
  });
</script>
</main>
<?php get_footer(); ?>