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

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

{{#*inline "unitVideo"~}}
    {{#if (length videos)}}
        <a id="video"></a>
        <div class="video-frame">
            <lite-youtube videoid="{{videos.0.youtubeVideoId}}"></lite-youtube>
        </div>
        {{!-- <iframe class="video-frame" title="View Video" src="https://youtube.com/embed/{{videos.0.youtubeVideoId}}?rel=0&egm=0&showinfo=0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe> --}}
    {{/if}}
{{~/inline}}


{{#*inline "slider"}}
<div id="slider" class="flexslider" style="height: auto;">
    <ul class="slides">
        {{#each photos as |photo i|}}
        <li>
            <img class="lazy"
                 width="373" height="280"
                 data-lazy="{{> photoCDN unit=.. width=800 index=(increment i)}}"
                alt="{{../year}} {{../make}} {{../model}}" />
        </li>
        {{/each}}
    </ul>
</div>

<div id="carousel" class="flexslider {{#if (lte photos.length 1)}}hide{{/if}}">
    <ul class="slides">
        {{#each photos as |photo i|}}
            <li>
                <img 
                      alt="{{../year}} {{../make}} {{../model}}"
                      src="{{> photoCDN unit=.. width=175 index=(increment i)}}"
                      loading="lazy"
                      width="100" height="75">
            </li>
        {{/each}}
    </ul>
</div>
{{/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 Details</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>


                {{#if (length videos)}}
                    <a class="video-button button--small button--red" href="#video"><i class="fa fa-play"></i> Watch Video</a>
                {{/if}}
            </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">
            <div class="grid-x grid-margin-x">
                <div class="cell">
                    <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>

                    <div class="grid-x grid-margin-x grid-margin-y show-for-medium">
                        <div class="cell shrink">
                            <div><strong>Phone</strong>: <a href="tel:{{dealer.phone}}">{{dealer.phone}}</a></div>
                            {{#if dealer.fax}}<div><strong>Fax</strong>: <a href="tel:{{dealer.fax}}">{{dealer.fax}}</a></div>{{/if}}
                        </div>
                        <div class="cell auto">
                            <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>
                        </div>
                        
                    </div>
                    
                    <a class="button button--primary outlined button--small show-for-small-only"
                        href="telprompt:({{dealer.phone}}" style="margin-right: .5rem"><i class="fa fa-phone"></i> {{dealer.phone}}</a>

                    <a class="button button--primary button--small show-for-small-only"
                        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>
        </div>
    </div>
{{/inline}}

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

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

        <a class="button button--primary" {{modalOpenOnClick}} href="{{routeUrl 'form' formName='unit-inquiry' unitid=id}}" style="margin-right: .5rem">Contact Us</a>
        <a class="button button--primary"
           href="https://app.taycor.com/soarr/?title={{year}}+{{make}}+{{model}}&price={{#if pricing.asking}}{{pricing.asking}}{{/if}}" rel="nofollow" target="_blank">Apply for Financing</a>

    </div>
{{/inline}}

{{#*inline "fullSpecs"}}
    {{#if (specGroups .)}}
    <div id="specs" class="box alt raised bordered">
        <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 bordered">
        <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 bordered">
            <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="grid-x grid-margin-x medium-up-2 large-up-4">
                        {{#each units}}
                            <div class="cell">
                                {{#if (and primaryPhoto primaryPhoto.large)}}
                                    <a href="{{specsheet .}}"><img class="thumb" src="{{thumbnail .}}" /></a>
                                {{else}}
                                    <a class="listing__content__photo listing__content__photo--nophoto" href="{{specsheet .}}">
                                        <span>Photos Coming<br>Soon</span>
                                    </a>
                                {{/if}}
                                <div class="">
                                    <ul>
                                        <li><a class="title" href="{{specsheet .}}">{{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="{{> photoCDN unit=unit width=800 index=1}}" type="image/jpeg">
{{/headSEO}}

{{#with unit}}

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

    <section class="strip">
        <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="grid-x grid-margin-x">
                    <div class="cell large-8">
                        {{>slider}}            
                    </div>

                    <div class="cell large-auto">
                        {{> unitHeader}}
            
                        <div class="grid-x grid-margin-x">
                            <div class="cell medium-6 large-12">{{> quickspecs}}</div>
                            <div class="cell medium-6 large-12">{{> location}}</div>
                        </div>
                    </div>

                </div>

                <div class="grid-x">
                    <div class="cell">
                        {{> fullSpecs}}

                        {{> options}}

                        {{> notes}}

                        {{> unitVideo}}

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


{{/with}}