{{!--
    A single detail page for both imported or manually created used trucks after they have been uploaded to SOLR.

    Important: This HBS template is only displayed, if the product was found via used product finder search (SOLR data).
    Manually created used truck pages are displayed via the corresponding page template (used_product)

    Related JS module(s): productPageUsedModule.js
--}}
<div class="layout-passepartout layout--white">
    <div class="ld-layout-item__wrapper">
        <div class="product-stage-used">
            {{!-- Truck Information --}}
            <div class="content__wrapper">
                {{#if isApproved}}
                <h3 class="small"><a href="#approvedtrucks">{{{translations.approvedTrucks}}}</a></h3>
                {{/if}}
                <h1 class="h2">{{{name}}}</h1>
                <h2 class="h3 small">{{#if yearOfBuild}}{{{yearOfBuild}}} &bull;
                    {{/if}}{{#if workingHours}}{{{formatNumber workingHours}}} {{{translations.hours}}}{{/if}}</h2>
                {{#if qualityRating}}<p class="h3 small">Linde {{{qualityRating}}}</p>{{/if}}

                <div class="btn-row">
                    {{#if price}}
                    <p class="price">
                        {{{formatCurrency price translations.currencySign}}}
                    </p>
                    <p class="price_vat">
                        {{{translations.plusVAT}}}
                    </p>
                    {{/if}}
                    {{#if getAQuoteURL}}
                    <div class="btn btn--primary">
                        <a href="{{{getAQuoteURL}}}&offerType=used"
                            class="btn__link"
                            data-add-to-cart="true"
                            data-product-id="productpage_product"
                            data-product-title="{{{name}}}"
                            data-product-image="{{{imageThumbnailURLs.[0]}}}"
                            data-product-price="{{{formatCurrency price translations.currencySign}}}"
                            data-quote-type="used"
                            >
                            {{{translations.getAQuote}}}
                        </a>
                    </div>
                    {{/if}}
                </div>
            </div>

            {{!-- Slideshow --}}
            <div class="media__wrapper">
                <div class="media-browser">
                    <div class="media-browser__master--wrapper">
                        <div class="btn btn--icon">
                            <a href="#"
                                onClick="LD.modalDialog.data('plugin_modalDialogModule').openModal('modal-dialog-zoom-image-used-product-stage', 'full-width'); return false;">
                                <span class="icon icon-LMHIconzoominblack"></span>
                            </a>
                        </div>
                        <div class="media-browser__master slick-slider" data-related-id="#slick_lightbox" id="maincarousel">
                            {{!-- 1. Slides --}}
                            {{#each imageURLs}}
                            <div class="media-browser__item" tabIndex="-1" role="option" onClick="LD.modalDialog.data('plugin_modalDialogModule').openModal('modal-dialog-zoom-image-used-product-stage', 'full-width'); return false;">
                                <div class="image-wrapper image-wrapper-16x9">
                                    <img src="{{{this}}}" alt="{{{imageAltText}}}">
                                </div>
                            </div>
                            {{/each}}
                        </div>

                        {{!-- 2. Buttons l/r --}}
                        <div class="carousel-button-wrapper">
                            <span>1 / 2</span>
                            <button type="button" class="btn btn--carousel-next btn--icon">
                                <span class="icon icon-LMHIconrightblack"></span>
                            </button>
                            <button type="button" class="btn btn--carousel-prev btn--icon">
                                <span class="icon icon-LMHIconleftblack"></span>
                            </button>
                        </div>
                    </div>

                    {{!-- 3. Thumbnails --}}
                    <div class="media-browser__navigation" data-scrollable="container">
                        {{#each imageThumbnailURLs}}
                        <div class="media-browser__item">
                            <a href="#">
                                <div class="image-wrapper image-wrapper-16x9">
                                    <img src="{{{this}}}" alt="{{{imageAltText}}}">
                                </div>
                                <span class="image-wrapper__media-icon"></span>
                            </a>
                        </div>
                        {{/each}}
                    </div>

                    {{!-- 4. Buttons u/d --}}
                    <div class="carousel-button-wrapper--scroll">
                        <div class="overflow-top">
                            <button class="btn btn--carousel-prev btn--icon" data-scrollable="btn-prev">
                                <span class="icon icon-LMHIconupblack"></span>
                            </button>
                        </div>
                        <div class="overflow-bottom">
                            <button class="btn btn-carousel--next btn--icon" data-scrollable="btn-next">
                                <span class="icon icon-LMHIcondownblack"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ld-layout-item__wrapper">
        <div class="layout-inner-65-35">
            {{!-- Intro bullets --}}
            <div class="ld-layout-item__wrapper wrapper-content--left">
                <h5>{{{name}}}</h5>
                <ul class="bullets intro">
                    {{#each intro}}
                    {{#if this.value}}<li>{{{this.name}}}: {{{this.value}}}</li>{{/if}}
                    {{/each}}
                </ul>
            </div>
            {{!-- Contact card --}}
            {{!-- The card is shown only if a contact is present. It's assumed that there will always be at least
            a name if a contact is present. --}}
            {{#if contactName}}
            <div class="ld-layout-item__wrapper">
                <h5>{{{translations.questions}}}</h5>
                <div class="contact-card vcard">
                    {{#if contactCompany}}
                    <div class="org">{{{contactCompany}}}</div>
                    {{/if}}

                    {{#if contactLocation}}
                    <p class="info org">{{contactLocation}}</p>
                    {{/if}}

                    <div class="contact-card__contact">
                        {{#if contactImage}}
                        <img src="{{{contactImage}}}" alt="{{{contactName}}}">
                        {{/if}}
                        <div>
                            <div class="fn name">{{{contactName}}}</div>
                            <div class="category">{{{contactJobTitle}}}</div>
                        </div>
                    </div>

                    {{#if contactEmail}}
                    <div class="email contact-card__detail">
                        <span class="icon icon-LMHIconmailblack"></span>
                        <a href="mailto:{{{contactEmail}}}">{{{contactEmail}}}</a>
                    </div>
                    {{/if}}

                    {{#if contactPhone}}
                    <div class="tel contact-card__detail">
                        <span class="icon icon-LMHIconphoneblack"></span>
                        <a href="tel:{{{contactPhone}}}">{{{contactPhone}}}</a>
                    </div>
                    {{/if}}

                    {{#if contactMobilePhone}}
                    <div class="mobile contact-card__detail">
                        <span class="icon icon-LMHIconphoneblack"></span>
                        <a href="tel:{{{contactMobilePhone}}}">{{{contactMobilePhone}}}</a>
                    </div>
                    {{/if}}

                    {{#if contactFax}}
                    <div class="fax contact-card__detail">
                        <span class="icon icon-LMHIconfaxblack"></span>
                        <a href="tel:{{{contactFax}}}">{{{contactFax}}}</a>
                    </div>
                    {{/if}}
                </div>
            </div>
            {{/if}}
        </div>
    </div>
</div>

{{!-- Technical details headline --}}
<div class="layout-100-headline--fixed">
    <h2 class="ld-layout-item__wrapper">{{{translations.details}}}</h2>
</div>

{{!-- Technical details of the truck --}}
<div class="layout-article--centered">
    <div class="ld-layout-item__wrapper">
        <div class="table-responsive">
            <table class="table--two-col">
                <tbody>
                    {{#each details}}
                    {{#if this.value}}
                    <tr>
                        <td>{{{this.name}}}</td>
                        <td>{{{this.value}}}</td>
                    </tr>
                    {{/if}}
                    {{#if this.isChecked}}
                    <tr>
                        <td>{{{this.name}}}</td>
                        <td><span class="icon icon-LMHIconcheckmarkblack"></span></td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>

{{!-- Buttons for quotation, purchase and rental --}}
<div class="layout-100--fixed">
    <div class="ld-layout-item__wrapper">
        <div class="inline-button-row inline-button-row--stretch inline-button-row--max inline-button-row--middle">
            {{#if quoteURL}}
            <a href="{{{quoteURL}}}&offerType=used"
                    class="btn__link"
                    data-add-to-cart="true"
                    data-product-id="productpage_product"
                    data-product-title="{{{name}}}"
                    data-product-image="{{{imageThumbnailURLs.[0]}}}"
                    data-product-price="{{{formatCurrency price translations.currencySign}}}"
                    data-quote-type="used"
                    >
                <div class="btn stretch btn--primary btn--action">{{{translations.getAQuote}}}</div>
            </a>
            {{/if}}
            
            {{#if getTruckNewURL}}
            <a href="{{{getTruckNewURL}}}" class="btn__link">
                <div class="btn stretch">{{{translations.getTruckNew}}}</div>
            </a>
            {{/if}}
            {{#if rentThisTruckURL}}
            <a href="{{{rentThisTruckURL}}}" class="btn__link">
                <div class="btn stretch">{{{translations.rentThisTruck}}}</div>
            </a>
            {{/if}}
        </div>
    </div>
</div>

<div class="modal-dialog-content zoom-image" id="modal-dialog-zoom-image-used-product-stage">
    <div class="media__wrapper">
        <div class="media-browser lightbox">
            <div class="media-browser__master--wrapper">
                <div class="media-browser__master slick-slider" data-related-id="#maincarousel" id="slick_lightbox">
                    {{!-- 1. Slides --}}
                    {{#each imageURLs}}
                    <div class="media-browser__item" tabIndex="-1" role="option">
                        <div class="image-wrapper image-wrapper-16x9" data-aos="zoom-in"
                            href="#notused">
                            <img src="{{{this}}}" alt="{{{imageAltText}}}">
                        </div>
                    </div>
                    {{/each}}
                </div>

                {{!-- 2. Buttons l/r --}}
                <div class="carousel-button-wrapper">
                    <span>1 / 2</span>
                    <button type="button" class="btn btn--carousel-next btn--icon">
                        <span class="icon icon-LMHIconrightblack"></span>
                    </button>
                    <button type="button" class="btn btn--carousel-prev btn--icon">
                        <span class="icon icon-LMHIconleftblack"></span>
                    </button>
                </div>
            </div>

            {{!-- 3. Thumbnails --}}
            <div class="media-browser__navigation" data-scrollable="container" data-scrollable-direction="horizontal">
                {{#each imageThumbnailURLs}}
                <div class="media-browser__item">
                    <a href="#">
                        <div class="image-wrapper image-wrapper-16x9">
                            <img src="{{{this}}}" alt="{{{imageAltText}}}">
                        </div>
                        <span class="image-wrapper__media-icon"></span>
                    </a>
                </div>
                {{/each}}
            </div>

            {{!-- 4. Buttons u/d --}}
            <div class="carousel-button-wrapper--scroll">
                <div class="overflow-top">
                    <button class="btn btn--carousel-prev btn--icon" data-scrollable="btn-prev">
                        <span class="icon icon-LMHIconupblack"></span>
                    </button>
                </div>
                <div class="overflow-bottom">
                    <button class="btn btn-carousel--next btn--icon" data-scrollable="btn-next">
                        <span class="icon icon-LMHIcondownblack"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{!-- TODO related-content --}}