<!--
  ~ Copyright (C) 2023 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_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 Color</title>
                <default>%THEME_COLOR%</default>
            </property>
            <property id="fontSize" type="number">
                <title>Font Size</title>
                <default>40</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>
        </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>
    </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);
}
        ]]></onTemplateRender>
    </template>
    <template>
        <id>weather_condition_background_image</id>
        <title>Background 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>Backgrounds</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 backgrounds.</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>
        </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}}/library/download/{{@root.bgImg}}?preview=1{{else}}[[assetId=bg-{{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);
});
        ]]></onTemplateRender>
    </template>
</templates>