<!--
  ~ 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) {
    const 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 (String(value).includes('°C')) {
    return value;
}

return value + '<sup>°C</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 (String(value).includes('°C')) {
    return value;
}

return value + '<sup>°C</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('°C')) {
    return value;
}

return value + '%';
        ]]></onElementParseData>
        <assets>
            <asset id="weather-humidity-percent" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/weather-humidity-percent.png" />
        </assets>
    </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')) {
    $(target).find('.global-elements-text > div:first-child').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>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="forecast-elements-background-image {{#if data.icon}}has-bg{{/if}}"
    style="background-image: url('[[assetId=bg-{{data.icon}}]]')"></div>
            ]]></hbs>
            <style><![CDATA[
.forecast-elements-background-image:not(.has-bg) {
    background-image: none !important;
}

.forecast-elements-background-image.has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    {{#if roundBorder}}
        {{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
    {{/if}}
}
            ]]></style>
        </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');

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

    // Set the date div value to the formatted date
    $(dateEl).html(formattedDate);
});
        ]]></onTemplateRender>
    </template>
</templates>