<!--
  ~ Copyright (C) 2024 Xibo Signage Ltd
  ~
  ~ Xibo - Digital Signage - https://xibosignage.com
  ~
  ~ This file is part of Xibo.
  ~
  ~ Xibo is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU Affero General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License, or
  ~ any later version.
  ~
  ~ Xibo is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License
  ~ along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
  -->
<templates>
    <template>
        <id>weather_summary</id>
        <extends override="text" with="data.summary">text</extends>
        <title>Summary</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fa fa-font</icon>
        <startWidth>360</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>weather_location</id>
        <extends override="text" with="data.location">text</extends>
        <title>Location</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fa fa-map</icon>
        <startWidth>360</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>weather_temperature</id>
        <extends override="text" with="data.temperatureRound" escapeHtml="false">text</extends>
        <title>Temperature</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-thermometer-half</icon>
        <startWidth>150</startWidth>
        <startHeight>150</startHeight>
        <onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
    return '';
}

if (properties.data && properties.data.temperatureUnit) {
    var temperatureUnit = properties.data.temperatureUnit;

    if (String(value).includes('°' + temperatureUnit)) {
        return value;
    }

    return value + '<sup>°' + temperatureUnit + '</sup>';
}
        ]]></onElementParseData>
    </template>
    <template>
        <id>weather_min_temperature</id>
        <extends override="text" with="data.temperatureMinRound" escapeHtml="false">text</extends>
        <title>Min. Temperature</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-thermometer-empty</icon>
        <startWidth>150</startWidth>
        <startHeight>150</startHeight>
        <onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
    return '';
}

if (properties.data && properties.data.temperatureUnit) {
    var temperatureUnit = properties.data.temperatureUnit;

    if (String(value).includes('°' + temperatureUnit)) {
        return value;
    }

    return value + '<sup>°' + temperatureUnit + '</sup>';
}
        ]]></onElementParseData>
    </template>
    <template>
        <id>weather_max_temperature</id>
        <extends override="text" with="data.temperatureMaxRound" escapeHtml="false">text</extends>
        <title>Max. Temperature</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-thermometer-full</icon>
        <startWidth>150</startWidth>
        <startHeight>150</startHeight>
        <onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
    return '';
}

if (properties.data && properties.data.temperatureUnit) {
    var temperatureUnit = properties.data.temperatureUnit;

    if (String(value).includes('°' + temperatureUnit)) {
        return value;
    }

    return value + '<sup>°' + temperatureUnit + '</sup>';
}
        ]]></onElementParseData>
    </template>
    <template>
        <id>weather_humidity_percent</id>
        <extends override="text" with="data.humidityPercent" escapeHtml="false">text</extends>
        <title>Humidity Percent</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-percentage</icon>
        <startWidth>150</startWidth>
        <startHeight>150</startHeight>
        <onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
    return '';
}

if (String(value).includes('%')) {
    return value;
}

return value + '%';
        ]]></onElementParseData>
    </template>
    <template>
        <id>weather_icon</id>
        <title>Icon</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-sun</icon>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="fontColor" type="color">
                <title>Font Colour</title>
                <default>%THEME_COLOR%</default>
            </property>
            <property id="fontSize" type="number">
                <title>Font Size</title>
                <default>40</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fitToArea" type="checkbox">
                <title>Fit to selection</title>
                <helpText>Fit to selected area instead of using the font size?</helpText>
                <default>0</default>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="forecast-elements-weather-icon" style="text-align: center; width: 100%; height: 100%;">
    <i class="wi {{data.wicon}}" style="
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        {{#if fontColor }}color: {{fontColor}};{{/if}}
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    "></i>
</div>
        ]]></hbs>
        <onTemplateRender><![CDATA[
if (properties.fitToArea) {
    // Set target for the text
    properties.fitTarget = 'i.wi';

    // Set target for the text
    properties.isIcon = true;

    // Scale text to container
    $(target).find('.forecast-elements-weather-icon').xiboTextScaler(properties);
}
        ]]></onTemplateRender>
        </stencil>
        <assets>
            <asset id="weather-icons" type="path" mimeType="text/css" path="/modules/assets/forecastio/weather-icons.min.css"></asset>
            <asset id="weathericons-regular-webfont.eot" type="path" mimeType="application/vnd.ms-fontobject" path="/modules/assets/forecastio/weathericons-regular-webfont.eot"></asset>
            <asset id="weathericons-regular-webfont.svg" type="path" mimeType="image/svg+xml" path="/modules/assets/forecastio/weathericons-regular-webfont.svg"></asset>
            <asset id="weathericons-regular-webfont.ttf" type="path" mimeType="application/x-font-ttf" path="/modules/assets/forecastio/weathericons-regular-webfont.ttf"></asset>
            <asset id="weathericons-regular-webfont.woff" type="path" mimeType="application/font-woff" path="/modules/assets/forecastio/weathericons-regular-webfont.woff"></asset>
            <asset id="weathericons-regular-webfont.woff2" type="path" mimeType="application/font-woff2" path="/modules/assets/forecastio/weathericons-regular-webfont.woff2"></asset>
            <asset id="WeatherIcons-Regular.otf" type="path" mimeType="application/x-font-opentype" path="/modules/assets/forecastio/WeatherIcons-Regular.otf"></asset>
            <asset id="wi-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-cloudy.jpg"></asset>
            <asset id="wi-day-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-cloudy.jpg"></asset>
            <asset id="wi-day-sunny" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-sunny.jpg"></asset>
            <asset id="wi-fog" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-fog.jpg"></asset>
            <asset id="wi-hail" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-hail.jpg"></asset>
            <asset id="wi-night-clear" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-clear.jpg"></asset>
            <asset id="wi-night-partly-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-partly-cloudy.jpg"></asset>
            <asset id="wi-rain" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-rain.jpg"></asset>
            <asset id="wi-snow" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-snow.jpg"></asset>
            <asset id="wi-windy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-windy.jpg"></asset>
        </assets>
    </template>
    <template>
        <id>weather_wind_direction</id>
        <extends override="text" with="data.windDirection">text</extends>
        <title>Wind Direction</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-location-arrow</icon>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>weather_wind_speed</id>
        <extends override="text" with="data.windSpeed">text</extends>
        <title>Wind Speed</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-tachometer-alt</icon>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>weather_wind_speed_unit</id>
        <extends override="text" with="data.windSpeedUnit">text</extends>
        <title>Wind Speed Unit</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-wind</icon>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="useSlashForUnits" type="checkbox">
                <title>Use Slash for Units</title>
                <helpText>Use '/' instead of 'p' to represent units of measure (e.g., m/s instead of mps).</helpText>
                <default>0</default>
            </property>
        </properties>
        <onElementParseData><![CDATA[
// return empty string if there's no value
if (String(value).length === 0) {
    return '';
}

// check if useSlashForUnits has been checked
if (properties.useSlashForUnits && properties.useSlashForUnits == 1) {
    if (String(value) == 'MPH') {
        value = value.replace('MPH', 'M/H');
    } else if (String(value) == 'MPS') {
        value = value.replace('MPS', 'M/S');
    } else if (String(value) == 'KPH') {
        value = value.replace('KPH', 'K/H');
    }
}

return value;
        ]]></onElementParseData>
    </template>
    <template>
        <id>weather_attribution</id>
        <extends override="text" with="meta.Attribution">text</extends>
        <title>Attribution</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fa fa-font</icon>
        <startWidth>360</startWidth>
        <startHeight>100</startHeight>
        <onTemplateRender><![CDATA[
if (meta && meta.hasOwnProperty('Attribution')) {
    var $childElem = $(target).is('.' + id + '--item') ? '> div:first-child' : '.global-elements-text > div:first-child';
    $(target).find($childElem).html(meta.Attribution);
}

if(properties.fitToArea) {
    // Set target for the text
    properties.fitTarget = 'div';

    // Scale text to container
    $(target).find('.global-elements-text').xiboTextScaler(properties);
}
        ]]></onTemplateRender>
    </template>
    <template>
        <id>weather_condition_background_image</id>
        <title>Image</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fa fa-image</icon>
        <startWidth>480</startWidth>
        <startHeight>600</startHeight>
        <properties>
            <property id="roundBorder" type="checkbox">
                <title>Round Border</title>
                <default>0</default>
                <helpText>Should the square have rounded corners?</helpText>
            </property>
            <property id="borderRadius" type="number">
                <title>Border Radius</title>
                <default>20</default>
                <visibility>
                    <test type="and">
                        <condition field="roundBorder" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="objectFit" type="dropdown" mode="single">
                <title>Scale type</title>
                <helpText>How should this image be scaled?</helpText>
                <default>cover</default>
                <options>
                    <option name="fill">Fill</option>
                    <option name="contain">Contain</option>
                    <option name="cover">Cover</option>
                </options>
            </property>
            <property id="alignId" type="dropdown" mode="single">
                <title>Horizontal Align</title>
                <helpText>How should this image be aligned?</helpText>
                <default>center</default>
                <options>
                    <option name="left">Left</option>
                    <option name="center">Centre</option>
                    <option name="right">Right</option>
                </options>
                <visibility>
                    <test>
                        <condition field="objectFit" type="neq">fill</condition>
                    </test>
                </visibility>
            </property>
            <property id="valignId" type="dropdown" mode="single">
                <title>Vertical Align</title>
                <helpText>How should this image be vertically aligned?</helpText>
                <default>middle</default>
                <options>
                    <option name="top">Top</option>
                    <option name="middle">Middle</option>
                    <option name="bottom">Bottom</option>
                </options>
                <visibility>
                    <test>
                        <condition field="objectFit" type="neq">fill</condition>
                    </test>
                </visibility>
            </property>
            <property type="header" variant="main">
                <title>Images</title>
                <visibility>
                    <test>
                        <condition field="backgroundImage" type="neq">none</condition>
                    </test>
                </visibility>
            </property>
            <property type="message">
                <title>Select images from the media library to replace the default weather images.</title>
            </property>
            <property id="cloudyImage" type="mediaSelector">
                <title>Cloudy</title>
            </property>
            <property id="dayCloudyImage" type="mediaSelector">
                <title>Cloudy day</title>
            </property>
            <property id="dayClearImage" type="mediaSelector">
                <title>Clear</title>
            </property>
            <property id="fogImage" type="mediaSelector">
                <title>Fog</title>
            </property>
            <property id="hailImage" type="mediaSelector">
                <title>Hail</title>
            </property>
            <property id="nightClearImage" type="mediaSelector">
                <title>Clear night</title>
            </property>
            <property id="nightPartlyCloudyImage" type="mediaSelector">
                <title>Cloudy night</title>
            </property>
            <property id="rainImage" type="mediaSelector">
                <title>Raining</title>
            </property>
            <property id="snowImage" type="mediaSelector">
                <title>Snowing</title>
            </property>
            <property id="windyImage" type="mediaSelector">
                <title>Windy</title>
            </property>
            <property id="iconPrefix" type="hidden">
                <default>bg-</default>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-image img-container forecast-elements-background-image weather-bg--{{data.icon}}"
    style="width:100%; height: 100%; overflow: hidden; position: relative;">
    {{set 'bgImg' (weatherBackgroundImage data.icon cloudyImage dayCloudyImage dayClearImage fogImage hailImage nightClearImage nightPartlyCloudyImage rainImage snowImage windImage)}}
    <img src="{{#if @root.bgImg}}{{@root.bgImg}}{{else}}[[assetId={{iconPrefix}}{{data.icon}}]]{{/if}}"
        style="width:100%; height: 100%;
        object-fit: {{objectFit}};
        object-position: {{alignId}} {{valignId}};
        position: absolute; top: 0; left: 0;
        {{#if data.icon}}
            {{#if roundBorder}}
                {{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
            {{/if}}
        {{/if}}"
    />
</div>
            ]]></hbs>
        </stencil>
        <assets>
            <asset id="bg-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-cloudy.jpg"></asset>
            <asset id="bg-partly-cloudy-day" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-cloudy.jpg"></asset>
            <asset id="bg-clear-day" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-sunny.jpg"></asset>
            <asset id="bg-fog" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-fog.jpg"></asset>
            <asset id="bg-sleet" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-hail.jpg"></asset>
            <asset id="bg-clear-night" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-clear.jpg"></asset>
            <asset id="bg-partly-cloudy-night" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-partly-cloudy.jpg"></asset>
            <asset id="bg-rain" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-rain.jpg"></asset>
            <asset id="bg-snow" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-snow.jpg"></asset>
            <asset id="bg-wind" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-windy.jpg"></asset>
        </assets>
    </template>
    <template>
        <id>weather_date</id>
        <extends override="date" with="data.time">date</extends>
        <title>Date</title>
        <type>element</type>
        <dataType>forecast</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-calendar-week</icon>
        <startWidth>420</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="dateFormat" type="text" variant="dateFormat">
                <title>Date Format</title>
                <default>M d</default>
            </property>
        </properties>
        <onTemplateRender><![CDATA[
// Match all affected elements and get date div value
$(target).find('.date').each(function(_idx, dateEl){
    var dateValue = $(dateEl).data('date');
    var weatherDate = moment.unix(dateValue);

    // Check for lang config
    if (properties.lang !== null && String(properties.lang).length > 0) {
        weatherDate.locale(properties.lang);
    }

    // Format the date with the dateFormat property
    var formattedDate = weatherDate.format(properties.dateFormat);

    // Set the date div value to the formatted date
    $(dateEl).html(formattedDate);

    if (properties.fitToArea) {
        // Set target for the text
        properties.fitTarget = '.date';

        // Scale text to container
        $(target).find('.global-elements-date').xiboTextScaler(properties);
    }
});
        ]]></onTemplateRender>
    </template>
    <template>
        <id>weather_group_1</id>
        <type>element-group</type>
        <dataType>forecast</dataType>
        <title>Forecast 1</title>
        <thumbnail>forecast-group-1</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>940</startWidth>
            <startHeight>400</startHeight>
            <elementGroups>
                <elementGroup id="group_0">
                    <title>Group 0</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>0</layer>
                    <width>940</width>
                    <height>400</height>
                    <slot>0</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_1">
                    <title>Group 1</title>
                    <top>25</top>
                    <left>20</left>
                    <layer>0</layer>
                    <width>300</width>
                    <height>350</height>
                    <slot>0</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_2">
                    <title>Group 2</title>
                    <top>120</top>
                    <left>320</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>160</height>
                    <slot>1</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_3">
                    <title>Group 3</title>
                    <top>120</top>
                    <left>520</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>160</height>
                    <slot>2</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_4">
                    <title>Group 4</title>
                    <top>120</top>
                    <left>720</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>160</height>
                    <slot>3</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
            </elementGroups>
            <elements>
                <element id="rectangle" elementGroupId="group_0">
                    <title>Background</title>
                    <top>100</top>
                    <left>0</left>
                    <layer>1</layer>
                    <width>940</width>
                    <height>200</height>
                    <defaultProperties>
                        <property id="backgroundColor">rgba(84,103,228,0.8)</property>
                        <property id="outline">0</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                    </defaultProperties>
                </element>
                <element id="rectangle" elementGroupId="group_0">
                    <title>Day 1 Background</title>
                    <top>0</top>
                    <left>20</left>
                    <layer>0</layer>
                    <width>300</width>
                    <height>400</height>
                    <defaultProperties>
                        <property id="backgroundColor">rgba(0,0,0,0.7)</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="weather_date" elementGroupId="group_1">
                    <title>Date</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>300</width>
                    <height>55</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">60</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-start</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon" elementGroupId="group_1">
                    <title>Icon</title>
                    <top>100</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>300</width>
                    <height>80</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">66</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature" elementGroupId="group_1">
                    <title>Temperature</title>
                    <top>175</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>300</width>
                    <height>80</height>
                    <defaultProperties>
                        <property id="fontFamily">aileron regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">60</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">0.8</property>
                        <property id="verticalAlign">flex-end</property>
                    </defaultProperties>
                </element>
                <element id="weather_summary" elementGroupId="group_1">
                    <title>Summary</title>
                    <top>295</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>300</width>
                    <height>30</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">0.8</property>
                        <property id="verticalAlign">flex-start</property>
                    </defaultProperties>
                </element>
                <element id="weather_attribution" elementGroupId="group_1">
                    <title>Attribution</title>
                    <top>325</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>300</width>
                    <height>25</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">16</property>
                    </defaultProperties>
                </element>
                <element id="weather_date" elementGroupId="group_2">
                    <title>Date</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-start</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon" elementGroupId="group_2">
                    <title>Icon</title>
                    <top>50</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature" elementGroupId="group_2">
                    <title>Temperature</title>
                    <top>100</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>60</height>
                    <defaultProperties>
                        <property id="fontFamily">aileron regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-end</property>
                    </defaultProperties>
                </element>
                <element id="weather_date" elementGroupId="group_3">
                    <title>Date</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-start</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon" elementGroupId="group_3">
                    <title>Icon</title>
                    <top>50</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature" elementGroupId="group_3">
                    <title>Temperature</title>
                    <top>100</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>60</height>
                    <defaultProperties>
                        <property id="fontFamily">aileron regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-end</property>
                    </defaultProperties>
                </element>
                <element id="weather_date" elementGroupId="group_4">
                    <title>Date</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-start</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon" elementGroupId="group_4">
                    <title>Icon</title>
                    <top>50</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature" elementGroupId="group_4">
                    <title>Temperature</title>
                    <top>100</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>200</width>
                    <height>60</height>
                    <defaultProperties>
                        <property id="fontFamily">aileron regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="bold">1</property>
                        <property id="lineHeight">1</property>
                        <property id="verticalAlign">flex-end</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="forecast-group-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-group-1.png" />
        </assets>
    </template>
    <template>
        <id>weather_current_1</id>
        <type>element-group</type>
        <dataType>forecast</dataType>
        <title>Daily 1</title>
        <thumbnail>forecast-current-1</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>380</startWidth>
            <startHeight>380</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>0</layer>
                    <width>380</width>
                    <height>380</height>
                    <defaultProperties>
                        <property id="backgroundColor">#5ad0ff</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="rectangle">
                    <title>Temp area</title>
                    <top>131</top>
                    <left>0</left>
                    <layer>1</layer>
                    <width>380</width>
                    <height>126</height>
                    <defaultProperties>
                        <property id="backgroundColor">rgba(255,255,255,0.5)</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="line">
                    <title>Line top</title>
                    <top>97</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>380</width>
                    <height>68</height>
                    <defaultProperties>
                        <property id="lineWidth">2</property>
                        <property id="lineColor">#f9f9f9</property>
                        <property id="lineStyle">solid</property>
                    </defaultProperties>
                </element>
                <element id="line">
                    <title>Line top</title>
                    <top>223</top>
                    <left>0</left>
                    <layer>2</layer>
                    <width>380</width>
                    <height>68</height>
                    <defaultProperties>
                        <property id="lineWidth">2</property>
                        <property id="lineColor">#f9f9f9</property>
                        <property id="lineStyle">solid</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon">
                    <title>Icon</title>
                    <top>19</top>
                    <left>77</left>
                    <layer>3</layer>
                    <width>225</width>
                    <height>90</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">78</property>
                    </defaultProperties>
                </element>
                <element id="weather_summary">
                    <title>Summary</title>
                    <top>282</top>
                    <left>20</left>
                    <layer>3</layer>
                    <width>340</width>
                    <height>35</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="weather_attribution">
                    <title>Attribution</title>
                    <top>332</top>
                    <left>20</left>
                    <layer>3</layer>
                    <width>340</width>
                    <height>28</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">16</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature">
                    <title>Temperature</title>
                    <top>153</top>
                    <left>101</left>
                    <layer>3</layer>
                    <width>179</width>
                    <height>102</height>
                    <defaultProperties>
                        <property id="fontFamily">aileron regular</property>
                        <property id="fontColor">#04b1f5</property>
                        <property id="fontSize">80</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="forecast-current-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-1.png" />
        </assets>
    </template>
    <template>
        <id>weather_current_2</id>
        <type>element-group</type>
        <dataType>forecast</dataType>
        <title>Daily 2</title>
        <thumbnail>forecast-current-2</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>900</startWidth>
            <startHeight>400</startHeight>
            <elements>
                <element id="weather_condition_background_image">
                    <title>Background</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>0</layer>
                    <width>900</width>
                    <height>400</height>
                    <defaultProperties>
                        <property id="iconPrefix">forecast-current-2-</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="weather_summary">
                    <title>Summary</title>
                    <top>214</top>
                    <left>49</left>
                    <layer>3</layer>
                    <width>360</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontColor">#ffff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="weather_attribution">
                    <title>Attribution</title>
                    <top>329</top>
                    <left>49</left>
                    <layer>3</layer>
                    <width>351</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="fontSize">24</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature">
                    <title>Temperature</title>
                    <top>71</top>
                    <left>49</left>
                    <layer>3</layer>
                    <width>220</width>
                    <height>126</height>
                    <defaultProperties>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">120</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="forecast-current-2" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-2.png" />
            <asset id="forecast-current-2-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
            <asset id="forecast-current-2-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
            <asset id="forecast-current-2-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-day-sunny.png"></asset>
            <asset id="forecast-current-2-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-fog.png"></asset>
            <asset id="forecast-current-2-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-hail.png"></asset>
            <asset id="forecast-current-2-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-clear.png"></asset>
            <asset id="forecast-current-2-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-partly-cloudy.png"></asset>
            <asset id="forecast-current-2-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-rain.png"></asset>
            <asset id="forecast-current-2-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-snow.png"></asset>
            <asset id="forecast-current-2-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-windy.png"></asset>
        </assets>
    </template>
    <template>
        <id>weather_current_3</id>
        <type>element-group</type>
        <dataType>forecast</dataType>
        <title>Daily 3</title>
        <thumbnail>forecast-current-3</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>400</startWidth>
            <startHeight>500</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>0</layer>
                    <width>400</width>
                    <height>500</height>
                    <defaultProperties>
                        <property id="backgroundColor">#865bff</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="rectangle">
                    <title>Temp area</title>
                    <top>234</top>
                    <left>0</left>
                    <layer>1</layer>
                    <width>400</width>
                    <height>68</height>
                    <defaultProperties>
                        <property id="backgroundColor">rgba(0,0,0,0.12)</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="line">
                    <title>Line left</title>
                    <top>354</top>
                    <left>100</left>
                    <layer>2</layer>
                    <width>44</width>
                    <height>59</height>
                    <rotation>90</rotation>
                    <defaultProperties>
                        <property id="lineWidth">2</property>
                        <property id="lineColor">#f9f9f9</property>
                        <property id="lineStyle">solid</property>
                    </defaultProperties>
                </element>
                <element id="line">
                    <title>Line right</title>
                    <top>354</top>
                    <left>256</left>
                    <layer>2</layer>
                    <width>44</width>
                    <height>59</height>
                    <rotation>90</rotation>
                    <defaultProperties>
                        <property id="lineWidth">2</property>
                        <property id="lineColor">#f9f9f9</property>
                        <property id="lineStyle">solid</property>
                    </defaultProperties>
                </element>
                <element id="weather_icon">
                    <title>Icon</title>
                    <top>100</top>
                    <left>80</left>
                    <layer>3</layer>
                    <width>237</width>
                    <height>140</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">100</property>
                    </defaultProperties>
                </element>
                <element id="weather_summary">
                    <title>Summary</title>
                    <top>250</top>
                    <left>68</left>
                    <layer>3</layer>
                    <width>272</width>
                    <height>39</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="weather_attribution">
                    <title>Attribution</title>
                    <top>436</top>
                    <left>51</left>
                    <layer>3</layer>
                    <width>296</width>
                    <height>32</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">16</property>
                    </defaultProperties>
                </element>
                <element id="weather_temperature">
                    <title>Temperature</title>
                    <top>334</top>
                    <left>51</left>
                    <layer>3</layer>
                    <width>50</width>
                    <height>99</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">24</property>
                    </defaultProperties>
                </element>
                <element id="weather_wind_speed">
                    <title>Wind Speed</title>
                    <top>335</top>
                    <left>136</left>
                    <layer>3</layer>
                    <width>61</width>
                    <height>100</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">24</property>
                    </defaultProperties>
                </element>
                <element id="weather_wind_speed_unit">
                    <title>Wind Speed</title>
                    <top>335</top>
                    <left>206</left>
                    <layer>3</layer>
                    <width>56</width>
                    <height>100</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">24</property>
                    </defaultProperties>
                </element>
                <element id="weather_humidity_percent">
                    <title>Humidity</title>
                    <top>334</top>
                    <left>297</left>
                    <layer>3</layer>
                    <width>50</width>
                    <height>102</height>
                    <defaultProperties>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">24</property>
                    </defaultProperties>
                </element>
                <element id="weather_date">
                    <title>Date</title>
                    <top>40</top>
                    <left>68</left>
                    <layer>3</layer>
                    <width>272</width>
                    <height>39</height>
                    <defaultProperties>
                        <property id="dateFormat">g:i A</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">32</property>
                    </defaultProperties>
                </element>
                <element id="global_image">
                    <title>Humidity Icon</title>
                    <top>320</top>
                    <left>307</left>
                    <layer>3</layer>
                    <width>32</width>
                    <height>33</height>
                    <defaultProperties>
                        <property id="assetId">icon-humidity</property>
                    </defaultProperties>
                </element>
                <element id="global_image">
                    <title>Wind Icon</title>
                    <top>320</top>
                    <left>180</left>
                    <layer>3</layer>
                    <width>32</width>
                    <height>32</height>
                    <defaultProperties>
                        <property id="assetId">icon-wind</property>
                    </defaultProperties>
                </element>
                <element id="global_image">
                    <title>Weather Icon</title>
                    <top>320</top>
                    <left>61</left>
                    <layer>3</layer>
                    <width>32</width>
                    <height>32</height>
                    <defaultProperties>
                        <property id="assetId">icon-weather</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="forecast-current-3" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-3.png" />
            <asset id="icon-humidity" type="path" mimeType="image/png" path="/modules/assets/forecastio/stencils/icon_humidity.png"></asset>
            <asset id="icon-weather" type="path" mimeType="image/png" path="/modules/assets/forecastio/stencils/icon_weather.png"></asset>
            <asset id="icon-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/stencils/icon_wind.png"></asset>
        </assets>
    </template>
    <template>
        <id>weather_current_4</id>
        <type>element-group</type>
        <dataType>forecast</dataType>
        <title>Daily 4</title>
        <thumbnail>forecast-current-4</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>500</startWidth>
            <startHeight>440</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <top>0</top>
                    <left>0</left>
                    <layer>0</layer>
                    <width>500</width>
                    <height>440</height>
                    <defaultProperties>
                        <property id="backgroundColor">#212121</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="weather_condition_background_image">
                    <title>Background</title>
                    <top>32</top>
                    <left>125</left>
                    <layer>0</layer>
                    <width>250</width>
                    <height>250</height>
                    <defaultProperties>
                        <property id="iconPrefix">forecast-3d-</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">24</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="weather_summary">
                    <title>Summary</title>
                    <top>296</top>
                    <left>49</left>
                    <layer>3</layer>
                    <width>407</width>
                    <height>76</height>
                    <defaultProperties>
                        <property id="fontColor">#ffff</property>
                        <property id="fontSize">40</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="weather_attribution">
                    <title>Attribution</title>
                    <top>358</top>
                    <left>74</left>
                    <layer>3</layer>
                    <width>351</width>
                    <height>50</height>
                    <defaultProperties>
                        <property id="fontColor">rgba(249,249,249,0.34)</property>
                        <property id="fontSize">20</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="forecast-current-4" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-4.png" />
            <asset id="forecast-3d-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
            <asset id="forecast-3d-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
            <asset id="forecast-3d-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-day-sunny.png"></asset>
            <asset id="forecast-3d-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-fog.png"></asset>
            <asset id="forecast-3d-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-hail.png"></asset>
            <asset id="forecast-3d-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-clear.png"></asset>
            <asset id="forecast-3d-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-partly-cloudy.png"></asset>
            <asset id="forecast-3d-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-rain.png"></asset>
            <asset id="forecast-3d-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-snow.png"></asset>
            <asset id="forecast-3d-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-windy.png"></asset>
        </assets>
    </template>
</templates>