Duffer Derek

<?php
get_header();


$message = get_field('404_message', 'option');
$banner_image = get_field('404_banner_image', 'option');

// styles
$banner_bg_color = get_field('404_banner_bg_color', 'option');
$message_title_color = get_field('404_message_title_color', 'option');

$quick_links_section_title = get_field('404_quick_links_section_title', 'option');
$quick_links = get_field('404_quick_links', 'option');

?>
<!-- <section class="error__wrapper">
    <div class="container-row">
        <div class="error__wrap--inner">
            <div class="sub-head"> <span>Error</span>
            </div>
            <h1>404</h1>
            <p class="sub-title">Sorry! Page Not Found</p>
            <p>The page you are looking for might have been removed, had its name changed
                or is temporarily unavailable</p>
            <div class="btn btn-primary"> <a href="<?php // echo site_url(); ?>" aria-label="">
                    <span class="btn-text">GO TO HOME</span>
                    <span class="btn-arrow"><svg viewBox="0 -6.5 38 38" version="1.1">
                            <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g transform="translate(-1511.000000, -158.000000)" fill="#1C1C1F" fill-rule="nonzero">
                                    <g transform="translate(1350.000000, 120.000000)">
                                        <path
                                            d="M187.812138,38.5802109 L198.325224,49.0042713 L198.41312,49.0858421 C198.764883,49.4346574 198.96954,49.8946897 199,50.4382227 L198.998248,50.6209428 C198.97273,51.0514917 198.80819,51.4628128 198.48394,51.8313977 L198.36126,51.9580208 L187.812138,62.4197891 C187.031988,63.1934036 185.770571,63.1934036 184.990421,62.4197891 C184.205605,61.6415481 184.205605,60.3762573 184.990358,59.5980789 L192.274264,52.3739093 L162.99947,52.3746291 C161.897068,52.3746291 161,51.4850764 161,50.3835318 C161,49.2819872 161.897068,48.3924345 162.999445,48.3924345 L192.039203,48.3917152 L184.990421,41.4019837 C184.205605,40.6237427 184.205605,39.3584519 184.990421,38.5802109 C185.770571,37.8065964 187.031988,37.8065964 187.812138,38.5802109 Z"
                                            id="right-arrow">
                                        </path>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>
    </div>
</section> -->


<section class="inner__banner--wrapper bg-<?php echo $banner_bg_color . ' ' . $message_title_color; ?>"
    style="background-image: url('<?php echo $banner_image['url'] ?>');">
    <div class="container-row">
        <?php
        if ($message) { ?>
            <h1>
                <?php echo $message; ?>
            </h1>
        <?php } ?>
    </div>
</section>


<section class="error__wrapper">
    <div class="container-row">
        <div class="common-heading text-center">
            <?php
            if (!empty($quick_links_section_title)) {
                ?>
                <h3>
                    <?php echo $quick_links_section_title; ?>
                </h3>
                <?php
            }
            ?>
        </div>

        <?php
        if (function_exists('have_rows')) {
            if (have_rows('404_quick_links', 'option')):
                ?>

                <div class="flexible-row flexible-three-col">

                    <?php
                    while (have_rows('404_quick_links', 'option')):
                        the_row();
                        $quick_link_title = get_sub_field('title');
                        $quick_link_image = get_sub_field('image');
                        $quick_link_short_description = get_sub_field('short_description');
                        ?>


                        <div class="error-card">



                            <?php
                            if (!empty($quick_link_title)) {
                                ?>
                                <div class="error-sub-head">
                                    <h6>
                                        <?php echo $quick_link_title; ?>
                                    </h6>
                                </div>
                                <?php
                            }


                            if (!empty($quick_link_image)) {

                                $quick_link_image_id = $quick_link_image['id'];
                                //$quick_link_image_src = wp_get_attachment_image_url( $quick_link_image_id, 'full' );
                                $quick_link_image_src = $quick_link_image['url'];
                                $quick_link_image_alt = !empty($quick_link_image['alt']) ? $quick_link_image['alt'] : (!empty($quick_link_title) ? $quick_link_title : 'Quick link image');
                                ?>

                                <div class="image">
                                    <picture>
                                        <img src="<?php echo $quick_link_image_src; ?>" alt="<?php echo $quick_link_image_alt; ?>"
                                            width="350" height="265">
                                    </picture>
                                </div>

                                <?php
                            }
                            if (!empty($quick_link_short_description)) {
                                ?>

                                <div class="content">
                                    <?php echo $quick_link_short_description; ?>
                                </div>
                                <?php
                            }
                            ?>


                        </div>


                        <?php
                    endwhile;
                    ?>
                </div>


                <?php
            endif;
        }
        ?>
    </div>



</section>

<section class="search-form__wrapper">
    <div class="container-row">
        <div class="common-heading text-center">
            <h3>What information were you looking for?</h3>
        </div>

        <div class="search-form active">

            <div class="container-row">
                <form action="<?php echo site_url(); ?>" method="get"
                    onsubmit="return invalid_text_check(event,'search_input','en');">
                    <input type="text" name="s" value="<?php the_search_query(); ?>" id="search" class="form-control"
                        placeholder="Type here...">
                    <div class="search-close">
                        <button type="submit"> <svg viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                                    stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                </path>

                            </svg>
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</section>


<?php
get_footer();
?>