HTML

{{relate:page_header}}
<header class="page-header w-100 mt-5 mt-md-6 pt-6 pt-md-8 pb-2 relative"
        style="background:url('{{ if header_bg }}{{ glide:header_bg width="1800" height="600" fit="crop_focal" }} {{ else }}{{ default_header_loc }}{{ glide:default_header_loc width="1800" height="600"   fit="crop_focal" }} {{ /if }}') no-repeat top center;">
<div class="container relative w-80 w-md-60 z-1  ">

    <h1 class="cg-1 ta-center relative-center-middle caps tw-book display t-3 t-md-4 t-sm-4 t-md-5 z-2 ">
        {{title}}
    </h1>
    {{ if header_content }}
    <h2 class="relative ta-center cg-2 h-0 z-2 tw-medium">
        {{header_content | widont}}
    </h2>
    {{ endif }}


</div>
<div class="overlay-80 white absolute-top h-100 w-100 "></div>

{{/relate:page_header}}

</header>
<div class="row collection">
    <locations v-ref:locations :locations locations.sync="locations"></locations>
    <template name="locations" id="locations">
        <div>
            <section class="row cbgg-4 shadow relative w-100 z-2">
                    <div class="col-12 col-md-9  py-1 px-2">
                        <label for="locator_text">
                            <a href="" id="submit-loc" class="d-inline-block"><span class="icon icon-sm cbgg-4 d-inline"><i class="vert-align-loc icon-search icon-search-dims d-block mx-auto"></i></span></span>
                            </a>

                        <input v-model="zip" debounce="1000" type="text" id="locator_text" name="locator_text"
                               class="w-80 d-inline-block cbgg-4 p-1 t-2 cg-white b-none search "
                               placeholder="Enter your address or zip" required>
                    </label>
                </div>
                <div class="col-12 col-md-3 py-1 px-2">
                    <label for="locator_radius" class="cg-white ">Select Radius</label>
                    <select id="locator_radius" name="locator_radius" v-model="distance" debounce="500" maxlength="3" class="p-1 cg-white t-1">
                        <option value='10'>10 mi</option>
                        <option value='25'>25 mi</option>
                        <option value='50'>50 mi</option>
                        <option value='100'>100 mi</option>
                    </select>
                </div>
                <!-- <button type="submit">Search</button> -->
            </section>

            <section class="location-map row cbgg-1 relative col-md-12">
                <div class="location-results col-md-4 cbgg-1 z-1 t-0">
                    <div id="results" class="pt-4 px-6 pb-4">
                        <ul class="row list-group no-bullet">
                            <li class="list-group-item location-item pb-2"
                                v-for="location in distanceList | orderBy 'distance' | limitBy 55 | paginate " v-bind:locations.sync="location.myLocation">
                                <h5 class="caps cg-white">@{{ location.title }}</h5>
                                <span class="directions text-std caps cg-white"
                                      data-addy="@{{ location.address_info[0].address }} @{{ location.address_info[0].city }}, @{{ location.address_info[0].state_province }} @{{ location.address_info[0].zip }}"><a
                                        href="https://www.google.com/maps/dir/@{{currentLocation.latitude}},@{{currentLocation.longitude}}/@{{ location.address_info[0].address }} @{{ location.address_info[0].city }}, @{{ location.address_info[0].state_province }} @{{ location.address_info[0].zip }}+'"
                                        class="distance italic cg-green"> @{{ location.distance.toFixed(1) }} miles get directions ></a></span><br/>
                                <span class="address caps cg-white pb-0"><span class="addy">@{{ location.address_info[0].address }}</span><br/>
                                    @{{ location.address_info[0].city }}, @{{ location.address_info[0].state_province }} &nbsp;@{{ location.address_info[0].zip }}</span><br />

                                <a class="phone caps cg-white" href="tel:@{{ location.address_info[0].phone }}" v-if="location.address_info[0].phone">{{
                                    location.address_info[0].phone }}</a><br />
                                    <a class="phone caps cg-white cbgg-green t-sm btn" href="/{{segment_1}}/@{{ location.slug }}">Read More</a><br/>

                            </li>
                        </ul>
                    </div>
                </div>
                <div class="d-none d-md-block col-md-8 right">
                    <div id="map"></div>
                </div>
            </section>
        </div>
    </template>
</div>
<section class="row relative z-2">

    <div class="d-none d-md-block col-12 cbgg-black ta-center cg-white t-1 p-1 caps col-12 w-100 z-1">States We Serve
    </div>
    <script type="text/javascript">
        function changeState(state){
            vw.$refs.locations.changeState(state);
        }
    </script>

    <div class="d-none d-md-block p-2 cbgg-white col-12 ta-center t-1 caps w-100 z-1">
        <ul>

            <li onclick="changeState('AZ');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Arizona</span></a>
            </li>
            <li  onclick="changeState('CA');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">California</span></a>
            </li>
            <li  onclick="changeState('CO');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Colorado</span></a>
            </li>
            <li  onclick="changeState('DE');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Delaware</span></a>
            </li>
            <li  onclick="changeState('FL');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Florida</span></a>
            </li>
            <li  onclick="changeState('GA');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Georgia</span></a>
            </li>
            <li  onclick="changeState('MD');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Maryland</span></a>
            </li>
            <li  onclick="changeState('NV');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Nevada</span></a>
            </li>
            <li onclick="changeState('NJ');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">New Jersey</span></a>
            </li>
            <li  onclick="changeState('NM');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">New Mexico</span></a>
            </li>
            <li  onclick="changeState('NC');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">North Carolina</span></a>
            </li>
            <li  onclick="changeState('OK');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Oklahoma</span></a>
            </li>
            <li  onclick="changeState('PA');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Pennsylvania</span></a>
            </li>
            <li onclick="changeState('SC');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">South Carolina</span></a>
            </li>
            <li  onclick="changeState('TX');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Texas</span></a>
            </li>
            <li  onclick="changeState('VA');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Virginia</span></a>
            </li>
            <li  onclick="changeState('WV');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">West Virginia</span></a>
            </li>
            <li  onclick="changeState('DC');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white ">Washington D.C.</span></a>
            </li>
            <li  onclick="changeState('WV');" class="d-inline-block ">
                <a class="p-1 loc-btn-main cbgg-black " ><span class="cg-white pointer">West Virginia</span></a>
            </li>
        </ul>

    </div>
</section>
<section class="row relative z-2">
  <div class="  w-100 cbgg-white">

        <div class="container w-80">
            <div class="pt-2 cbgg-white cg-blue col-12 ta-center t-1 tw-medium caps z-1">

                <span>OVER 400 LOCATIONS NATIONWIDE</span>

            </div>

            <div class="p-2 cbgg-white cg-blue col-12 ta-center lh-1 t-0 tw-medium z-1">

                <div class="">
                    <p class="
    ">Caliber Collision is here to restore you to the rhythm of your life®. We have locations all throughout the United
                        States, and one of our collision repair centers will be able to assist you with any repair
                        services your vehicle requires.</p>
                    <!-- <a href="#"><div class="italic">read more></div></a> -->
                </div>


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

</section>