<?php

wp_head();  
global $echooling_option; ?>
<div class="page-error">
    <div class="container">
        <div id="content">
            <div id="primary" class="content-area">
                <main id="main" class="site-main">    
                    <section class="error-404 not-found">    
                        <div class="page-content">
                            <?php if(!empty($echooling_option['404_bg']['url'])){ ?> 
                            <img class="error-image"  src="<?php echo esc_url( $echooling_option['404_bg']['url']); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                            <?php } ?>
                            <h2>
                                <span>                                    
                                    <?php
                                        if(!empty($echooling_option['title_404'])){
                                            echo esc_html($echooling_option['title_404']);
                                        }
                                        else{
                                            echo esc_html__( '404', 'echooling' ); 
                                        }
                                    ?>
                                </span>                      
                                <?php
                                 if(!empty($echooling_option['text_404'])){
                                      echo esc_html($echooling_option['text_404']);
                                 }
                                 else{
                                  echo esc_html__( 'oops! page not found', 'echooling' ); }
                                 ?>
                            </h2>
                            <a class="reacbutton" href="<?php echo esc_url( home_url('/') ); ?>"> 
                                <?php
                                 if(!empty($echooling_option['back_home'])){
                                     echo esc_html($echooling_option['back_home']);
                                 }
                                 else{
                                     esc_html_e('Or back to homepage', 'echooling'); 
                                  }
                                ?>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                        </div><!-- .page-content -->
                    </section><!-- .error-404 -->    
                </main><!-- #main -->
            </div><!-- #primary -->
        </div>
    </div>   
</div> <!-- .page-error -->
<?php
wp_footer();