{{#*inline "slider"}}
<div id="slider" class="flexslider">
    <ul class="slides">
        {{#each photos}}
        <li>
            <img class="lazy"
                data-lazy="{{thumbnail . width=800}}"
                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}}
            <li>
                <img src="{{thumbnail . width=175}}" 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>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}}

                    {{#if physicalLocation}}
                    <dt>Location</dt>
                    <dd>{{physicalLocation}}</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">
            <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 medium-up-2">
                        <div class="cell">
                            <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">
                            <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 primary outlined small show-for-small-only"
                        href="telprompt:({{dealer.phone}}"><i class="fa fa-phone"></i> {{dealer.phone}}</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="et_pb_button et_pb_custom_button_icon et_pb_button_2 et_pb_bg_layout_light" data-icon="5" href="#">Contact Us</a>
        <a class="et_pb_button et_pb_custom_button_icon et_pb_button_2 et_pb_bg_layout_light" data-icon="5" href="https://app.trnsact.com/credit-app?vendorGUID=7e95121c-cc14-e711-80da-005056b05a0f&locationId=0a3ddc20-6476-11ee-a77c-cf4a273f8d8a&formId=a1cac937-5372-4d6d-b4b3-8ebd94d1426a">Apply for Credit</a>

    </div>
{{/inline}}

{{#*inline "fullSpecs"}}
    <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>
{{/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}}
        {{#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">
                                <a href="{{specsheet .}}"><img class="thumb" src="{{thumbnail .}}" /></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}}
                                                Call for Price
                                            {{/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 class="back"}}<i class="fa fa-caret-left"></i> Back to Results{{/backToListings}}

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

                <div class="cell large-5">
                    {{> 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}}

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


{{/with}}