<?php
/**
 * @package Case-Themes
 */
$subtitle_404 = hubsteel()->get_theme_opt('subtitle_404');
$title_404 = hubsteel()->get_theme_opt('title_404');
$des_404 = hubsteel()->get_theme_opt('des_404');
$text_404 = hubsteel()->get_theme_opt('text_404');
$button_404 = hubsteel()->get_theme_opt('button_404');
$image_404 = hubsteel()->get_opt( 'image_404', ['url' => get_template_directory_uri().'/assets/img/error-img1.jpg', 'id' => '' ] );
$image_construction = hubsteel()->get_opt( 'image_construction', ['url' => get_template_directory_uri().'/assets/img/img-construction.png', 'id' => '' ] );

get_header(); ?>
<div class="pxl-404-error">
    <div id="pxl-content-area" class="pxl-content-area">
        <main id="pxl-content-main">
            <div class="pxl-error-img" style="background-image:url(<?php echo esc_url($image_404['url']); ?>);"></div>
            <div class="pxl-error-inner">
                <div class="pxl-inner-section">
                    <div class="pxl-error-content">
                        <div class="pxl-inner-title">
                            <div class="pxl-item-title1">
                                <?php if (!empty($title_404)) {
                                    echo pxl_print_html($title_404);
                                } else{
                                    echo esc_html__('Oopsie!!', 'hubsteel'); 
                                } ?>
                            </div>
                            <div class="pxl-item-title2">
                                <?php if (!empty($subtitle_404)) {
                                    echo pxl_print_html($subtitle_404);
                                } else{
                                    echo esc_html__('404 Error', 'hubsteel'); 
                                } ?>
                            </div>
                        </div>
                        <div class="pxl-error-construction wow fadeInRight">
                            <img src="<?php echo esc_url($image_construction['url']); ?>" alt="Construction Image">
                        </div>
                    </div>
                    <div class="pxl-404-bottom">
                        <div class="pxl-inner-link">
                            <div class="pxl-item-text">
                                <?php if (!empty($text_404)) {
                                    echo pxl_print_html($text_404);
                                } else{
                                    echo esc_html__('That Page Doesnt Exist.', 'hubsteel'); 
                                } ?>
                            </div>
                            <div class="pxl-item-desc">
                                <?php if (!empty($des_404)) {
                                    echo pxl_print_html($des_404);
                                } else{
                                    echo esc_html__('The page you are looking for doesnt exist. It may have been moved or removed altogether.
                                    Please try searching for some other page, or return to the websites homepage
                                    to find what youre looking for.', 'hubsteel'); 
                                } ?>
                            </div>
                            <a class="btn-sm" href="<?php echo esc_url(home_url('/')); ?>">
                                <span class="pxl--btn-text">
                                    <?php if (!empty($button_404)) {
                                        echo pxl_print_html($button_404);
                                    } else{
                                       echo esc_html__('back to homepage', 'hubsteel'); 
                                    } ?>
                                </span>
                                <span class="pxl-btn-icon pxl-ml-61">
                                    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                        <title>right-up</title>
                                        <path class="s0" d="m16 9.4l-8.6 8.6-1.4-1.4 8.6-8.6h-7.6v-2h11v11h-2z"/>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<?php get_footer();