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

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


{{#*inline "slider"}}
<div id="slider" class="flexslider" style="height: auto;">
    <ul class="slides">
        {{#each photos as |photo i|}}
        <li>
            <img {{#if (gt @index 0)}}class="lazy"{{/if}}
                 width="373" height="280"
                 onerror="this.onerror=null; this.src='/images/nophoto.large.jpg'"
                 {{#if (eq @index 0)}}src{{else}}data-lazy{{/if}}="{{> photo unit=.. width=800 index=i}}"
                 alt="{{../year}} {{../make}} {{../model}}" />
        </li>
        {{/each}}
    </ul>
</div>

{{#if (gt photos.length 1)}}
    <div id="carousel" class="flexslider">
        <ul class="slides">
            {{#each photos as |photo i|}}
                <li>
                    <img 
                          alt="{{../year}} {{../make}} {{../model}}"
                          src="{{> photo unit=.. width=175 index=i}}"
                          onerror="this.onerror=null; this.src='/images/nophoto.small.jpg'"
                          loading="lazy"
                          width="100" height="75">
                </li>
            {{/each}}
        </ul>
    </div>
{{/if}}
{{/inline}}

{{#*inline "quickspecs"}}
    <div id="quickspecs" class="box ident">
        <div class="box-header">
            <h3 class="box-title">Overview</h3>
            <a class="more" href="#specs">View All</a>
        </div>

        <div class="box-body">
            <div class="spec-container">
                <dl>
                    <dt>Truck Type</dt>
                    <dd>{{type.name}}</dd>

                    {{!--
                    <dt>Condition</dt>
                    <dd>{{designation.name}}</dd>
                    --}}
                    
                    {{#if odometer.reading}}
                    <dt>Odometer</dt>
                    <dd>{{formatNumber odometer.reading}} {{odometer.unit}}</dd>
                    {{/if}}

                    {{#if odometer.ecm}}
                    <dt>ECM Reading</dt>
                    <dd>{{formatNumber odometer.ecm}}</dd>
                    {{/if}}

                    <dt>Stock#</dt>
                    <dd>{{stockNumber}}</dd>

                    {{#if serialNumber}}
                    <dt>VIN</dt>
                    <dd>{{serialNumber}}</dd>
                    {{/if}}
                </dl>
            </div>
        </div>
    </div>
{{/inline}}

{{#*inline "location"}}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Location Details</h3>
        </div>
        <div class="box-body">
            <p class="dealer-name">{{dealer.name}}</p> 
            <div class="dealer-address">
                <div class="wpsl-street">{{dealer.address}}</div>
                
                <div>{{dealer.city}} {{dealer.state}} {{dealer.zip}}</div>
            </div>

            <ul class="inline-list hide-for-small-only">
                <li><strong>Phone</strong>: <a href="tel:{{dealer.phone}}">{{dealer.phone}}</a></li>
                {{#if dealer.fax}}<li><strong>Fax</strong>: <a href="tel:{{dealer.fax}}">{{dealer.fax}}</a></li>{{/if}}
                <li><a class="" target="_blank" href="https://www.google.com/maps/dir/?api=1&amp;destination={{dealer.address}},{{dealer.city}},{{dealer.state}} {{dealer.zip}}&amp;travelmode=driving"><i class="fa fa-map-marker"></i> Directions</a></li>
            </ul>
            
            <a class="button button--primary outlined button--small hide-for-medium"
                href="telprompt:({{dealer.phone}}" style="margin-right: .5rem"><i class="fa fa-phone"></i> {{dealer.phone}}</a>

            <a class="button button--secondary button--small hide-for-medium"
                href="https://www.google.com/maps/dir/?api=1&amp;destination={{dealer.address}},{{dealer.city}},{{dealer.state}} {{dealer.zip}}&amp;travelmode=driving"><i class="fa fa-map-marker"></i> Directions</a>
        </div>
    </div>
{{/inline}}

{{#*inline "unitHeader"}}
    <div id="unit-header" class="box">
        <div class="box-body">
            <h2 class="unit-title">{{year}} {{make}} {{model}}</h2>

            <div class="price">
                {{#if pricing.asking}}
                    Price: {{formatCurrency pricing.asking }}
                {{else}}
                    Call for Price
                {{/if}}
            </div>

            <a class="button button--primary" rel="nofollow" {{modalOpenOnClick}} href="{{routeUrl 'form' formName='unit-inquiry' unitid=id}}" style="margin-right: .5rem">Contact Us</a>
            <a class="button button--primary" target="_blank" href="/financing" rel="nofollow">Financing</a>
        </div>
    </div>
{{/inline}}

{{#*inline "fullSpecs"}}
    {{#if (specGroups .)}}
    <div id="specs" class="box alt raised">
        <div class="box-header">
            <div class="box-title">Specifications</div>
        </div>

        <div class="box-body">
            {{#each (specGroups .) as |group|}}
            <div class="specgroup">
                <h3 class="groupname"><i class="fa fa-angle-down"></i> {{group.name}}</h3>
                <div class="specs">
                    {{#each group.specs}}
                    <div>
                        <label class="name">{{name}}</label>
                        <span class="value">{{value}}</span>
                    </div>
                    {{/each}}

                </div>
            </div>
            {{/each}}
            
            
        </div>
    </div>
    {{/if}}
{{/inline}}

{{#*inline "options"}}
    {{#if options.length }}
    <div class="box alt raised">
        <div class="box-header">
            <div class="box-title">Additional Features</div>
        </div>
        <div class="box-body">
            <div class="opts">
                {{#each options}}
                <span><i class="fa fa-check"></i> {{this}}</span>
                {{/each}}

            </div>
        </div>
    </div>
    {{/if}}
{{/inline}}

{{#*inline "notes"}}
    {{#if notes.external}}
        <div class="box alt raised">
            <div class="box-header">
                <div class="box-title">Additional Description</div>
            </div>
            <div class="box-body">
                <div id="extnotes">{{{html notes.external}}}</div>
            </div>
        </div>
    {{/if}}
{{/inline}}

{{#*inline "similar"}}
    {{#similarInventory}}
        {{#if (gt units.length 0)}}
            <div class="box alt">
                <div class="box-header">
                    <div class="box-title">Similar Inventory</div>
                </div>
            
                <div class="box-body">
                    <div id="similar" class="similar-units-cont">
                        {{#each units}}
                            <div class="similar-unit">
                                <a href="{{specsheet .}}" title="View Details"><img class="thumb" src="{{thumbnail .}}" alt="{{year}} {{make}} {{model}}" /></a>
                                <div class="">
                                    <ul>
                                        <li><a class="title" href="{{specsheet .}}" title="{{year}} {{make}} {{model}}">{{year}} {{make}} {{model}}</a></li>
                                        <li class="price">
                                            {{#if pricing.asking}}
                                                Price: {{formatCurrency pricing.asking }}
                                            {{else}}
                                                Call for Price
                                            {{/if}}
                                        </li>
                                        <li class="stocknum">Stock# {{stockNumber}}</li>
                                    </ul>
                                    
                                </div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        {{/if}}
    {{/similarInventory}}
{{/inline}}


{{#headSEO}}
    <link rel="preload" as="image" fetchpriority="high" href="{{> photo unit=unit width=800 index=1}}" type="image/jpeg">
{{/headSEO}}

{{#with unit}}

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

    <section class="strip strip--alt">
        <div class="content__container">
            <div id="specsheet" class="specsheet cell">
                {{#backToListings class="back"}}<i class="fa fa-caret-left"></i> Back to Results{{/backToListings}}

                <div class="top-section">
                    <div class="photos__cont">
                        {{>slider}}            
                    </div>

                    <div class="summary__cont">
                        {{> unitHeader}}
            
                        <div class="summary__sections">
                            <div class="summary__sections__item">{{> quickspecs}}</div>
                            <div class="summary__sections__item">{{> location}}</div>
                        </div>
                    </div>

                </div>

                {{> fullSpecs}}

                {{> options}}

                {{> notes}}

                {{> similar}}
            </div>
        </div>
    </section>


{{/with}}