Cp Essential Information Card

<div class="essential-information-card__container essential-information-card--celsius" data-module="essentialInformation" data-settings-advice="{{noLocation.settingsAdvice}}">
    {{#if location.longitude}}
        <div class="essential-information-card__information-wrapper js-essential-card-info">
            <div class="essential-information-card__header-container">
                <h2 class="essential-information-card__location">{{location.name}}</h2>
                <div class="essential-information-card__dropdown">
                    <button class="essential-information-card__dropdown-button js-options-button" role="button" aria-label="{{dropdown.buttonLabel}}"><span class="essential-information-card__dropdown-label">{{dropdown.buttonLabel}}</span></button>
                    <ul class="essential-information-card__dropdown-menu">
                        <li class="essential-information-card__dropdown-menu-heading">{{dropdown.heading}}</li>
                        <li class="essential-information-card__dropdown-menu-item essential-information-card__dropdown-menu-item--celsius js-select-temp-display" data-temp-setting="celsius">{{dropdown.option1}}</li>
                        <li class="essential-information-card__dropdown-menu-item essential-information-card__dropdown-menu-item--fahrenheit js-select-temp-display" data-temp-setting="fahrenheit">{{dropdown.option2}}</li>
                        <li class="essential-information-card__dropdown-menu-link">{{{dropdown.linkText}}}</li>
                    </ul>
                </div>
            </div>
            <div class="essential-information-card__tabs-container">
                <ul class="essential-information-card__tabs">
                    {{#each tabs}}
                        <li class="essential-information-card__tabs-item{{#ifEquals @index 0}} js-morning-tab{{/ifEquals}} js-weather-tab-selector {{#if selected}}active{{/if}}" data-tab-id="{{@index}}">{{title}}</li>
                    {{/each}}
                </ul>
                <span class="essential-information-card__tabs-indicator js-tab-indicator"></span>
            </div>
            <div class="essential-information-card__tab-content-container">
                {{#each tabs}}
                    <div class="essential-information-card__tab-content js-weather-tab {{#if selected}}active{{/if}}" data-tab-id="{{@index}}">
                        <div class="essential-information-card__weather-details">
                            <div class="essential-information-card__weather-details-icon">{{{weather.icon}}}</div>
                            <div class="essential-information-card__weather-details-temp">
                                <div class="essential-information-card__average-weather">
                                    <span class="essential-information-card__temp-celsius">{{temperature.averageCelsius}}</span>
                                    <span class="essential-information-card__temp-fahrenheit">{{temperature.averageFahrenheit}}</span>
                                </div>
                                <div class="essential-information-card__range-weather">
                                    <span class="essential-information-card__temp-celsius">{{temperature.rangeCelsius}}</span>
                                    <span class="essential-information-card__temp-fahrenheit">{{temperature.rangeFahrenheit}}</span>
                                </div>
                            </div>
                            <div class="essential-information-card__weather-warning">
                                {{#if weatherWarning}}
                                    <button class="essential-information-card__weather-warning-button js-warning-button" aria-label="{{weatherWarning.title}}">
                                        {{{weatherWarning.icon}}}
                                    </button>
                                    <div class="essential-information-card__weather-warning-details">
                                        <span class="essential-information-card__weather-warning-title essential-information-card__weather-warning-title--{{weatherWarning.type}}">{{weatherWarning.title}}</span>
                                        <p class="essential-information-card__weather-warning-description">{{weatherWarning.description}}</p>
                                    </div>
                                {{/if}}
                            </div>
                        </div>
                        <div class="essential-information-card__weather-description"><span>{{weather.text}}</span></div>
                    </div>
                {{/each}}
            </div>
            {{#if information}}
                <div class="essential-information-card__services js-services-list">
                    <div class="essential-information-card__services-list-container">
                        {{#each information.fields}}
                            <div class="essential-information-card__field-group">
                                <div class="essential-information-card__field-group-info">
                                    {{#if heading}}
                                        <h3 class="essential-information-card__field-group-heading">{{heading}}</h3>
                                    {{/if}}
                                    {{#if title}}
                                        <span class="essential-information-card__field-group-title">{{title}}</span>
                                    {{/if}}
                                    {{#if subText}}
                                        <span class="essential-information-card__field-group-subtext">{{{subText}}}</span>
                                    {{/if}}
                                </div>
                                <div class="essential-information-card__field-group-value">
                                    {{#if content}}
                                        {{{content}}}
                                    {{/if}}
                                    {{#if link}}
                                        <a href="{{#if link.url}}{{link.url}}{{else}}#{{/if}}" class="essential-information-card__field-group-link">{{link.text}}</a>
                                    {{/if}}
                                </div>
                            </div>
                        {{/each}}
                    </div>
                    <button class="essential-information-card__services-toggle js-services-toggle">
                        <span class="essential-information-card__services-toggle--reveal">{{information.toggleRevealText}}</span>
                        <span class="essential-information-card__services-toggle--hide">{{information.toggleHideText}}</span>
                    </button>
                </div>
            {{/if}}
        </div>
    {{else}}
        <div class="essential-information-card__no-location-wrapper js-essential-card-no-location">
            <div class="essential-information-card__icon">{{{noLocation.icon}}}</div>
            <h2 class="essential-information-card__heading">{{noLocation.heading}}</h2>
            <p class="essential-information-card__description">{{noLocation.description}}</p>
            <button class="essential-information-card__button js-request-location-button">{{noLocation.buttonText}}</button>
        </div>
    {{/if}}
</div>