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

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

{{#*inline "typeLabel"~}}
    {{~#if (eq type.segment.id 1)~}}Truck Type{{/if}}
    {{~#if (eq type.segment.id 2)~}}Trailer Type{{/if}}
    {{~#if (eq type.segment.id 3)~}}Equipment Type{{/if}}
    {{~#if (gt type.segment.id 3)~}}Type{{/if}}
{{~/inline}}

{{#*inline "unitTitle"~}}
    {{#if (gt year 1900)}}{{year}} {{/if}}{{make}}{{#if model}} {{model}}{{/if}}
{{~/inline}}

{{#*inline "unitVideo"~}}
    {{#if (length videos)}}
        <a id="video"></a>
        <iframe class="video-frame" 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">
    <ul class="slides">
        {{#if (gt photos.length 0)}}
            {{#each photos as |photo i|}}
            <li>
                <img class="lazy"
                    data-lazy="{{thumbnail . width=800}}"
                    alt="{{../year}} {{../make}} {{../model}}" />
            </li>
            {{/each}}
        {{else}}
        <li>
            <img src="{{appSetting 'noPhotoLarge'}}"
                alt="{{../year}} {{../make}} {{../model}}" />
        </li>
        {{/if}}
    </ul>
</div>

<div id="carousel" class="flexslider {{#if (lte photos.length 1)}}hide{{/if}}">
    <ul class="slides">
        {{#each photos as |photo i|}}
            <li>
                <img src="{{thumbnail .  width=300 }}" alt="{{../year}} {{../make}} {{../model}}">
            </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>{{> typeLabel}}</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)}}
                    <hr>
                    <a class="video-button small {{commonClass 'button-primary'}}" href="#video"><i class="fa fa-play"></i> Watch Video</a>
                {{/if}}

            </div>

            <div class="hide-for-large">
                <a class="small {{commonClass 'button-primary'}}" href="/contact-us?subject=Unit Inquiry&body=Please contact me with more information regarding stock number {{stockNumber}}">Contact Us</a>
            </div>
        </div>
    </div>
{{/inline}}

{{#*inline "location"}}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Location Details</h3>
            <a class="more " 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 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 large-up-2">
                        <div class="cell">
                            <div><strong>Phone</strong>: <a href="telprompt:{{dealer.phone}}">{{dealer.phone}}</a></div>
                            {{#if dealer.fax}}<div><strong>Fax</strong>: <a href="telprompt:{{dealer.fax}}">{{dealer.fax}}</a></div>{{/if}}
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
{{/inline}}

{{#*inline "priceString"}}
    {{#if pricing.asking~}}
    Price: {{formatCurrency pricing.asking }}
    {{~else~}}
    Price: Call
    {{~/if}}
{{/inline}}

{{#*inline "auctionDateString"~}}
    Sale Date: {{#if auction.runDate}}{{auction.runDate}}{{else}}TBA{{/if}}
{{~/inline}}

{{#*inline "runNumber"~}}
    {{#if auction.runNumber}}<span class="auc-runnumber">Run# {{auction.runNumber}}</span>{{/if}}
{{~/inline}}

{{#*inline "auctionDateStringOLD"~}}
    Sale Date: {{appSetting 'auction.date' default='TBD'}}
{{~/inline}}

{{#*inline "unitHeader"}}
    <div id="unit-header" class="box show-for-large">
        <h1 class="unit-title">{{> unitTitle}}</h1>

        <div class="price">
            {{#if pricing.asking~}}
                Price: {{formatCurrency pricing.asking }}
            {{~else~}}
                <a href="/auctions">{{~> auctionDateString~}}{{> runNumber}}</a>
            {{~/if}}
        </div>

        <a class="{{commonClass 'button-secondary'}}" href="/contact">Contact Us</a>
        <!-- <a class="{{commonClass 'button-secondary'}}" href="/financing">Apply for Credit</a> -->
        {{#if (and auction.runDate (eq pricing.asking 0))}}<a class="{{commonClass 'button-primary'}}" href="/auctions">Bid Now</a>{{/if}}

    </div>
{{/inline}}

{{#*inline "fullSpecs"}}
    {{#if (gt (length attributes) 0)}}
    <div id="specs" class="box alt 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 "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 "brakesOld"}}
    <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}}
                        <ul class="brakes clearfix">
                            {{#each response}}
                                <li class="ph a{{axle}} p{{positionOnAxle}}">
                                    <p class="thickness">{{thickness}}%</p>
                                </li>
                            {{/each}}
                        </ul>
                    {{else}}
                        <p>There is no brake information currently available.</p>
                    {{/if}}
                {{else}}
                    <p><i class="fa fa-exclamation"></i> Error retrieving brake information.</p>
                {{/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 "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 "options"}}
    {{#if options.length }}
    <div class="box alt 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 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}}
        {{#*inline "priceString"}}
            {{#if pricing.asking~}}
            Price: {{formatCurrency pricing.asking }}
            {{~else~}}
            Price: Call
            {{~/if}}
        {{/inline}}
        {{#if (gt units.length 0)}}
            <div class="box alt">
                <div class="box-header">
                    <div class="box-title">Similar {{units.0.type.segment.name}}</div>
                </div>
            
                <div class="box-body">
                    <div id="similar" class="grid-x grid-margin-x medium-up-4 large-up-4">
                        {{#each units}}
                            <div class="cell">
                                <a href="{{specsheet .}}">
                                    {{#if primaryPhoto.large}}
                                        <img class="thumb" src="{{thumbnail .}}" alt="">
                                    {{else}}
                                        <img class="thumb" src="{{appSetting 'noPhotoSmall'}}" alt="">
                                    {{/if}}
                                </a>
                                <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~}}
								                <a href="/auctions">{{~> auctionDateString~}}{{> runNumber}}</a>
								            {{~/if}}
										</li>
                                        <li class="stocknum">Stock# {{stockNumber}}</li>
                                    </ul>
                                </div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        {{/if}}
    {{/similarInventory}}
{{/inline}}

{{#with unit}}

<div class="grid-container">
    <div class="raised grid-x grid-margin-x grid-margin-y">
        <div id="specsheet" class="cell">
            {{#backToListings title="Back to Results" class="back show-for-large"}}<i class="fa fa-caret-left"></i> Back to Results{{/backToListings}}
            <div id="top-unit-header" class="grid-x grid-margin-x hide-for-large">
                <div class="cell medium-9">
                    <h1 class="unit-title">{{#backToListings class="back" style="margin-right: .25rem"}}<i class="fa fa-caret-left"></i>{{/backToListings}} {{year}} {{make}} {{model}}</h1>
                </div>
                <div class="cell medium-auto text-right">
                    <div class="price">
                    	{{#if pricing.asking~}}
			                Price: {{formatCurrency pricing.asking }}
			            {{~else~}}
			                <a href="/auctions">{{~> auctionDateString~}}&nbsp;&nbsp;{{> runNumber}}</a>
			            {{~/if}}
					</div>
                </div>
            </div>

            <div class="grid-x grid-margin-x">
                <div class="cell medium-7 large-7">
                    {{>slider}}            
                </div>

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

            </div>

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

                    {{> options}}

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

                            {{> unitVideo}}

                        </div>
                        
                    </div>

                </div>
            </div> <!-- /.grid-x -->

            <div class="grid-x">
                <div class="cell">
                    {{> similar}}
                </div>
            </div>
        </div>
    </div> <!-- /.grid-x -->
</div> <!-- /.grid-container -->


{{/with}}