<!--
  ~ 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'});
    }
}

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>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>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fitToArea" type="checkbox">
                <title>Fit to selection</title>
                <playerCompatibility tizen=""></playerCompatibility>
                <helpText>Fit to selected area instead of using the font size?</helpText>
                <default>0</default>
            </property>
            <property id="fontFamily" type="hidden">
                <default>FontAwesome</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>
        <onTemplateRender><![CDATA[
if(properties.fitToArea) {
    // Set target for the text
    properties.fitTarget = 'div.fa';

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

    // Scale text to container
    $(target).find('.currency-elements-change-icon').xiboTextScaler(properties);
}
        ]]></onTemplateRender>
        </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>
    <template>
        <id>currency_single_1</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Single 1</title>
        <thumbnail>currency-single-1</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>678</startWidth>
            <startHeight>133</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>678</width>
                    <height>133</height>
                    <defaultProperties>
                        <property id="backgroundColor">#001061</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo">
                    <title>Currency logo</title>
                    <layer>1</layer>
                    <top>29</top>
                    <left>40</left>
                    <width>75</width>
                    <height>75</height>
                </element>
                <element id="currency_name">
                    <title>Currency name</title>
                    <layer>1</layer>
                    <top>29</top>
                    <left>150</left>
                    <width>199</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly">
                    <title>Currency trade price</title>
                    <layer>1</layer>
                    <top>29</top>
                    <left>391</left>
                    <width>250</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-end</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-single-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-single-1.png" />
        </assets>
    </template>
    <template>
        <id>currency_single_2</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Single 2</title>
        <thumbnail>currency-single-2</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>642</startWidth>
            <startHeight>174</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>642</width>
                    <height>174</height>
                    <defaultProperties>
                        <property id="backgroundColor">#171717</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo">
                    <title>Currency logo</title>
                    <layer>1</layer>
                    <top>27</top>
                    <left>32</left>
                    <width>107</width>
                    <height>119</height>
                </element>
                <element id="currency_name">
                    <title>Currency name</title>
                    <layer>1</layer>
                    <top>66</top>
                    <left>179</left>
                    <width>136</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly">
                    <title>Currency trade price</title>
                    <layer>1</layer>
                    <top>66</top>
                    <left>360</left>
                    <width>250</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-end</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
                <element id="text">
                    <title>Currency name</title>
                    <layer>1</layer>
                    <top>27</top>
                    <left>179</left>
                    <width>200</width>
                    <height>48</height>
                    <defaultProperties>
                        <property id="text">[Currency Name]</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">24</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
                <element id="currency_changePercentage">
                    <title>Currency change percent</title>
                    <layer>2</layer>
                    <top>27</top>
                    <left>379</left>
                    <width>191</width>
                    <height>48</height>
                    <defaultProperties>
                        <property id="fontColor">#333</property>
                        <property id="fontSize">24</property>
                        <property id="horizontalAlign">flex-end</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
                <element id="currency_changeIcon">
                    <title>Currency change icon</title>
                    <layer>2</layer>
                    <top>27</top>
                    <left>586</left>
                    <width>24</width>
                    <height>48</height>
                    <defaultProperties>
                        <property id="fontSize">40</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-single-2" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-single-2.png" />
        </assets>
    </template>
    <template>
        <id>currency_single_3</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Single 3</title>
        <thumbnail>currency-single-3</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>351</startWidth>
            <startHeight>375</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>351</width>
                    <height>375</height>
                    <defaultProperties>
                        <property id="backgroundColor">#171717</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo">
                    <title>Currency logo</title>
                    <layer>1</layer>
                    <top>34</top>
                    <left>122</left>
                    <width>107</width>
                    <height>119</height>
                </element>
                <element id="currency_name">
                    <title>Currency name</title>
                    <layer>1</layer>
                    <top>160</top>
                    <left>107</left>
                    <width>136</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly">
                    <title>Currency trade price</title>
                    <layer>1</layer>
                    <top>220</top>
                    <left>50</left>
                    <width>250</width>
                    <height>75</height>
                    <defaultProperties>
                        <property id="fontFamily">open sans regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
                <element id="currency_changePercentage">
                    <title>Currency change percent</title>
                    <layer>2</layer>
                    <top>291</top>
                    <left>148</left>
                    <width>97</width>
                    <height>48</height>
                    <defaultProperties>
                        <property id="fontColor">#333</property>
                        <property id="fontSize">24</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                    </defaultProperties>
                </element>
                <element id="currency_changeIcon">
                    <title>Currency change icon</title>
                    <layer>2</layer>
                    <top>291</top>
                    <left>102</left>
                    <width>24</width>
                    <height>48</height>
                    <defaultProperties>
                        <property id="fontSize">40</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-single-3" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-single-3.png" />
        </assets>
    </template>
    <template>
        <id>currency_single_4</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Single 4</title>
        <thumbnail>currency-single-4</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>695</startWidth>
            <startHeight>174</startHeight>
            <elements>
                <element id="rectangle">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>56</left>
                    <width>639</width>
                    <height>174</height>
                    <defaultProperties>
                        <property id="backgroundColor">#000b33</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo">
                    <title>Currency logo</title>
                    <layer>1</layer>
                    <top>25</top>
                    <left>0</left>
                    <width>114</width>
                    <height>121</height>
                </element>
                <element id="currency_name">
                    <title>Currency name</title>
                    <layer>1</layer>
                    <top>51</top>
                    <left>150</left>
                    <width>185</width>
                    <height>73</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly">
                    <title>Currency trade price</title>
                    <layer>1</layer>
                    <top>53</top>
                    <left>336</left>
                    <width>300</width>
                    <height>65</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">flex-end</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-single-4" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-single-4.png" />
        </assets>
    </template>
    <template>
        <id>currency_group_1</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Group 1</title>
        <thumbnail>currency-group-1</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>473</startWidth>
            <startHeight>1016</startHeight>
            <elementGroups>
                <elementGroup id="group_0">
                    <title>Background group</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>473</width>
                    <height>1016</height>
                    <slot>0</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_1">
                    <title>Group 1</title>
                    <layer>1</layer>
                    <top>56</top>
                    <left>36</left>
                    <width>401</width>
                    <height>136</height>
                    <slot>0</slot>
                </elementGroup>
                <elementGroup id="group_2">
                    <title>Group 2</title>
                    <layer>1</layer>
                    <top>248</top>
                    <left>36</left>
                    <width>401</width>
                    <height>136</height>
                    <slot>1</slot>
                </elementGroup>
                <elementGroup id="group_3">
                    <title>Group 3</title>
                    <layer>1</layer>
                    <top>440</top>
                    <left>36</left>
                    <width>401</width>
                    <height>136</height>
                    <slot>2</slot>
                </elementGroup>
                <elementGroup id="group_4">
                    <title>Group 4</title>
                    <layer>1</layer>
                    <top>632</top>
                    <left>36</left>
                    <width>401</width>
                    <height>136</height>
                    <slot>3</slot>
                </elementGroup>
                <elementGroup id="group_5">
                    <title>Group 5</title>
                    <layer>1</layer>
                    <top>824</top>
                    <left>36</left>
                    <width>401</width>
                    <height>136</height>
                    <slot>4</slot>
                </elementGroup>
            </elementGroups>
            <elements>
                <element id="rectangle" elementGroupId="group_0">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>473</width>
                    <height>1016</height>
                    <defaultProperties>
                        <property id="backgroundColor">#171717</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_1">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>136</width>
                    <height>136</height>
                </element>
                <element id="currency_name" elementGroupId="group_1">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>12</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_1">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>68</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">38</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_2">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>136</width>
                    <height>136</height>
                </element>
                <element id="currency_name" elementGroupId="group_2">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>12</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_2">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>68</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">38</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_3">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>136</width>
                    <height>136</height>
                </element>
                <element id="currency_name" elementGroupId="group_3">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>12</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_3">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>68</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">38</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_4">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>136</width>
                    <height>136</height>
                </element>
                <element id="currency_name" elementGroupId="group_4">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>12</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_4">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>68</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">38</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_5">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>136</width>
                    <height>136</height>
                </element>
                <element id="currency_name" elementGroupId="group_5">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>12</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                        <property id="bold">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_5">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>68</top>
                    <left>171</left>
                    <width>230</width>
                    <height>56</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#f9f9f9</property>
                        <property id="fontSize">38</property>
                        <property id="horizontalAlign">flex-start</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-group-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-group-1.png" />
        </assets>
    </template>
    <template>
        <id>currency_group_2</id>
        <type>element-group</type>
        <dataType>currency</dataType>
        <title>Currency - Group 2</title>
        <thumbnail>currency-group-2</thumbnail>
        <stencil>
            <hbs></hbs>
            <startWidth>1200</startWidth>
            <startHeight>341</startHeight>
            <elementGroups>
                <elementGroup id="group_0">
                    <title>Background group</title>
                    <layer>0</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>1200</width>
                    <height>341</height>
                    <slot>0</slot>
                    <pinSlot>1</pinSlot>
                </elementGroup>
                <elementGroup id="group_1">
                    <title>Group 1</title>
                    <layer>1</layer>
                    <top>0</top>
                    <left>0</left>
                    <width>300</width>
                    <height>311</height>
                    <slot>0</slot>
                </elementGroup>
                <elementGroup id="group_2">
                    <title>Group 2</title>
                    <layer>1</layer>
                    <top>0</top>
                    <left>300</left>
                    <width>300</width>
                    <height>311</height>
                    <slot>1</slot>
                </elementGroup>
                <elementGroup id="group_3">
                    <title>Group 3</title>
                    <layer>1</layer>
                    <top>0</top>
                    <left>600</left>
                    <width>300</width>
                    <height>311</height>
                    <slot>2</slot>
                </elementGroup>
                <elementGroup id="group_4">
                    <title>Group 4</title>
                    <layer>1</layer>
                    <top>0</top>
                    <left>900</left>
                    <width>300</width>
                    <height>311</height>
                    <slot>3</slot>
                </elementGroup>
            </elementGroups>
            <elements>
                <element id="rectangle" elementGroupId="group_0">
                    <title>Background</title>
                    <layer>0</layer>
                    <top>63</top>
                    <left>0</left>
                    <width>1200</width>
                    <height>278</height>
                    <defaultProperties>
                        <property id="backgroundColor">#000b33</property>
                        <property id="roundBorder">1</property>
                        <property id="borderRadius">16</property>
                        <property id="outline">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_1">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>93</left>
                    <width>114</width>
                    <height>121</height>
                </element>
                <element id="currency_name" elementGroupId="group_1">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>147</top>
                    <left>0</left>
                    <width>300</width>
                    <height>73</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="line" elementGroupId="group_1">
                    <title>Separator</title>
                    <layer>2</layer>
                    <top>217</top>
                    <left>113</left>
                    <width>74</width>
                    <height>27</height>
                    <defaultProperties>
                        <property id="lineColor">#fff</property>
                        <property id="lineWidth">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_1">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>246</top>
                    <left>0</left>
                    <width>300</width>
                    <height>65</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_2">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>93</left>
                    <width>114</width>
                    <height>121</height>
                </element>
                <element id="currency_name" elementGroupId="group_2">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>147</top>
                    <left>0</left>
                    <width>300</width>
                    <height>73</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="line" elementGroupId="group_2">
                    <title>Separator</title>
                    <layer>2</layer>
                    <top>217</top>
                    <left>113</left>
                    <width>74</width>
                    <height>27</height>
                    <defaultProperties>
                        <property id="lineColor">#fff</property>
                        <property id="lineWidth">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_2">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>246</top>
                    <left>0</left>
                    <width>300</width>
                    <height>65</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_3">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>93</left>
                    <width>114</width>
                    <height>121</height>
                </element>
                <element id="currency_name" elementGroupId="group_3">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>147</top>
                    <left>0</left>
                    <width>300</width>
                    <height>73</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="line" elementGroupId="group_3">
                    <title>Separator</title>
                    <layer>2</layer>
                    <top>217</top>
                    <left>113</left>
                    <width>74</width>
                    <height>27</height>
                    <defaultProperties>
                        <property id="lineColor">#fff</property>
                        <property id="lineWidth">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_3">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>246</top>
                    <left>0</left>
                    <width>300</width>
                    <height>65</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="currency_logo" elementGroupId="group_4">
                    <title>Currency logo</title>
                    <layer>2</layer>
                    <top>0</top>
                    <left>93</left>
                    <width>114</width>
                    <height>121</height>
                </element>
                <element id="currency_name" elementGroupId="group_4">
                    <title>Currency name</title>
                    <layer>2</layer>
                    <top>147</top>
                    <left>0</left>
                    <width>300</width>
                    <height>73</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">56</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
                <element id="line" elementGroupId="group_4">
                    <title>Separator</title>
                    <layer>2</layer>
                    <top>217</top>
                    <left>113</left>
                    <width>74</width>
                    <height>27</height>
                    <defaultProperties>
                        <property id="lineColor">#fff</property>
                        <property id="lineWidth">1</property>
                    </defaultProperties>
                </element>
                <element id="currency_rawLastTradePriceOnly" elementGroupId="group_4">
                    <title>Currency trade price</title>
                    <layer>2</layer>
                    <top>246</top>
                    <left>0</left>
                    <width>300</width>
                    <height>65</height>
                    <defaultProperties>
                        <property id="fontFamily">Poppins Regular</property>
                        <property id="fontColor">#fff</property>
                        <property id="fontSize">40</property>
                        <property id="horizontalAlign">center</property>
                        <property id="verticalAlign">center</property>
                        <property id="textWrap">0</property>
                        <property id="showOverflow">0</property>
                    </defaultProperties>
                </element>
            </elements>
        </stencil>
        <assets>
            <asset id="currency-group-2" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/currency/elements/currency-group-2.png" />
        </assets>
    </template>
</templates>
