<div class="forecast-section{{#if @first}} is-active{{/if}} js-forecast-section" data-show-location="{{showLocation}}" data-warning-title="{{weatherWarning.title}}" data-warning-subtitle="{{weatherWarning.subtitle}}" data-warning-type="{{weatherWarning.type}}" data-warning-icon="{{weatherWarning.icon}}" data-index="{{@index}}" {{#if isDefault}}data-is-default="true"{{/if}}>
    <div class="forecast-section__background">
        {{> @cp-medium-image backgroundResponsiveImage}}
    </div>
    <div class="forecast-section__inner">
        <div class="forecast-section__content">
            <div class="forecast-section__content-inner js-forecast-content">
                <h2 class="forecast-section__title">{{title}}</h2>
                {{#if subtitle}}<p class="forecast-section__subtitle">{{subtitle}}</p>{{/if}}
                    {{#if weather}}
                        <div class="forecast-section__main-forecast">
                            <div class="forecast-section__forecast-block forecast-section__forecast-block--weather">
                                <div class="forecast-section__icon">{{{weather.icon}}}</div>
                                <p class="forecast-section__text">{{weather.text}}</p>
                            </div>
                        {{#unless temperature}}</div>{{/unless}}
                    {{/if}}
                    {{#if temperature}}
                        {{#unless weather}}<div class="forecast-section__main-forecast">{{/unless}}
                            <div class="forecast-section__forecast-block forecast-section__forecast-block--temperature">
                                <p class="forecast-section__text">
                                    <span class="forecast-section__celsius">{{{temperature.averageCelsius}}}</span>
                                    <span class="forecast-section__fahrenheit">{{{temperature.averageFahrenheit}}}</span>
                                </p>
                                <p class="forecast-section__text">
                                    <span class="forecast-section__celsius">{{temperature.rangeCelsius}}</span>
                                    <span class="forecast-section__fahrenheit">{{{temperature.rangeFahrenheit}}}</span>
                                </p>
                            </div>
                        </div>
                    {{/if}}
                {{#if weekForecast}}
                    <div class="forecast-section__information{{#unless weather}}{{#unless temperature}} forecast-section__information--no-main-forecast{{/unless}}{{/unless}}">
                        {{#each weekForecast}}
                            <div class="forecast-section__forecast-block">
                                <div class="forecast-section__icon">{{{icon}}}</div>
                                <p class="forecast-section__text">{{text}}</p>
                                <p class="forecast-section__text">
                                    <span class="forecast-section__celsius">{{temperatureCelsius}}</span>
                                    <span class="forecast-section__fahrenheit">{{{temperatureFahrenheit}}}</span>
                                </p>
                            </div>
                        {{/each}}
                    </div>
                {{/if}}
                {{#if informationItems}}
                    <div class="forecast-section__information">
                        {{#each informationItems}}
                            <div class="forecast-section__forecast-block">
                                <div class="forecast-section__icon">{{{icon}}}</div>
                                <p class="forecast-section__text">{{text}}</p>
                            </div>
                        {{/each}}
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
</div>