{{#*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"
                 {{#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}}"
                          loading="lazy"
                          width="100" height="75">
                </li>
            {{/each}}
        </ul>
    </div>
{{/if}}
{{/inline}}

{{#*inline "unitVideo"~}}
    {{#if (length videos)}}
        <a id="video"></a>
        <div class="video-frame">
            <lite-youtube videoid="{{videos.0.youtubeVideoId}}"></lite-youtube>
        </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>

            {{#if (length videos)}}
                <hr>
                <a class="video-button small {{commonClass 'button-primary'}}" href="#video"><i class="fa fa-play"></i> Watch Video</a>
            {{/if}}
        </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" href="https://mazocapital.com/apply/?eid=107295" rel="nofollow">Apply for Financing</a>
            {{!--<a class="button button--primary" 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 "conditions"}}
    <div id="condition" class="box alt bordered">
        <div class="box-header">
            <div class="box-title">Condition Information</div>
        </div>

        <div class="box-body">
            {{#fetchJson 'https://api.soarr.com/inventory/1.0/condition/' id=id}}
                {{#if isSuccess}}
                    {{#if response.length}}
                        <table>
                            <thead>
                                <tr>
                                    <th width="30%">Component</th>
                                    <th>Description</th>
                                    {{!-- <th class="text-right">Est Repair Cost</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                {{#each response}}
                                    <tr>
                                        <td>{{name}}</td>
                                        <td>{{description}}</td>
                                        {{!-- <td class="text-right">{{formatCurrency repairCost ''}}</td> --}}
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    {{else}}
                        <div>There is no condition information currently available.</div>
                    {{/if}}
                {{else}}
                        <div><i class="fa fa-exclamation"></i> Error retrieving condition information.</div>
                {{/if}}
            {{/fetchJson}}
        </div>
    </div>
{{/inline}}


{{#*inline "brakes"}}
    <div id="brakes" class="box alt bordered">
        <div class="box-header">
            <div class="box-title">Brakes</div>
        </div>
        <div class="box-body align-center">
            {{#fetchJson 'https://api.soarr.com/inventory/1.0/brakes/' id=id}}
                {{#if isSuccess}}
                    {{#if response.length}}
                        <div class="brakes grid-x small-up-2">
                            {{#each (array 1 2 3 4 5 6) as |axle|}}
                                {{#each (array 1 2) as |pos|}}
                                    {{#if ../response}}
                                        <div class="cell">
                                            {{#if (lookup (arrayFind (arrayFilter ../response property="axle" value=axle) property='positionOnAxle' value=pos) 'thickness')}}
                                                <div class="ph a{{axle}} p{{pos}}"><p>
                                                    {{lookup (arrayFind (arrayFilter ../response property="axle" value=axle) property='positionOnAxle' value=pos) 'thickness'}}
                                                </p></div>
                                            {{/if}}
                                        </div>
                                    {{else}}
                                        <div class="cell">
                                            {{#if (lookup (arrayFind (arrayFilter ../../response property="axle" value=axle) property='positionOnAxle' value=pos) 'thickness')}}
                                                <div class="ph a{{axle}} p{{pos}}"><p>
                                                    {{lookup (arrayFind (arrayFilter ../../response property="axle" value=axle) property='positionOnAxle' value=pos) 'thickness'}}
                                                </p></div>
                                            {{/if}}
                                        </div>
                                    {{/if}}
                                {{/each}}
                            {{/each}}
                        </div>
                    {{else}}
                        <div>There is no brake information currently available.</div>
                    {{/if}}
                {{else}}
                    <div><i class="fa fa-exclamation"></i> Error retrieving brake information.</div>
                {{/if}}
            {{/fetchJson}}
        </div>
    </div>
{{/inline}}

{{#*inline "tires"}}
    <div id="tires" class="box alt bordered">
        <div class="box-header">
            <div class="box-title">Tires</div>
        </div>
        <div class="box-body align-center">
            {{#fetchJson 'https://api.soarr.com/inventory/1.0/tires/' id=id}}
                {{#if isSuccess}}
                    {{#if response.length}}
                        <ul class="tires clearfix">
                            {{#each response}}
                                <li class="ph a{{axle}} p{{positionOnAxle}}">
                                    <p class="tread-depth">{{treadDepth}}</p>
                                    <p class="origin-type">{{treadOriginAndType}}</p>
                                </li>
                            {{/each}}
                        </ul>
                        <div class="legend">
                            <ul class="no-bullet inline">
                                <li>O = Original</li>
                                <li>R = Recap</li>
                                <li>RA = Radial</li>
                                <li>B = Bias</li>
                            </ul>
                        </div>
                    {{else}}
                        <p>There is no tire information currently available.</p>
                    {{/if}}
                {{else}}
                    <p><i class="fa fa-exclamation"></i> Error retrieving tire information.</p>
                {{/if}}
            {{/fetchJson}}
        </div>
    </div>
{{/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}}


                <div class="grid-x grid-margin-x">
                    <div class="cell large-7">
                        {{> notes}}

                        {{> unitVideo}}

                        {{> conditions}}

                    </div>
                    <div class="cell auto">
                        <div class="grid-x grid-margin-x">
                            <div class="cell medium-6 large-12">{{> tires}}</div>
                            {{#if (ne type.segment.id 2)}}
                            <div class="cell medium-6 large-12">{{> brakes}}</div>
                            {{/if}}
                        </div>
                        
                    </div>
                </div>


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


{{/with}}