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

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


{{#*inline "slider"}}
    <div id="main-gallery" class="main-gallery w-full aspect-4/3 lg:h-full">
        {{#each photos as |photo i|}}
            <a 
                href="{{unitPhoto unit=.. width=400 index=(increment i)}}"
                data-srcset="{{unitPhoto unit=.. width=400 index=(increment i)}} 400w, {{unitPhoto unit=.. width=800 index=(increment i)}} 800w, {{unitPhoto unit=.. width=1400 index=(increment i)}} 1400w"
                data-sizes="100vw"
                data-thumb-src="{{unitPhoto unit=.. width=175 index=(increment i)}}"
                class="hidden"
                title="{{../year}} {{../make}} {{../model}}">

                <img src="{{unitPhoto unit=.. width=400 index=(increment i)}}">
            </a>
        {{/each}}
    </div>
{{/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 md:h-full lg:h-auto">
        <div class="box-header">
            <div class="h text-xl md:text-2xl text-white print:text-inherit print:text-inherit">Overview</div>
        </div>

        <div class="box-body">
            <div class="">

                <div class="hidden md:block border-b border-b-secondary mb-2">
                    <div class="h lg:text-xl xl:text-2xl mb-2">{{year}} {{make}} {{model}}</div>

                    <div class="h lg:text-xl font-bold uppercase mb-2">
                        {{#if pricing.asking}}
                            Price: {{formatCurrency pricing.asking }}
                        {{else}}
                            Call for Price
                        {{/if}}
                    </div>
                </div>

                <dl class="flex flex-wrap lg:flex-row space-y-2">
                    <dt class="w-1/3 font-bold">Truck Type</dt>
                    <dd class="w-2/3">{{type.name}}</dd>

                    {{!--
                    <dt>Condition</dt>
                    <dd>{{designation.name}}</dd>
                    --}}
                    
                    {{#if odometer.reading}}
                    <dt class="w-1/3 font-bold">Odometer</dt>
                    <dd class="w-2/3">{{formatNumber odometer.reading}} {{odometer.unit}}</dd>
                    {{/if}}

                    {{#if odometer.ecm}}
                    <dt class="w-1/3 font-bold">ECM Reading</dt>
                    <dd class="w-2/3 font-bold">{{formatNumber odometer.ecm}}</dd>
                    {{/if}}

                    <dt class="w-1/3 font-bold">Stock#</dt>
                    <dd class="w-2/3">{{stockNumber}}</dd>

                    {{#if serialNumber}}
                    <dt class="w-1/3 font-bold">VIN</dt>
                    <dd class="w-2/3">{{serialNumber}}</dd>
                    {{/if}}

                    <dt class="md:hidden w-1/3 font-bold">Price</dt>
                    <dd class="md:hidden w-2/3">
                        {{#if pricing.asking}}{{formatCurrency pricing.asking }}{{else}}Call for Price{{/if}}
                    </dd>

                </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 md:h-full lg:h-auto">
        <div class="box-header">
            <div class="h text-xl md:text-2xl text-white print:text-inherit print:text-inherit">Location Details</div>
        </div>
        <div class="box-body space-y-4">
            <a class="h  block font-bold text-inherit text-lg lg:text-xl" href="/locations/{{lowercase dealer.city}}">
                <span>Quality Truck Care Center - </span>
                <span class="text-primary">{{dealerTitle dealer.city}}</span>
            </a>

            <p class="">{{dealer.address}}<br>
            {{dealer.city}} {{dealer.state}} {{dealer.zip}}</p>

            <ul class="inline-list hide-for-small-only">
                <li><strong>Phone</strong>: <a href="telprompt:{{tel dealer.phone}}">{{dealer.phone}}</a></li>
                {{#if dealer.fax}}<li><strong>Fax</strong>: {{dealer.fax}}</li>{{/if}}
            </ul>
        </div>
    </div>
{{/inline}}

{{#*inline "unitHeader"}}
{{/inline}}

{{#*inline "fullSpecs"}}
    {{#if (specGroups .)}}
    <div id="specs" class="box alt raised">
        <div class="box-header">
            <div class="h text-xl md:text-2xl text-white print:text-inherit print:text-inherit">Specifications</div>
        </div>

        <div class="box-body grid grid-cols-1 md:grid-cols-2 gap-y-4 lg:gap-y-8 md:gap-x-4">
            {{#each (specGroups .) as |group|}}
            <div class="specgroup2 w-full">
                <div class="h tracking-4 text-xl pl-1 mb-2 text-primary">{{group.name}}</div>
                <div class="">
                    {{#each group.specs}}
                    <div class="py-1 pl-1 flex gap-4 justify-between md:justify-start even:bg-gray-50 even:rounded-xs">
                        <label class="w-1/2 lg:w-[40%] font-medium">{{name}}</label>
                        <span class="text-right md:text-left">{{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="h text-2xl text-white">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="h text-xl md:text-2xl text-white print:text-inherit print:text-inherit">Additional Features</div>
        </div>
        <div class="box-body">
            {{!-- <div class="opts"> --}}
            <div class="columns-2 md:columns-3">
                {{#each options}}
                <div class="flex gap-2 items-center py-1 block">
                    <svg class="fill-primary w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
                      <g transform="translate(3557 230)">
                        <circle cx="17.5" cy="17.5" r="17.5" transform="translate(-3557 -230)"></circle>
                        <path d="M7.557,20.842.326,13.612a1.112,1.112,0,0,1,0-1.573L1.9,10.465a1.112,1.112,0,0,1,1.573,0l4.871,4.871L18.776,4.9a1.112,1.112,0,0,1,1.573,0l1.573,1.573a1.112,1.112,0,0,1,0,1.573L9.13,20.842A1.112,1.112,0,0,1,7.557,20.842Z" transform="translate(-3550.624 -225.373)" fill="#fff"></path>
                      </g>
                    </svg>
                    <span>{{this}}</span>
                </div>
                {{/each}}

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

{{#*inline "notes"}}
    {{#if notes.external}}
        <div class="box alt raised">
            <div class="box-header">
                <div class="h text-xl md:text-2xl text-white print:text-inherit print:text-inherit">Additional Description</div>
            </div>
            <div class="box-body">
                <div id="extnotes">{{{html notes.external}}}</div>
            </div>
        </div>
    {{/if}}
{{/inline}}

{{#*inline "similar"}}
    {{#similarInventory count=6}}
        {{#*inline "photoCDN"~}}
            https://orion.soarr.com/photos/{{unit.id}}/{{width}}x/{{unit.year}}-{{replace (lowercase unit.make) ' ' '_'}}-{{replace (lowercase unit.model) ' ' '_'}}.{{index}}.jpg
        {{~/inline}}

        {{#if (gt units.length 0)}}
            <section class="strip strip--alt strip--full print:hidden">
                <div class="strip__container">
                    <h2 class="strip__title text-center">Similar Inventory</h2>
                    {{!-- <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6"> --}}
                    <div class="flex flex-col md:flex-row md:flex-wrap md:justify-center gap-4 lg:gap-8">
                        {{#each units}}
                            <a class="block relative text-inherit bg-white shadow-md lg:shadow-xl rounded-md overflow-hidden lg:nth-[n+5]:hidden xl:nth-5:block 2xl:nth-[n+6]:block" href="{{specsheet .}}">
                                <span class="w-full">
                                    <img loading="lazy" class="w-full lg:h-[200px] xl:h-[220px] 2xl:h-[250px] object-cover aspect-4/3" alt="{{year}} {{make}} {{model}}" title="{{year}} {{make}} {{model}}" src="{{> photoCDN index=1 width="300" unit=.}}">
                                </span>
                                {{#if (lte listingAge 7)}}
                                <span class="absolute top-2 left-2 rounded-sm bg-green-800 px-2 py-1 text-white text-sm text-center">New Listing</span>
                                {{/if}}
                                <span class="block p-4">
                                    <span class="h text-lg xl:text-xl block w-full text-center font-bold uppercase">{{year}} {{make}} {{model}}</span>
                                    <span class="block w-full mb-4 text-gray-600 text-center">Stock# {{stockNumber}}  |  {{#if pricing.asking}}{{formatCurrency pricing.asking}}{{else}}Call for Price{{/if}}</span>
                                    <ul class="mb-4">
                                        <li class="flex justify-between">
                                            <span class="">Engine Make</span>
                                            <span class="">{{spec . 'Engine Make'}}</span>
                                        </li>
                                        <li class="flex justify-between">
                                            <span class="">Engine HP</span>
                                            <span class="">{{spec . 'Engine HP'}}</span>
                                        </li>
                                    </ul>

                                    <span class="block w-full button button--primary">View Details</span>
                                </span>
                            </a>
                        {{/each}}
                    </div>
            </section>
        {{/if}}
    {{/similarInventory}}
{{/inline}}


{{#headSEO}}
    {{#if (gt (length unit.photos) 0)}}
    <link rel="preload" 
        as="image" 
        fetchpriority="high" 
        imagesrcset="{{> photoCDN unit=unit width=400 index=1}} 400w, {{> photoCDN unit=unit width=800 index=1}} 800w, {{> photoCDN unit=unit width=1400 index=1}} 1400w"
        imagesizes="(max-width: 47.999rem) 100vw, 66vw"
        type="image/jpeg">
    {{/if}}
{{/headSEO}}

{{#with unit}}
    <div class="strip strip--thin bg-blue-700 border-y-1 border-blue-500 print:hidden">
        <div id="results_bar" class="strip__container relative z-10 before:bg-blue-700 before:border-1 before:border-blue-500">
            <div class="flex items-center h-[40px] bg-blue-700">
                {{#breadcrumbs .}}
                <ul class="flex items-center text-sm text-gray-100">
                    {{#each .}}
                    <li class="flex items-center nth-[n+2]:hidden last:flex! lg:nth-[n+2]:flex">
                        {{#if (and (gt @index 0) (lt @index (length ..)) )}}
                        <svg class="w-5 h-5 mx-1 lg:mx-2 fill-gray-200" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"></path></svg>
                        {{/if}}
                        {{#if (lt @index (subtract 1 (length ..)) )}}<a class="text-white" href="{{url}}">{{/if}}
                            <span class="block">{{caption}}</span>
                        {{#if (lt @index (subtract 1 (length ..)) )}}</a>{{/if}}
                    </li>
                    {{/each}}
                </ul>
                {{/breadcrumbs}}
            </div>
        </div>
    </div>

    <div class="strip bg-blue-800 text-white print:text-inherit">
        <div class="content__container">
            <h1>{{year}} {{make}} {{model}}</h1>

            <ul class="flex gap-4 text-gray-100 print:text-inherit">
                <li class="flex gap-2"><span>Stock#</span><span>{{stockNumber}}</span></li>
                <li class="flex gap-2"><span>VIN</span><span>{{serialNumber}}</span></li>
            </ul>
        </div>
    </div>

    <section class="strip strip--alt">
        <div class="content__container">
            <div id="specsheet" class="specsheet space-y-8">
                {{#backToListings class="flex gap-2 items-center mb-2 text-inherit print:hidden"}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="14.533" height="14" viewBox="0 0 14.533 22.507">
                      <path d="M2.229,16.8l9.563-9.562a1.681,1.681,0,0,1,2.384,0l1.589,1.589a1.681,1.681,0,0,1,0,2.384L8.993,18l6.778,6.778a1.681,1.681,0,0,1,0,2.384l-1.589,1.6a1.681,1.681,0,0,1-2.384,0L2.236,19.2A1.683,1.683,0,0,1,2.229,16.8Z" transform="translate(-1.734 -6.746)"/>
                    </svg>
                    <span>Back to Results</span>
                {{/backToListings}}

                <div class="flex flex-col gap-4 lg:flex-row">
                    <div class="-ml-4 md:ml-0 w-[calc(100%+2rem)] md:w-full lg:w-2/3">
                        {{>slider}}
                    </div>

                    <div class="lg:w-1/3 space-y-8">
                        {{!--<div class="hidden md:block">
                            <div class="h lg:text-xl xl:text-2xl mb-2!">{{year}} {{make}} {{model}}</div>

                            <div class="h lg:text-xl font-bold uppercase">
                                {{#if pricing.asking}}
                                    Price: {{formatCurrency pricing.asking }}
                                {{else}}
                                    Call for Price
                                {{/if}}
                            </div>
                        </div>--}}
           
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-8">
                            <div class="w-full">{{> quickspecs}}</div>
                            <div class="w-full">{{> location}}</div>
                        </div>

                        <div class="space-y-4 print:hidden">
                            <a class="block w-full button button--primary" rel="nofollow" href="telprompt:{{tel dealer.phone}}">Call Us: {{dealer.phone}}</a>
                            <a class="block w-full button button--primary" rel="nofollow" {{modalOpenOnClick}} href="{{routeUrl 'form' formName='unit-inquiry' unitid=id}}">Check Availability</a>
                            <a class="block w-full button button--primary" href="/pdf/daimler_voc_credit_app.pdf" rel="nofollow">Apply for Financing</a>
                        </div>
                    </div>

                </div>

                <div class="flex flex-col gap-8">
                    {{> fullSpecs}}

                    {{> options}}

                    {{> notes}}
                </div>

                {{!-- <div class="flex gap-4 w-full"> --}}
                {{!--     <div class="xl:w-[60%]"> --}}
                {{!--         {{> options}} --}}
                {{!--     </div> --}}
                {{!----}}
                {{!--     <div class="xl:w-[40%] flex-grow"> --}}
                {{!----}}
                {{!--         {{> notes}} --}}
                {{!--     </div> --}}
                {{!-- </div> --}}


            </div>
        </div>
    </section>

    {{> similar}}

{{/with}}