Untitled

<template data-sly-template.expandedModelcard="${@ properties, model}">
    <div class="ds2-electric-range__driving-profile-range">
        <span class="expanded-model-card__headline">${'electricRangeContent.modelCard.drivingProfile' @ i18n}</span>
        <div class="electric-range-slider">
            <input type="range" class="electric-range-slider__slider" role="slider" aria-valuetext="${'electricRangeContent.modelCard.efficient' @ i18n}" aria-label="${'electricRangeContent.modelCard.drivingProfile' @ i18n}" step="1" min="1" max="5"></input>
            <div class="electric-range-slider__custom-track">
                <span class="custom-track-left"></span>
                <span class="custom-track-right"></span>
            </div>
            <div class="electric-range-slider__legend">
                <span class="electric-range-slider__legend--left">${'electricRangeContent.modelCard.efficient' @ i18n}</span>
                <span class="electric-range-slider__legend--center">${'electricRangeContent.modelCard.moderate' @ i18n}</span>
                <span class="electric-range-slider__legend--right">${'electricRangeContent.modelCard.sporty' @ i18n}</span>
            </div>
        </div>
    </div>
    <div class="ds2-electric-range__temperature-range">
        <span class="expanded-model-card__headline">${'electricRangeContent.modelCard.travelCondition' @ i18n}</span>
        <span class="expanded-model-card__subheadline">${'electricRangeContent.modelCard.outsideTemperature' @ i18n}</span>
        <div class="electric-range-slider">
            <output class="electric-range-slider__bubble"></output>
            <sly data-sly-set.outsideTemperature="${'electricRangeContent.modelCard.outsideTemperature' @ i18n}"/>
            <sly data-sly-set.minTemperatureLabel="${'electricRangeContent.modelCard.minTemperature' @ i18n}"/>
            <sly data-sly-set.maxTemperatureLabel="${'electricRangeContent.modelCard.maxTemperature' @ i18n}"/>
            <sly data-sly-set.degrees="${'electricRangeContent.modelCard.degrees' @ i18n}"/>
            <sly data-sly-set.minTemperature="-30"/>
            <sly data-sly-set.maxTemperature="45"/>
            <input type="range" class="electric-range-slider__slider" aria-label="${outsideTemperature} ${minTemperatureLabel} ${minTemperature} ${maxTemperatureLabel} ${maxTemperature} ${degrees}" step="5" min="${minTemperature}" max="${maxTemperature}"></input>
            <div class="electric-range-slider__custom-track">
                <span class="custom-track-left"></span>
                <span class="custom-track-right"></span>
            </div>
            <div class="electric-range-slider__legend">
                <span class="electric-range-slider__legend--left">${minTemperature}°</span>
                <span class="electric-range-slider__legend--right">${maxTemperature}°</span>
            </div>
        </div>
    </div>
    <sly data-sly-use.switch="/apps/digitals2/general/components/basecomponent/switch.html"/>
    <div class="ds2-electric-range__switch-wrapper">
        <sly
        data-sly-test.ariaLabel="${'electricRangeContent.modelCard.aircondition' @ i18n}"
        data-sly-call="${switch.switch@ name='airconditioning',class='ds2-electric-range__switch',ariaLabel=ariaLabel}"/>
        <label for="airconditioning" class="expanded-model-card__switch-label">${'electricRangeContent.modelCard.aircondition' @ i18n}</label>
    </div>
    <div class="ds2-electric-range__switch-wrapper">
        <sly
        data-sly-test.ariaLabel="${'electricRangeContent.modelCard.precondition' @ i18n}"
        data-sly-call="${switch.switch@ name='preconditioning',class='ds2-electric-range__switch',ariaLabel=ariaLabel}"/>
        <label for="preconditioning" class="expanded-model-card__switch-label">${'electricRangeContent.modelCard.precondition' @ i18n}</label>
    </div>
    <!--/* CTA button */-->
    <sly data-sly-test="${!properties.disableConLink}">
        <a
            class="ds2-font-clickable ds2-electric-range__model-card-cta button ds2-electric-range__con-button"
            tabindex="-1"
            data-con-link="${model.cpLinkListUrl}"
            data-sly-test.ctaEvent="tr > CTA (${model.conButtonText})"
            data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                trackingEventName='tr > interactions',
                eventAction='internal click',
                eventEffect=ctaEvent,
                element='Button'
            }"
            data-sly-attribute="${trackingEvent.trackingMetadata}">
            <span tabindex="-1">${model.conButtonText}</span>
        </a>
    </sly>
</template>
 <!--/* selected model card (Mobile) */-->
<template data-sly-template.mobileSelectedCar="${@ properties}">
    <div class="ds2-electric-range__model-card-selected-car">
        <div class="ds2-electric-range__layer-open" tabindex="0">
            <div class="ds2-electric-range__arrow"></div>
            <b><span class="ds2-font-xs">${'electricRangeContent.modelCard.changeModel' @ i18n}</span></b>
        </div>
    </div>
</template>
 <!--/* full size layer for car selection (Mobile) */-->
<template data-sly-template.fullSizeLayer="${@ properties}">
    <div class="ds2-electric-range__layer">
        <div class="ds2-electric-range__layer-header">
            <span class="ds2-font-xs">${'electricRangeContent.modelCard.selectModel' @ i18n}</span>
            <div class="ds2-electric-range__layer-close"></div>
        </div>
        <ul class="ds2-electric-range__layer-track" role="tablist">
            <sly data-sly-use.model="com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.ElectricRangeModel"
            data-sly-use.mapSettings="com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.MapSettings"
            data-sly-use.imagelib="srcsettemplate.html" data-sly-unwrap>
                <sly data-sly-list.navigationItem="${model.modelNavigationItems}">
                    <sly data-sly-list.technicalData="${model.models[navigationItem.labelCode]}">
                        <li class="ds2-electric-range__layer-item"
                            role="tab"
                            data-map-range="{'minRange':'${technicalData.minRange}','maxRange':'${technicalData.maxRange}', 'hybrid':false}"
                            data-model-range="${technicalData.product.attributes.internalCode}"
                            data-product-id="${technicalData.product.productInfo.productID}"
                            data-tracking-product="${technicalData.productJson}"
                            data-solution-specific="${technicalData.solutionSpecificJson}"
                            data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                                trackingEventName='tr > interactions',
                                eventAction='open content',
                                eventEffect='tr > model card view'
                            }"
                            data-sly-attribute="${trackingEvent.trackingMetadata}"
                        >
                            <!--/* model card */-->
                            <div class="ds2-electric-range__model-card">
                                <!--/* model image */-->
                                <sly
                                    data-sly-test.modelCode="${technicalData.originalCode ? technicalData.originalCode : technicalData.code}"
                                    data-sly-use.cosyImage="${'com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.ElectricRangeCosyImageModel' @ brandName=technicalData.brand, code=modelCode}"
                                    data-sly-call="${imagelib.cosyimage @ configName='electricrange', cosyImageParams=cosyImage.cosyUrlParams, size='M', class='ds2-electric-range__model-card-img', overwriteDefaultCosyParams=true, useWebp=true}"></sly>
                                <!--/* elements that can be sticky */-->
                                <div class="ds2-electric-range__model-card-base">
                                <!--/* electric icon */-->
                                    <div class="ds2-electric-range-cosyImage__container">
                                        <span class="ds2-electric-range__vehicle-icon-BEVE"></span>
                                    </div>
                                    <!--/* model name */-->
                                    <h4 class="ds2-font-xs ds2-electric-range__model-card-title">${technicalData.name}</h4>
                                    <div class="ds2-font-xxs ds2-electric-range__model-card-range" 
                                    data-sly-attribute.estimatedRange="${'electricRangeContent.modelCard.estimatedRange' @ i18n}" 
                                    data-sly-attribute.electricRangeUnit="${technicalData.technicalDataMin.electric.electricRangeUnit}">
                                <b><span data-sly-test="${technicalData.minRange != technicalData.maxRange}">${technicalData.formattedMinRange} - </span>
                                    ${technicalData.formattedMaxRange}
                                    ${technicalData.technicalDataMin.electric.electricRangeUnit} ${'electricRangeContent.modelCard.measurementCycle' @ i18n}
                                    <span class="ds2-electric-range__model-card-range-emmissions">0 ${technicalData.technicalDataMin.consumptionMin.co2Unit} CO2</span>
                                </b>
                            </div>
                            </div>
                            </div>
                        </li>
                    </sly>
                </sly>
            </sly>
        </ul>
    </div>
</template>
<div>
    <sly data-sly-call="${fullSizeLayer @ properties=properties}" ></sly>
</div>
<sly data-sly-use.model="com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.ElectricRangeModel"
     data-sly-use.mapSettings="com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.MapSettings"
     data-sly-use.imagelib="srcsettemplate.html" data-sly-unwrap>
    <sly data-sly-test.invalid="${!model.hasValidData}">
        <div data-sly-test="${wcmmode.edit}" class="ds2-author-alert-box ds2-author-notice">
            Automatic Product Data couldn't be retrieved.
            <div>
                This can be caused by:
                <ul>
                    <li>Product Data Hub (UCP) not available in the current market (This happens when the market doesn't have CON or H5VCO)</li>
                    <li>Temporary outage in Product Data Hub (UCP)</li>
                </ul>
            </div>
        </div>
        <!--/* Hide parent element when data is unavailable in publish mode */-->
        <style data-sly-test="${!wcmmode.edit}">
            .ds2-electric-range {
                display: none;
            }
        </style>
    </sly>
    <div class="ds2-electric-range__content"
         data-sly-test="${model.hasValidData && model.modelsCount > 0}"
         data-itemcount="${model.modelsCount}">
         <div class="ds2-electric-range__model-card-selected hide-for-tablet-desktop">
                <sly data-sly-call="${mobileSelectedCar @ properties=properties}" ></sly>
         </div>
         <!--/* model card slider */-->
        <div class="ds2-electric-range__slider-wrapper hide-for-mobile">
            <div class="ds2-electric-range__slider is-first is-last">
                <div data-sly-test="${model.modelsCount > 1}" class="ds2-electric-range__slider-buttons">
                    <button
                        data-action="prev"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='open navigation',
                            eventEffect='tr > carousel left clicked',
                            element='Button'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"
                    >
                    <i class="ds2-icon ds2-icon ds2-icon--arrow-big-l-white ds2-icon--bg"></i>
                    </button>
                    <button
                        data-action="next"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='open navigation',
                            eventEffect='tr > carousel right clicked',
                            element='Button'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"
                    >
                    <i class="ds2-icon ds2-icon ds2-icon--arrow-big-r-white ds2-icon--bg"></i>
                    </button>
                </div>
                <ul class="ds2-electric-range__slider-track">
                    <sly data-sly-list.navigationItem="${model.modelNavigationItems}">
                        <sly data-sly-list.technicalData="${model.models[navigationItem.labelCode]}">
                            <li class="ds2-electric-range__slider-item"
                                data-map-range="{'minRange':'${technicalData.minRange}','maxRange':'${technicalData.maxRange}', 'hybrid':false, 'rangeUnit':'${mapSettings.rangeUnit}'}"
                                data-model-range="${technicalData.product.attributes.internalCode}"
                                data-product-id="${technicalData.product.productInfo.productID}"
                                data-tracking-product="${technicalData.productJson}"
                                data-solution-specific="${technicalData.solutionSpecificJson}"
                                data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                                    trackingEventName='tr > interactions',
                                    eventAction='open content',
                                    eventEffect='tr > model card view'
                                }"
                                data-sly-attribute="${trackingEvent.trackingMetadata}"
                            >
                                <!--/* model card */-->
                                <div class="ds2-electric-range__model-card">
                                    <!--/* model image */-->
                                    <sly
                                        data-sly-test.modelCode="${technicalData.originalCode ? technicalData.originalCode : technicalData.code}"
                                        data-sly-use.cosyImage="${'com.bmw.aems2.digitals2.pdhcomponents.electricrange.model.ElectricRangeCosyImageModel' @ brandName=technicalData.brand, code=modelCode}"
                                        data-sly-call="${imagelib.cosyimage @ configName='electricrange', cosyImageParams=cosyImage.cosyUrlParams, size='M', class='ds2-electric-range__model-card-img', overwriteDefaultCosyParams=true, useWebp=true}"></sly>
                                    <!--/* elements that can be sticky */-->
                                    <div class="ds2-electric-range__model-card-base">
                                       <!--/* electric icon */-->
                                        <div class="ds2-electric-range-cosyImage__container">
                                            <span class="ds2-electric-range__vehicle-icon-BEVE"></span>
                                        </div>
                                         <!--/* model name */-->
                                        <h4 class="ds2-font-m ds2-electric-range__model-card-title">${technicalData.name}</h4>
                                        <!--/* range min / max value + unit */-->
                                        <div class="ds2-font-xxs ds2-electric-range__model-card-range" 
                                             data-sly-attribute.estimatedRange="${'electricRangeContent.modelCard.estimatedRange' @ i18n}" 
                                             data-sly-attribute.electricRangeUnit="${technicalData.technicalDataMin.electric.electricRangeUnit}">
                                            <b><span data-sly-test="${technicalData.minRange != technicalData.maxRange}">${technicalData.formattedMinRange} - </span>
                                                ${technicalData.formattedMaxRange}
                                                ${mapSettings.rangeUnit} ${'electricRangeContent.modelCard.measurementCycle' @ i18n}
                                                <span class="ds2-electric-range__model-card-range-emmissions">0 ${technicalData.technicalDataMin.consumptionMin.co2Unit} CO2</span>
                                            </b>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </sly>
                    </sly>
                </ul>
            </div>
        </div>
        
        <!--/* map container */-->
        <div class="ds2-electric-range__map-wrapper"
        data-used-map="${mapSettings.usedMap}"
             data-maps-api-url="${properties.latitude && properties.longitude ? mapSettings.mapsApiUrl : ''}"
             data-latitude="${properties.latitude}"
             data-longitude="${properties.longitude}"
             data-range-unit="${mapSettings.rangeUnit}"
             data-location-services="${mapSettings.locationServices}"
             data-reverse-geocoding="${mapSettings.reverseGeocoding}"
             >

            <!--/*  electric range expanded model card */-->
            <div class="ds2-electric-range__expanded-model-card hide-for-mobile">
                <sly data-sly-call="${expandedModelcard @ properties=properties}" />
            </div>

            <!--/*  map filled by js with map provider api */-->
            <div class="ds2-electric-range__map"></div>

            <!--/* custom controls and inputs wrapper */-->
            <div class="ds2-electric-range__map-controls">
                <!--/* custom search inputs */-->
                <div class="ds2-electric-range__map-search">
                    <!--/* display/hide charging stations button */-->
                    <button
                        data-action="display-charging-stations"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='toggle',
                            eventEffect='tr > charging station toggle',
                            element='Button'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"><i tabindex="-1" class="icon-charging-station"
                    ></i></button>
                    <label>
                        <!--/* input field */-->
                        <input
                            data-action="search"
                            placeholder="${'SEARCH_BY_LOCATION' @ i18n}"
                            type="text"
                            class="ds2-font-s"
                            data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                                trackingEventName='tr > search',
                                eventAction='search',
                                eventEffect='tr > city name'
                            }"
                            data-sly-attribute="${trackingEvent.trackingMetadata}"/>
                        <!--/* blue bar */-->
                        <span></span>
                    </label>
                    <!--/* suggestion container */-->
                    <ul class="ds2-electric-range__map-search-suggest"></ul>
                    <!--/* locate me button */-->
                    <button
                        data-sly-test="${mapSettings.locationServices}"
                        data-action="locate-me"
                        data-status="0"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='internal click',
                            eventEffect='tr > locate me button',
                            element='Button'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}">
                        <i tabindex="-1" class="icon-loader"></i>
                        <i tabindex="-1" class="icon-geolocation"></i>
                        <i tabindex="-1" class="icon-global_hint"></i>
                    </button>
                </div>
                <!--/* custom map controls */-->
                <div class="ds2-electric-range__map-zoom">
                    <button
                        data-action="zoom-in"
                        aria-label="+"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='zoom',
                            eventEffect='tr > zoom in'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"><span tabindex="-1"></span></button>
                    <button
                        data-action="zoom-out"
                        aria-label="-"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > interactions',
                            eventAction='zoom',
                            eventEffect='tr > zoom out'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"><span tabindex="-1"></span></button>
                </div>
            </div>

            <!--/* custom user feedback wrapper */-->
            <div class="ds2-electric-range__map-feedback">
                <!--/* custom user messages outputs */-->
                <div class="ds2-electric-range__map-messages">
                    <output
                        type="text"
                        class="ds2-font-s"
                        data-loading="${'DLO2_LOADING' @ i18n}"
                        data-service-error="${'DLO_Error_Message' @ i18n}"
                        data-geo-denied="${'GEOLOCATION_PERMISSION_DENIED' @ i18n}"
                        data-geo-timeout="${'GEOLOCATION_TIMEOUT' @ i18n}"
                        data-geo-unavailable="${'GEOLOCATION_UNAVAILABLE' @ i18n}"
                        data-sly-use.trackingEvent="${'com.bmw.aems2.digitals2.tracking.parcomponents.EventInfoJSONRenderer' @
                            trackingEventName='tr > errors',
                            eventAction='selection',
                            eventEffect='tr > error message [message] appeared'
                        }"
                        data-sly-attribute="${trackingEvent.trackingMetadata}"></output>
                </div>
            </div>
        </div>

        <div class="ds2-electric-range__expanded-model-card hide-for-tablet-desktop">
            <sly data-sly-call="${expandedModelcard @ properties=properties, model=model}" />
        </div>

        <!--/* hint disclaimer */-->
        <div data-sly-test.hintDisclaimer="${properties.hintDisclaimer}"
             class="ds2-electric-range__map-disclaimer ds2-cms-output">${hintDisclaimer @ context='html'}</div>

        <!--/* market specific disclaimer */-->
        <div data-sly-test.marketSpecificDisclaimer="${properties.marketSpecificDisclaimer}"
             class="ds2-electric-range__map-disclaimer ds2-cms-output">${marketSpecificDisclaimer @ context='html'}</div>

         <!--/* map disclaimer*/-->
        <sly data-sly-test.mapDisclaimer="${'DLO_Maps_Disclaimer_Google' @ i18n}"></sly>
        <div data-sly-test="${mapSettings.usedMap == 'google' && mapDisclaimer}"
            class="ds2-electric-range__map-disclaimer ds2-cms-output"><p>${mapDisclaimer @ context='html'}</p></div>

        <!--/* wltp disclaimer */-->
        <ul data-sly-test="${model.wltpConfiguration.wltpEnabled}"
            class="ds2-electric-range__disclaimer">

            <sly data-sly-list.wltpDataItem="${model.wltpDataItems}">
                <li class="ds2-electric-range__disclaimer-item"
                    data-loader="amdLoader"
                    data-component-path="ds2-legal-accordion">

                    <sly data-sly-list.wltpProperty="${wltpDataItem}">
                        <sly data-sly-test.mainProperty="${wltpProperty.mainProperty}"
                             data-sly-test.extendedProperties="${wltpProperty.extendedProperties}"></sly>

                        <div
                            class="ds2-legal-accordion__item ${extendedProperties ? 'ds2-legal-accordion__item--with-arrow' : ''}">
                            <div class="ds2-legal-accordion__header" tabindex="${extendedProperties ? '0' : ''}">
                                <i data-sly-test="${extendedProperties}" class="ds2-legal-accordion__arrow icon-arrow-m-down"></i>
                                <span>${mainProperty}: ${mainProperty.values}</span>
                            </div>

                            <table data-sly-list.extendedProperty="${wltpProperty.extendedProperties}"
                                   class="ds2-legal-accordion__content">
                                <tr>
                                    <td>${extendedProperty}</td>
                                    <td>${extendedProperty.values}</td>
                                </tr>
                            </table>
                        </div>

                    </sly>
                </li>
            </sly>
        </ul>
    </div>

    <!--/* show only in "author" */-->
    <sly data-sly-test="${wcmmode.edit}">
        <table class="ds2-electric-range__author-table" tabindex="0">
            <thead>
            <tr><th>Property</th><th>Value</th></tr>
            </thead>
            <tbody>
            <tr><td>Models</td><td>${model.modelsCount}</td></tr>
            <tr><td>Coordinates</td><td>${properties.latitude} / ${properties.longitude}</td></tr>
            </tbody>
        </table>
        <table class="ds2-electric-range__author-table" tabindex="0">
            <thead>
            <tr><th>Settings from DLO</th><th></th></tr>
            </thead>
            <tbody>
            <tr><td>Used Map</td><td>${mapSettings.usedMap}</td></tr>
            <tr><td>Maps Api Url</td><td>${mapSettings.mapsApiUrl}</td></tr>
            <tr><td>Language</td><td>${mapSettings.language}</td></tr>
            <tr><td>Range Unit</td><td>${mapSettings.rangeUnit}</td></tr>
            <tr><td>Location Services</td><td>${mapSettings.locationServices}</td></tr>
            <tr><td>Reverse Geocoding</td><td>${mapSettings.reverseGeocoding}</td></tr>
            </tbody>
        </table>
        <table class="ds2-electric-range__author-table" tabindex="0">
            <thead>
            <tr><th>WLTP Settings</th><th></th></tr>
            </thead>
            <tbody>
            <tr><td>Enable WLTP</td><td>${model.wltpConfiguration.wltpEnabled}</td></tr>
            <tr><td>Worst case WLTP scenario</td><td>${model.wltpConfiguration.wltpWorstCaseScenarioEnabled}</td></tr>
            <tr><td>Consumption WLTP Display Type</td><td>${model.wltpConfiguration.wltpDisplayType.consumption}</td></tr>
            <tr><td>Emmissions WLTP Display Type</td><td>${model.wltpConfiguration.wltpDisplayType.emission}</td></tr>
            </tbody>
        </table>
        <table class="ds2-electric-range__author-table" tabindex="0">
            <thead>
            <tr><th>i18n Key</th><th>i18n Message</th></tr>
            </thead>
            <tbody>
            <tr><td>electricRangeContent.modelCard.showRangeOnMap</td><td>${'electricRangeContent.modelCard.showRangeOnMap' @ i18n}</td></tr>
            <tr><td>electricRangeContent.modelCard.showDetails</td><td>${'electricRangeContent.modelCard.showDetails' @ i18n}</td></tr>
            <tr><td>electricRangeContent.modelCard.travelCondition</td><td>${'electricRangeContent.modelCard.travelCondition' @ i18n}</td></tr>
            <tr><td>electricRangeContent.modelCard.outsideTemperature</td><td>${'electricRangeContent.modelCard.outsideTemperature' @ i18n}</td></tr>
            <tr><td>DLO_Maps_Disclaimer_Google</td><td>${'DLO_Maps_Disclaimer_Google' @ i18n}</td></tr>
            <tr><td>DLO2_LOADING</td><td>${'DLO2_LOADING' @ i18n}</td></tr>
            <tr><td>DLO_Error_Message</td><td>${'DLO_Error_Message' @ i18n}</td></tr>
            <tr><td>SEARCH_BY_LOCATION</td><td>${'SEARCH_BY_LOCATION' @ i18n}</td></tr>
            <tr><td>GEOLOCATION_PERMISSION_DENIED</td><td>${'GEOLOCATION_PERMISSION_DENIED' @ i18n}</td></tr>
            <tr><td>GEOLOCATION_TIMEOUT</td><td>${'GEOLOCATION_TIMEOUT' @ i18n}</td></tr>
            <tr><td>GEOLOCATION_UNAVAILABLE</td><td>${'GEOLOCATION_UNAVAILABLE' @ i18n}</td></tr>

            <!--/* WLTP Properties */-->
            <tr><td>pdh.electricConsumptionCombinedWltp</td><td>${"pdh.electricConsumptionCombinedWltp" @ i18n}</td></tr>
            <tr><td>pdh.pureElectricRangeCombinedWltp</td><td>${"pdh.pureElectricRangeCombinedWltp" @ i18n}</td></tr>
            <tr><td>pdh.fuelConsumptionChargeSustainingCombinedWltp</td><td>${"pdh.fuelConsumptionChargeSustainingCombinedWltp" @ i18n}</td></tr>
            <tr><td>pdh.co2ChargeSustainingCombinedWltp</td><td>${"pdh.co2ChargeSustainingCombinedWltp" @ i18n}</td></tr>
            <tr><td>pdh.equivalentAllElectricRangeCombinedWltp</td><td>${"pdh.equivalentAllElectricRangeCombinedWltp" @ i18n}</td></tr>
            <tr><td>pdh.low</td><td>${'pdh.low' @ i18n}</td></tr>
            <tr><td>pdh.mid</td><td>${'pdh.mid' @ i18n}</td></tr>
            <tr><td>pdh.high</td><td>${'pdh.high' @ i18n}</td></tr>
            <tr><td>pdh.extra</td><td>${'pdh.extra' @ i18n}</td></tr>
            <tr><td>pdh.city</td><td>${'pdh.city' @ i18n}</td></tr>
            </tbody>
        </table>
    </sly>
</sly>