<!--
  ~ 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>currency_name</id>
        <extends override="text" with="data.NameShort">text</extends>
        <title>Currency Name</title>
        <type>element</type>
        <dataType>currency</dataType>
        <canRotate>true</canRotate>
        <icon>fa fa-font</icon>
        <startWidth>360</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>currency_rawLastTradePriceOnly</id>
        <extends override="text" with="data.RawLastTradePriceOnly">text</extends>
        <title>Last Trade Price</title>
        <type>element</type>
        <dataType>currency</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-money-bill-alt</icon>
        <startWidth>250</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>currency_changePercentage</id>
        <extends override="text" with="data.ChangePercentage">text</extends>
        <title>Change Percentage</title>
        <type>element</type>
        <dataType>currency</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-percentage</icon>
        <startWidth>200</startWidth>
        <startHeight>100</startHeight>
        <onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
    return '';
}

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

return value + '%';
        ]]></onElementParseData>
        <onTemplateRender><![CDATA[
var elementData = null;
if (properties.hasOwnProperty('data')) {
    elementData = properties.data;
}

if (elementData !== null && elementData.hasOwnProperty('ChangeStyle')) {
    var changeStyle = elementData.ChangeStyle;
    var $changePercent = $(target).find('div:first');

    if (changeStyle === 'value-equal') {
        $changePercent.css({color: 'gray'});
    } else {
        $changePercent.css({color: changeStyle === 'value-down' ? 'red' : 'green'});
    }
}
        ]]></onTemplateRender>
    </template>
    <template>
        <id>currency_changeIcon</id>
        <title>Change Icon</title>
        <type>element</type>
        <dataType>currency</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-arrows-alt-v</icon>
        <startWidth>80</startWidth>
        <startHeight>60</startHeight>
        <properties>
            <property id="fontSize" type="number">
                <title>Font Size</title>
                <default>40</default>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="arrow currency-elements-change-icon">
    <div class="fa {{data.ChangeIcon}}
    {{#eq data.ChangeIcon "up-arrow"}}fa-caret-up{{/eq}}
    {{#eq data.ChangeIcon "down-arrow"}}fa-caret-down{{/eq}}
    {{#eq data.ChangeIcon "right-arrow"}}fa-caret-right{{/eq}}" style="
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    "></div>
</div>
            ]]></hbs>
            <style><![CDATA[
.currency-elements-change-icon {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    text-align: center;
}
.currency-elements-change-icon .down-arrow {
    color: red;
}

.currency-elements-change-icon .up-arrow {
    color: green;
}

.currency-elements-change-icon .right-arrow {
    color: gray;
}
            ]]></style>
        </stencil>
        <assets>
            <asset id="font-awesome" type="path" mimeType="text/css" path="/modules/assets/common/font-awesome.min.css" />
            <asset id="fontawesome-webfont.ttf" type="path" mimeType="application/x-font-ttf" path="/modules/assets/common/fontawesome-webfont.ttf"></asset>
            <asset id="fontawesome-webfont.woff" type="path" mimeType="application/font-woff" path="/modules/assets/common/fontawesome-webfont.woff"></asset>
            <asset id="fontawesome-webfont.woff2" type="path" mimeType="application/font-woff2" path="/modules/assets/common/fontawesome-webfont.woff2"></asset>
        </assets>
    </template>
    <template>
        <id>currency_logo</id>
        <extends override="url" with="data.NameShort">global-image</extends>
        <title>Currency Logo</title>
        <type>element</type>
        <dataType>currency</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-flag</icon>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
        <stencil>
            <hbs><![CDATA[
<div class="currency-elements-logo" data-css-url="[[assetId=flagsCSS]]">
    <div class="img-circle center-block flag-icon-container">
        <img src="[[assetId=flags]]" class="flag-icon flag-icon-{{url}}">
    </div>
</div>
            ]]></hbs>
            <style><![CDATA[
.currency-elements-logo {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.currency-elements-logo .img-circle {
    border-radius: 50%;
    vertical-align: middle;
    border: 0;
    height: 100%;
}
.currency-elements-logo .center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
    top: 50%;
    transform: translateY(-50%);
}
            ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
// Width and Height of the element
var width = $(target).width();
var height = $(target).height();

var $logoContainer = $(target).find('.currency-elements-logo');
var $imageContainer = $(target).find('.img-circle');

// Scale image to the container
if (width > height) {
    $imageContainer.css('width', height);
    $imageContainer.css('height', '100%');
} else {
    $imageContainer.css('height', width);
    $imageContainer.css('width', '100%');
}
        ]]></onTemplateRender>
        <assets>
            <asset id="flags" type="path" mimeType="image/webp" path="/modules/assets/currency/flags.webp" />
            <asset id="flagsCSS" type="path" mimeType="text/css" path="/modules/assets/currency/flags.css" />
        </assets>
    </template>
</templates>
