{{#*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="raised grid-x grid-padding-x grid-padding-y small-up-2 medium-up-4 large-up-5"}}

        <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 "header"}}
<section class="elementor-element elementor-element-a69738c inner-page-hero-section elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="a69738c" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
    <div class="elementor-background-overlay"></div>
    <div class="elementor-container elementor-column-gap-default">
        <div class="elementor-row">
            <div class="elementor-element elementor-element-d2725dc elementor-column elementor-col-100 elementor-top-column" data-id="d2725dc" data-element_type="column">
                <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-090b54f elementor-widget elementor-widget-heading" data-id="090b54f" data-element_type="widget" data-widget_type="heading.default">
                            <div class="elementor-widget-container">
                                <h1 class="elementor-heading-title elementor-size-large">{{title}}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{/inline}}

{{#*inline "buttonLink2"}}
    <a href="{{href}}" class="elementor-button-link elementor-button elementor-size-xs" role="button">
        <span class="elementor-button-content-wrapper">
            <span class="elementor-button-text">{{#if icon}}<i class="fa {{icon}}"></i> {{/if}}{{text}}</span>
        </span>
    </a>
{{/inline}}

{{#*inline "buttonLink"}}
    <a href="{{href}}" class="button" role="button">{{#if icon}}<i class="fa {{icon}}"></i> {{/if}}{{text}}</a>
{{/inline}}


<div class="grid-container">
    <div id="inv-container" class="grid-x grid-margin-x">
        
        <div class="cell">
            {{> search}}
            <!-- <div class="grid-x grid-padding-x grid-padding-y raised">
                <div class="cell">
                    
                </div>
                
            </div> -->

        </div>

        <div class="cell">
            <div class="inv-results grid-x grid-padding-y">
                <div class="cell small-6 medium-7 large-9">
                    <div class="inv-totals">
                        <span class="count">{{statistics.total}} </span> Match{{#if (gt statistics.total 1)}}es{{/if}}
                        <span class="inv-page show-for-medium">Page {{query.page}} of {{statistics.pageCount}}</span>
                    </div>
                    <!-- <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>
            
        </div>

        <div class="cell">
            <div class="grid-x grid-margin-x grid-margin-y medium-up-2 large-up-3">
                {{#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">
                                <div class="listing__header__price">{{formatCurrency pricing.asking 'Call for Price'}}</div>
                            </div>
                        </div>

                        <div class="listing__content">
                            <a class="listing__content__photo" href="{{specsheet .}}">
                                <img class="" src="{{thumbnail .}}" alt="">
                            </a>

                            <div class="listing__specs__cont">
                                <ul class="listing__specs">
                                    <li class="listing__specs__item">
                                        <span class="listing__specs__item__name">Engine</span>
                                        <span class="listing__specs__item__value">{{spec . 'Engine Make'}} {{spec . 'Engine HP'}}</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 . '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 . '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}}
                                    {{#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}}

                                    <li class="listing__specs__item">
                                        <span class="listing__specs__item__name">Location</span>
                                        <span class="listing__specs__item__value">{{physicalLocation}}</span>
                                    </li>
                                </ul>
                                
                                <a class="et_pb_button et_pb_custom_button_icon et_pb_button_2 et_pb_bg_layout_light" href="{{specsheet .}}" data-icon="5">View Details</a>
                            </div>
                        </div>

                        <div class="listing__footer">
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>

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

    </div>
</div>