<!--
  ~ 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>stock_name</id>
        <extends override="text" with="data.Name">text</extends>
        <title>Name</title>
        <type>element</type>
        <dataType>stock</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-font</icon>
        <startWidth>420</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>stock_symbol</id>
        <extends override="text" with="data.SymbolTrimmed">text</extends>
        <title>Symbol</title>
        <type>element</type>
        <dataType>stock</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-font</icon>
        <startWidth>420</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>stock_lastTradePrice</id>
        <extends override="text" with="data.LastTradePriceOnly">text</extends>
        <title>Last Trade Price</title>
        <type>element</type>
        <dataType>stock</dataType>
        <icon>fas fa-money-bill-alt</icon>
        <canRotate>true</canRotate>date
        <startWidth>200</startWidth>
        <startHeight>100</startHeight>
    </template>
    <template>
        <id>stock_changePercentage</id>
        <extends override="text" with="data.ChangePercentage">text</extends>
        <title>Change Percentage</title>
        <type>element</type>
        <dataType>stock</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>stock_changeIcon</id>
        <title>Stock Icon</title>
        <type>element</type>
        <dataType>stock</dataType>
        <canRotate>true</canRotate>
        <icon>fas fa-arrows-alt-v</icon>
        <startWidth>80</startWidth>
        <startHeight>60</startHeight>
        <stencil>
            <hbs><![CDATA[
<div class="stock-elements-icon" data-css-url="[[assetId=font-awesome]]" style="width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    text-align: center;">
    <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="
            font-size: calc({{prop.width}}px * 0.75);
            {{#if prop.height}}line-height: {{prop.height}}px;{{/if}}
            {{#eq data.ChangeIcon "up-arrow"}}color: green;{{/eq}}
            {{#eq data.ChangeIcon "down-arrow"}}color: red;{{/eq}}
            {{#eq data.ChangeIcon "right-arrow"}}color: gray;{{/eq}}
        "></div></div>
]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
var $arrowContainer = $(target).find('.stock-elements-icon');
var $targetContainer = $(target).is('body') ? $('body') : $(target).parent().parent();

// Inject CSS into target container if it's not added yet
if ($targetContainer.find('.sampleCSS').length == 0) {
    $targetContainer.prepend(`<link rel="stylesheet" href="${$arrowContainer.data('cssUrl')}" class="sampleCSS" media="screen"/>`);
}
        ]]></onTemplateRender>
        <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>
</templates>
