{{#*inline "photoCDN"~}}
    https://orion.soarr.com/photos/{{unit.id}}/{{width}}x/{{unit.year}}-{{replace (lowercase unit.make) ' ' '_'}}-{{replace (lowercase unit.model) ' ' '_'}}.{{index}}.jpg
{{~/inline}}


{{#*inline "photo"~}}
    {{thumbnail unit width=width}}
{{~/inline}}

  {{#*inline "paging"}}
    {{#if (gt statistics.pageCount 1)}}
    <div class="flex gap-4">
        <a href="{{previousPageUrl .}}" class="button button--transparent text-primary button--small prev {{#if (eq query.page 1)}}disabled{{/if}}">❮</a>

        <div class="hidden lg:flex gap-2">
            {{#for 1 (increment statistics.pageCount 6) 1}}
            {{#if (eq this ../query.page)}}
            <span class="button button--small bg-white border-1 border-gray-400 text-gray-800 num">{{../query.page}}</span>
            {{else}}
            <a class="button button--small button--primary num" href="{{pageUrl .. this}}">{{this}}</a>
            {{/if}}

            {{/for}}
        </div>

        <a href="{{nextPageUrl .}}" class="button button--transparent button--small text-primary next {{#if (eq query.page statistics.pageCount)}}disabled{{/if}}">❯</a>
    </div>
    {{/if}}
{{/inline}}

{{#*inline "noresults"}}
    
{{/inline}}


{{#*inline "search"}}

    {{#searchForm id="minisearch" includeCount="false" class="invsearch"}}
        <div class="invsearch__field">
            <label class="invsearch__field__name">Truck Type</label>
            <select name="vehtype" data-field="vehtype" data-placeholder="Type"></select>
        </div>
        <div class="invsearch__field">
            <label class="invsearch__field__name">Year</label>
            <select name="year" data-field="year" data-placeholder="Year" data-sel-placeholder="Any Year"></select>
        </div>
        <div class="invsearch__field">
            <label class="invsearch__field__name">Make</label>
            <select name="make" data-field="make" data-placeholder="Make" data-sel-placeholder="All Makes"></select>
        </div>

        <div class="invsearch__field">
            <label class="invsearch__field__name">Model</label>
            <select name="model" data-field="model" data-placeholder="Model" data-sel-placeholder="All Models"></select>
        </div>

        <div class="invsearch__field">
            <label class="invsearch__field__name">Stock#</label>
            <input type="text" placeholder="Stock#" name="internalnum">
        </div>

        <div class="invsearch__field">
            <label>&nbsp;</label>
            {{#resetSearchLink class="clearfilter"}}Show All{{/resetSearchLink}}
        </div>
    {{/searchForm}}
{{/inline}}

{{#*inline "facetList"}}
    <div class="hidden lg:flex flex-col bg-white shadow-lg p-4 mr-8">
        {{#searchForm autoSubmit="false" class="stocknum-search mb-2"}}
            <span>Stock# Search</span>
            <div class="flex flex-nowrap">
                <input type="text" class="rounded-r-0 border-r-0 focus:ring-0 focus:border-secondary" placeholder="Stock#" name="internalnum">
                {{#if (param 'internalnum' '')}}
                    {{#resetSearchLink class="flex items-center bg-secondary p-2 rounded-r-md"}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 stroke-white fill-white" width="20.953" height="20.953" viewBox="0 0 20.953 20.953">
                          <path d="M28.477,9.619l-2.1-2.1L18,15.9,9.619,7.523l-2.1,2.1L15.9,18,7.523,26.381l2.1,2.1L18,20.1l8.381,8.381,2.1-2.1L20.1,18Z" transform="translate(-7.523 -7.523)"/>
                        </svg>
                    {{/resetSearchLink}}
                {{else}}
                    <button type="submit" aria-label="Search" title="Search" class="bg-secondary p-2 rounded-r-md">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 stroke-none fill-white" width="35.997" height="36.004" viewBox="0 0 35.997 36.004">
                            <path d="M35.508,31.127l-7.01-7.01a1.686,1.686,0,0,0-1.2-.492H26.156a14.618,14.618,0,1,0-2.531,2.531V27.3a1.686,1.686,0,0,0,.492,1.2l7.01,7.01a1.681,1.681,0,0,0,2.384,0l1.99-1.99a1.7,1.7,0,0,0,.007-2.391Zm-20.883-7.5a9,9,0,1,1,9-9A8.995,8.995,0,0,1,14.625,23.625Z"/>
                        </svg>
                    </button>
                {{/if}}
            </div>
        {{/searchForm}}

        {{#facets "segment,designation,vehtype,yearrange,make,model,enginemake,hp,transmodel"}}
            {{#with selected}}
                <div class="facets__group--open mb-4">
                    <div class="font-medium mb-1"><i class="arrow"></i> Selected</div>
                    <ul class="space-y-2">
                        {{#each .}}
                        <li class="bg-blue-700 text-white rounded-sm">
                            <a class="text-white flex gap-2 px-2 py-1 items-center" href="{{removeParams name}}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" class="stroke-blue-100 fill-blue-100 w-2 h-2">
                                  <path id="Icon_material-close" data-name="Icon material-close" d="M28.5,9.615,26.385,7.5,18,15.885,9.615,7.5,7.5,9.615,15.885,18,7.5,26.385,9.615,28.5,18,20.115,26.385,28.5,28.5,26.385,20.115,18Z" transform="translate(-7.5 -7.5)"/>
                                </svg>
                                <span class="flex-grow-1 flex justify-between">
                                    <span class="name">{{title}}</span>
                                    <span class="value">{{value}}</span>
                                </span>
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            {{/with}}

            {{#each facets}}
                <div class="{{#if (eq name 'segment')}}facets__group--open{{/if}} border-b border-gray-200 " data-facet-group>
                    <div class="flex justify-between py-3 cursor-pointer hover:bg-gray-50" data-facet-title><span class="uppercase font-semibold">{{title}}</span><img class="h-6 transition-transform" data-arrow alt="Down arrow" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23c0231c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.0' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"></div>
                    <ul class="hidden" data-facet-items>
                        {{#each items}}
                        <li><a class="text-inherit flex justify-between p-1 hover:bg-gray-50" href="{{href}}">{{#if text}}{{text}}{{else}}[Not Specified]{{/if}} <em class="text-gray-400">({{count}})</em></a></li>
                        {{/each}}
                    </ul>
                </div>
                
            {{/each}}

        {{/facets}}
    </div>
{{/inline}}


{{#*inline "listings"}}

    {{#each units}}
        <div class="flex flex-col md:block w-full bg-white rounded-md duration-300 overflow-hidden border border-gray-100" data-id="{{id}}">
            <div class="overflow-hidden flex flex-col grow lg:flex-row">
                <div class="w-full lg:w-[325px] xl:w-[375px] lg:shrink-0">
                    <div class="thumbcont relative flex justify-center group">
                        <a href="{{specsheet .}}" class="spec-link w-full overflow-hidden relative">
                            <span data-scroller="" class="slidecont flex items-center w-full h-full overflow-y-hidden snap-x snap-mandatory translate-x-0 no-scrollbar">
                                {{#for 1 (increment (smallest 4 (length photos))) 1}}
                                <img {{#if (or (gt @../index 0) (gt @index 1))}} loading="lazy" {{/if}} {{#if (and (eq @../index 0) (eq @index 1))}} fetchpriority="high" {{/if}} class="shrink-0 w-full h-[250px] 2xl:h-[270px] object-cover snap-start" alt="{{../year}} {{../make}} {{../model}}" data-src="{{> photoCDN index=@index width="600" unit=..}}">
                                {{/for}}
                            </span>
                        </a>
                        {{#if (gt (length photos) 1 ) }}
                        <a href="#" class="hidden lg:block slide-prev flex h-10 -mt-5 items-center rounded-r-md transition-opacity delay-200 duration-500 opacity-0 group-hover:opacity-80 absolute top-1/2 p-2 left-0 bg-gray-900 text-gray-200">❮</a>
                        <a href="#" class="hidden lg:block slide-next flex h-10 -mt-5 items-center rounded-l-md transition-opacity delay-200 duration-500 opacity-0 group-hover:opacity-80 absolute top-1/2 p-2 right-0 bg-gray-900 text-gray-200">❯</a>
                        <ul class="slidedots flex justify-center items-center absolute w-[74px] h-[24px] bottom-2 space-x-1 hover:bg-gray-900 hover:opacity-60 transition-colors duration-300 rounded-md text-gray-200">
                            {{#for 1 (increment (smallest 4 (length photos))) 1}}
                                <li class="cursor-pointer lg:text-xs text-white">{{#if (eq @index 1)}}●{{else}}○{{/if}}</li>
                            {{/for}}
                        </ul>
                        {{/if}}
                    </div>
                </div>

                <div class="flex flex-col grow">
                    <div class="px-4 py-2">
                        <div class="flex justify-between pb-1.5 border-b border-gray-200">
                            <a href="{{specsheet .}}" class="h text-inherit text-lg xl:text-xl 2xl:text-2xl">{{year}} {{make}} {{model}}</a>
                        <span>{{formatCurrency pricing.asking 'Call for Price' }}</span>
                        </div>
                    </div>

                    <div class="grow flex flex-col items-start md:flex-row gap-4 px-4 mb-4 text-sm 2xl:text-base">
                        <dl class="flex w-full flex-wrap [&>*]:py-1 xl:w-1/2">
                            <dt class="py-1 font-medium w-1/3">Engine</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'Engine Make'}} {{spec . 'Engine HP'}}</dd>

                            <dt class="py-1 font-medium w-1/3">Transmission</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{first (spec . 'Trans Type') (spec . 'Trans Make') (spec . 'Trans Model')}}</dd>

                            <dt class="py-1 font-medium w-1/3">Ratio</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'Rear End Ratio'}}</dd>

                            {{#if (eq type.id 105)}}
                            <dt class="py-1 font-medium w-1/3">Sleeper</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'Sleeper Size'}} {{spec . 'Sleeper Type'}}</dd>
                            {{else}}
                            <dt class="py-1 font-medium w-1/3">RA Capacity</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'RA Capacity'}}</dd>
                            {{/if}}

                            <dt class="py-1 lg:hidden font-medium w-1/3">Stock#</dt>
                            <dd class="py-1 lg:hidden w-2/3 shrink text-right">{{stockNumber}}</dd>
                        </dl>
                        <dl class="hidden lg:flex flex-wrap [&>*]:py-1 lg:flex xl:w-1/2">
                            <dt class="py-1 font-medium w-1/3">Wheelbase</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'Wheelbase'}}</dd>

                            <dt class="py-1 font-medium w-1/3">Suspension</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{spec . 'Suspension Type'}}</dd>

                            {{#if (gt odometer 100)}}
                            <dt class="py-1 font-medium w-1/3">Odometer</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{formatNumber odometer.reading}} {{odometer.unit}}</dd>
                            {{/if}}

                            <dt class="py-1 font-medium w-1/3">Stock#</dt>
                            <dd class="py-1 w-2/3 shrink text-right">{{stockNumber}}</dd>
                        </dl>
                    </div>

                    <div class="mb-2 px-4 flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4">
                        <div class="flex lg:flex-col xl:flex-row justify-start gap-x-6 text-gray-600">
                                <div class="flex items-center gap-1">
                                    <a href="/locations/{{lowercase dealer.city}}" class="border-b border-dashed hover:border-b-primary">{{dealer.city}}, {{dealer.state}}</a>
                                </div>
                        </div>
                        
                        <div class="flex gap-4 items-center justify-between ">
                            <div class="grid grid-cols-2 lg:flex gap-2 w-full ">
                                <a class="md:w-auto button button--primary" href="{{specsheet .}}">View Details</a>
                                <a class="button button--secondary" rel="nofollow" {{modalOpenOnClick}} href="{{routeUrl 'form' formName='unit-inquiry' unitid=id}}">Email Us</a>
                            </div>
                        </div>
                    </div>


                </div>
            </div>


        </div>
    {{/each}}

{{/inline}}

{{#*inline "listingsHeader"}}
    <div class="flex justify-between mb-8">
        <ul class="flex justify-start items-center gap-4 md:divide-x font-semibold">
            <li class="md:pr-4">{{statistics.total}} Matches</li>
            <li class="hidden md:block">Page {{query.page}} of {{statistics.pageCount}}</li>
        </ul>
        
        <div class="">
            {{sortDropdown placeholderText="Sort Order" class="sort"}}
        </div>
    </div>
{{/inline}}

{{#*inline "stripHeader"}}
    <div class="strip strip--thin bg-blue-700 border-y-1 border-blue-500">
        <div id="results_bar" class="strip__container relative z-10 before:bg-blue-700 before:border-1 before:border-blue-500">
            <div class="flex items-center h-[40px] bg-blue-700">
                {{#breadcrumbs .}}
                <ul class="flex items-center text-sm text-gray-100">
                    {{#each .}}
                    <li class="flex items-center">
                        {{#if (and (gt @index 0) (lt @index (length ..)) )}}
                        <svg class="w-5 h-5 mx-1 lg:mx-2 fill-gray-200" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"></path></svg>
                        {{/if}}
                        {{#if (lt @index (subtract 1 (length ..)) )}}<a class="text-white" href="{{url}}">{{/if}}

                        <span class="lg:block">{{caption}}</span>

                        {{#if (lt @index (subtract 1 (length ..)) )}}</a>{{/if}}
                    </li>
                    {{/each}}
                </ul>
                {{/breadcrumbs}}
            </div>
        </div>
    </div>


    <div class="strip strip--thin bg-blue-800 text-white">
        <div id="invheader" tabindex="0" class="strip__container  bg-no-repeat bg-right py-4 min-h-[180px]">
            <div class="flex flex-row">
                <div>
                    <h1 class="text-3xl lg:text-4xl ">{{seoTitle}}</h1>

                    <ul class="flex flex-col gap-1">
                    {{#if (eq route.name 'all')}}
                        <li class="">
                            <a class="flex items-center gap-2 text-white" href="{{routeUrl 'trucks'}}">
                                <svg class="fill-blue-400 w-4 h-3" xmlns="http://www.w3.org/2000/svg" width="14.526" height="22.507" viewBox="0 0 14.526 22.507">
                                  <path d="M15.771,19.2,6.209,28.758a1.681,1.681,0,0,1-2.384,0L2.236,27.169a1.681,1.681,0,0,1,0-2.384l6.778-6.778L2.236,11.229a1.681,1.681,0,0,1,0-2.384l1.582-1.6a1.681,1.681,0,0,1,2.384,0L15.764,16.8a1.683,1.683,0,0,1,.007,2.391Z" transform="translate(-1.74 -6.746)"/>
                                </svg>
                                <span>Truck Inventory</span>
                            </a>
                        </li>
                        <li class="">
                            <a class="flex items-center gap-2 text-white" href="{{routeUrl 'trailers'}}">
                                <svg class="fill-blue-400 w-4 h-3" xmlns="http://www.w3.org/2000/svg" width="14.526" height="22.507" viewBox="0 0 14.526 22.507">
                                  <path d="M15.771,19.2,6.209,28.758a1.681,1.681,0,0,1-2.384,0L2.236,27.169a1.681,1.681,0,0,1,0-2.384l6.778-6.778L2.236,11.229a1.681,1.681,0,0,1,0-2.384l1.582-1.6a1.681,1.681,0,0,1,2.384,0L15.764,16.8a1.683,1.683,0,0,1,.007,2.391Z" transform="translate(-1.74 -6.746)"/>
                                </svg>
                                <span>Trailer Inventory</span>
                            </a>
                        </li>
                        <li class="">
                            <a class="flex items-center gap-2 text-white" href="{{routeUrl 'construction'}}">
                                <svg class="fill-blue-400 w-4 h-3" xmlns="http://www.w3.org/2000/svg" width="14.526" height="22.507" viewBox="0 0 14.526 22.507">
                                  <path d="M15.771,19.2,6.209,28.758a1.681,1.681,0,0,1-2.384,0L2.236,27.169a1.681,1.681,0,0,1,0-2.384l6.778-6.778L2.236,11.229a1.681,1.681,0,0,1,0-2.384l1.582-1.6a1.681,1.681,0,0,1,2.384,0L15.764,16.8a1.683,1.683,0,0,1,.007,2.391Z" transform="translate(-1.74 -6.746)"/>
                                </svg>
                                <span>Construction Equipment</span>
                            </a>
                        </li>
                    {{/if}}
                    </ul>
                </div>
                <div>
                </div>
            </div>
        </div>
    </div>
{{/inline}}

{{#headSEO}}
    {{#if units.length}}
        <link rel="preload" as="image" fetchpriority="high" href="{{> photoCDN unit=units.[0] width=600 index=1}}" type="image/jpeg">
    {{/if}}

    <style>
        @media screen and (min-width: 64rem) {
            #invheader {
                background-image: url(/images/inventory/{{route.name}}-header.png)
            }
        }
    </style>
{{/headSEO}}

{{> stripHeader}}

<section class="strip strip--alt">
    <div class="strip__container flex">
        {{#if statistics.total }}
            {{> facetList }}

            <div class="">
                {{> listingsHeader}}

                <div class="space-y-4 mb-8 md:grid md:grid-cols-2 md:gap-4 lg:block">
                    {{> listings}}
                </div>

                <div class="flex justify-center">
                    {{> paging}}
                </div>
            </div>
        {{else}}
            <div class="">
                <h2>There is currently no inventory matching the specified search</h2>
                <p>Click one of the options below to see our other inventory.</p>
                <ul class="flex gap-4">
                    <li><a class="button button--primary" href="{{routeUrl "trucks"}}">Truck Inventory</a></li>
                    <li><a class="button button--primary" href="{{routeUrl "trailers"}}">Trailer Inventory</a></li>
                    <li><a class="button button--primary" href="{{routeUrl "construction"}}">Construction Equipment</a></li>
                    <li><a class="button button--primary" href="/contact-us">Contact Us</a></li>
                </ul>
            </div>
        {{/if}}
    </div>
</section>




<script>
    $('a[data-show="facets"]').click(function() {
        $('.listings__search').toggleClass('listings__search--modal');

        return false;
    });

    $('a[data-dismiss="facets"]').click(function() {
        $(this).parents('.listings__search').removeClass('listings__search--modal');
    });
</script>