<header class="tui-fact-heading tui-hotel-heading">
  <h2>{{factsWeatherHeading}}</h2>
  <a href="{{siteUrl}}" class="dp-sub-page open-tui-modal" data-id="weather">
    {{>icon_svg name='temp'}}
    {{factsShowDetailedWeatherLinkText}}
  </a>
</header>
{{#if displayWeather}}
  {{#if isHotelPage}}<div class="weather-months-container tui-hotel-content">{{/if}}
    <div class="main-carousel weather-carousel">
      {{#each months}}
        <div  class="carousel-cell{{#compare @index '==' ../selectedMonth}} is-initial-select{{/compare}}">
          <div class="weather-item-container">
            <div class="flexbox-row months-row">
              <span class="prev-month text-capitalize">{{prevMonth}}</span>
              <div>
                <span class="text-2">{{../monthText}}</span>
                <h3 class="text-capitalize">{{month}}</h3>
              </div>
              <span class="next-month text-capitalize">{{nextMonth}}</span>
            </div>

            <ul class="tui-weather-items">
            {{#if dayTemperature}}
              <li class="tui-facts-box-item day">
                {{>icon_svg name='sun'}}
                <div>
                  <span class="h2">{{dayTemperature}}&deg;</span>
                  <p class="text-2">{{../dayText}}</p>
                </div>
              </li>
            {{else}}
              <li class="tui-facts-box-item empty-state">
                {{dayTempMissingText}}
              </li>
            {{/if}}
            {{#if nightTemperature}}
              <li class="tui-facts-box-item night">
                {{>icon_svg name='moon'}}
                <div>
                  <span class="h2">{{nightTemperature}}&deg;</span>
                  <p class="text-2">{{../nightText}}</p>
                </div>
              </li>
            {{else}}
              <li class="tui-facts-box-item empty-state">
                {{nightTempMissingText}}
              </li>
            {{/if}}
            {{#if waterTemperature}}
              <li class="tui-facts-box-item water">
                {{>icon_svg name='water'}}
                <div>
                  <span class="h2">{{waterTemperature}}&deg;</span>
                  <p class="text-2">{{../waterText}}</p>
                </div>
              </li>
            {{else}}
              <li class="tui-facts-box-item empty-state">
                {{waterTempMissingText}}
              </li>
            {{/if}}
            {{#if numberOfRainFreeDays}}
              <li class="tui-facts-box-item rain">
                {{>icon_svg name='cloud-rain'}}
                <div>
                  <span class="h2">{{numberOfRainFreeDays}}</span>
                  <p class="text-2">{{../rainFreeDaysText}}</p>
                </div>
              </li>
            {{else}}
              <li class="tui-facts-box-item empty-state">
                {{reanFreeDaysMissingText}}
              </li>
            {{/if}}
          </ul>
        </div>
      </div>
      {{/each}}
      </div>
  {{#if isHotelPage}}</div>{{/if}}
{{else}}
    <div class="empty-state">
      <p>
        {{infoText}}<br>
        <a href="{{siteUrl}}" class="open-tui-modal" data-id="weather">{{weatherEmptyStateLinkText}}</a>
      </p>
    </div>
{{/if}}
