{{#*inline "photoCDN"~}}
    https://orion.soarr.com/photos/{{unit.id}}/{{width}}x/{{unit.year}}-{{lowercase unit.make}}-{{lowercase unit.model}}.{{index}}.jpg
{{~/inline}}
{{!--<link rel="preload" as="image" href="https://orion.soarr.com/photos/{{unit.id}}/{{width}}x/{{unit.year}}-{{lowercase unit.make}}-{{lowercase unit.model}}.{{index}}.jpg"> --}}

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

  {{#*inline "paging"}}
    {{#if (gt statistics.pageCount 1)}}
    <div class="">
        {{#if (gt query.page 1)}}
        <a href="{{previousPageUrl .}}" class="page prev">PREV</a>
        {{/if}}

        {{#for 1 (increment statistics.pageCount 6) 1}}
        {{#if (eq this ../query.page)}}
        <span class="page num current">{{../query.page}}</span>
        {{else}}
        <a class="page num" href="{{pageUrl .. this}}">{{this}}</a>
        {{/if}}

        {{/for}}
        {{#if (lt query.page statistics.pageCount)}}
        <a href="{{nextPageUrl .}}" class="page next">NEXT</a>
        {{/if}}
    </div>
    {{/if}}
{{/inline}}

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


{{#*inline "search"}}

    {{#searchForm id="minisearch" includeCount="false" class="grid-x grid-padding-x grid-padding-y small-up-2 medium-up-4 large-up-1"}}

        <div class="cell">
            <label>Truck Type</label>
            <select name="vehtype" data-field="vehtype" data-placeholder="Type"></select>
        </div>
        <div class="cell">
            <label>Year</label>
            <select name="year" data-field="year" data-placeholder="Year" data-sel-placeholder="Any Year"></select>
        </div>
        <div class="cell">
            <label>Make</label>
            <select name="make" data-field="make" data-placeholder="Make" data-sel-placeholder="All Makes"></select>
        </div>

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

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

    {{/searchForm}}
{{/inline}}

{{#*inline "facetList"}}
    <div class="listings__facets">
        {{#facets "vehtype,year,make,model"}}
            {{#with selected}}
                <div class="listings__facets__group listings__facets__group--selected">
                    <div class="listings__facets__group__title"><i class="fa fa-angle-down"></i> Selected</div>
                    <ul class="listings__facets__group__items">
                        {{#each .}}
                            <li class="listings__facets__group__items__item listings__facets__group__items__item--remove">{{#removeParamsLink name}}<i class="fa fa-close"></i> {{value}}{{/removeParamsLink}}</li>
                        {{/each}}
                    </ul>
                </div>
            {{/with}}

            {{#each facets}}
                <div class="listings__facets__group">
                    <div class="listings__facets__group__title"><i class="fa fa-angle-down"></i> {{title}}</div>
                    <ul class="listings__facets__group__items">
                        {{#each items}}
                            <li class="listings__facets__group__items__item"><a href="{{href}}">{{text}} <em class="listings__facets__group__items__item__count">({{count}})</em></a></li>
                        {{/each}}
                    </ul>
                </div>
                
            {{/each}}

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


{{#*inline "listings"}}

    {{#each units}}
        <div class="listing">
            <div class="listing__header">
                <div class="listing__header__left">
                    <a class="listing__header__title" href="{{specsheet .}}">{{year}} {{make}} {{model}}</a>
                    <dl class="listing__header__subtitle">
                        <dt>Truck Type</dt>
                        <dd>{{type.name}}</dd>
                        <dt>Stock#</dt>
                        <dd>{{stockNumber}}</dd>
                    </dl>
                </div>

                <div class="listing__header__right">
                    <span class="listing__header__price">{{formatCurrency pricing.asking 'Call for Price'}}</span>
                </div>
            </div>

            <div class="listing__content">
                {{#if primaryPhoto.large}}
                <a class="listing__content__photo" href="{{specsheet .}}">
                    <img class="" src="{{> photoCDN unit=. width=300 index=1}}" loading="{{#if (gt @index 0)}}lazy{{/if}}" alt="{{year}} {{make}} {{model}}">

                    {{#if (length videos)}}
                        <ul class="decorators">
                            <li class="video-decorator">Video</li>
                        </ul>
                    {{/if}}
                </a>
                {{else}}
                <a class="listing__content__photo listing__content__photo--nophoto" href="{{specsheet .}}">
                    <span>Photos Coming<br>Soon</span>
                </a>
                {{/if}}

                <div class="listing__content__details">
                    <ul class="listing__specs">
                        {{#if (eq type.segment.id 2)}}
                            
                            {{#withSpec . 'Length'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}
                            {{#withSpec . 'Width'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}
                            {{#withSpec . 'Height'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}
                            {{#withSpec . 'Axle Capacity'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}
                            {{#withSpec . 'Suspension Type'}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{value}}</span>
                                </li>
                            {{/withSpec}}
                        {{else}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">Engine</span>
                                <span class="listing__specs__item__value">{{spec . 'Engine Make'}}{{#if (ne '0' (spec . 'Engine HP'))}} {{spec . 'Engine HP'}}{{/if}}</span>
                            </li>
                            {{#withSpec . 'RA Capacity'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{formatNumber value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}

                            {{#withSpec . 'FA Capacity'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{formatNumber value}}</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}

                            {{#withSpec . 'GVWR'}}
                                {{#if (gt value 0)}}
                                <li class="listing__specs__item">
                                    <span class="listing__specs__item__name">{{name}}</span>
                                    <span class="listing__specs__item__value">{{formatNumber value}} lbs</span>
                                </li>
                                {{/if}}
                            {{/withSpec}}

                            {{#withSpec . 'Trans Make'}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">{{name}}</span>
                                <span class="listing__specs__item__value">{{value}}</span>
                            </li>
                            {{/withSpec}}
                            
                            {{#withSpec . 'Rear End Ratio'}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">Ratio</span>
                                <span class="listing__specs__item__value">{{value}}</span>
                            </li>
                            {{/withSpec}}

                            {{#withSpec . 'Wheelbase'}}
                            {{#if (gt value 0)}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">{{name}}</span>
                                <span class="listing__specs__item__value">{{value}}"</span>
                            </li>
                            {{/if}}
                            {{/withSpec}}

                            {{#withSpec . 'Sleeper Type'}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">{{name}}</span>
                                <span class="listing__specs__item__value">{{value}}</span>
                            </li>
                            {{/withSpec}}
                            {{#withSpec . 'Suspension Type'}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">Suspension</span>
                                <span class="listing__specs__item__value">{{value}}</span>
                            </li>
                            {{/withSpec}}
                            {{#withSpec . 'Color'}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">{{name}}</span>
                                <span class="listing__specs__item__value">{{value}}</span>
                            </li>
                            {{/withSpec}}
                            
                            {{#if odometer.reading}}
                            <li class="listing__specs__item">
                                <span class="listing__specs__item__name">Odometer</span>
                                <span class="listing__specs__item__value">{{formatNumber odometer.reading}} {{odometer.unit}}</span>
                            </li>
                            {{/if}}
                        {{/if}}
                        <li class="listing__specs__item">
                            <span class="listing__specs__item__name">Location</span>
                            <span class="listing__specs__item__value">{{dealer.city}}, {{dealer.state}}</span>
                        </li>
                    </ul>
                    
                    <ul class="listing__quick__actions">
                        <li class="listing__quick__actions__item"><a class="button button--small button--primary" href="{{specsheet .}}"><i class="fa fa-fw fa-caret-right"></i> View Details</a></li>
                        <li class="listing__quick__actions__item"><a class="button button--small button--primary" href="telprompt:{{dealer.phone}}"><i class="fa fa-fw fa-phone"></i> {{dealer.phone}}</a></li>
                        <li class="listing__quick__actions__item"><a class="button button--small button--primary" {{modalOpenOnClick}} href="{{unitFormUrl . 'unit-inquiry'}}"><i class="fa fa-fw fa-envelope"></i> Email Us</a></li>

                                <li class="listing__quick__actions__item">
                            <a class="button button--small button--primary" rel="nofollow" href="https://app.taycor.com/soarr/?title={{year}}+{{make}}+{{model}}&price={{#if pricing.asking}}{{pricing.asking}}{{/if}}" target="_blank"><i class="fa fa-fw fa-dollar"></i> Financing</a>
                        </li>
                    </ul>
                </div>

                
            </div>

            <div class="listing__footer">

            </div>
        </div>
    {{/each}}

    <div class="inv-paging">
        {{> paging}}
    </div>
{{/inline}}

{{#*inline "listingsHeader"}}
<div class="listings__header grid-x">
    <div class="cell small-6 medium-7 large-9">
        <ul class="inv-totals inline-list">
            <li><span class="count">{{statistics.total}} </span> Match{{#if (gt statistics.total 1)}}es{{/if}}</li>
            <li><span class="inv-page show-for-medium">Page {{query.page}} of {{statistics.pageCount}}</span></li>
        </ul>
        <!-- <div class="inv-page">Page {{query.page}} of {{statistics.pageCount}}</div> -->
    </div>
    
    <div class="cell auto" style="text-align: right;">
        {{sortDropdown placeholderText="Sort Order"}}
    </div>
</div>
{{/inline}}


<section class="strip strip--pageheader">
    <div class="content__container">
        <h1>Inventory</h1>
        {{breadcrumbs .}}
    </div>
</section>

<section class="strip">
    <div class="content__container">
        <div class="listings">
            <div class="hide-for-large" style="margin-bottom: 1rem" >
                <a data-show="facets" class="button button--primary button--small" href="#">Filter Results</a>
            </div>

            <div class="listings__search">
                <a data-dismiss="facets" area-label="Close Search" title="Close Search" class="listings__search--modal__close" href="#"><i class="fa fa-times"></i></a>

                {{> facetList}}
            </div>

            <div class="listings__results">
                {{> listingsHeader}}
                {{> listings}}
            </div>
        </div>
    </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>