<!--
  ~ Copyright (C) 2024 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>currencies_custom_html</id>
        <type>static</type>
        <dataType>currency</dataType>
        <showIn>none</showIn>
        <title>Currencies Custom HTML</title>
        <properties>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
            </property>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
                <default></default>
            </property>
            <property id="itemsPerPage" type="number">
                <title>Items per Page</title>
                <helpText>This is the intended number of items on each page.</helpText>
                <default>4</default>
            </property>
            <property id="customTemplate" type="hidden">
                <default>1</default>
            </property>
            <property id="moduleType" type="hidden">
                <default>currencies</default>
            </property>
            <property id="widgetDesignWidth" type="number">
                <title>Original Width</title>
                <helpText>This is the intended width of the template and is used to scale the Widget within its region when the template is applied.</helpText>
            </property>
            <property id="widgetDesignHeight" type="number">
                <title>Original Height</title>
                <helpText>This is the intended height of the template and is used to scale the Widget within its region when the template is applied.</helpText>
            </property>
            <property id="mainTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
                <title>mainTemplate</title>
            </property>
            <property id="itemTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
                <title>itemTemplate</title>
            </property>
            <property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
                <title>styleSheet</title>
            </property>
        </properties>
        <stencil>
            <twig><![CDATA[
<div class="template-container" style="display: none;">
{{mainTemplate|raw}}
</div>

<div class="item-template" style="display: none;">
{{itemTemplate|raw}}
</div>

<div class="sample-image" style="display: none;">
  <div class="img-circle center-block flag-icon-container">
    <img src="[[assetId=flags]]" class="flag-icon flag-icon-[NameShort]">
  </div>
</div>
            ]]></twig>
            <style><![CDATA[
{{styleSheet|raw}}
            ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
// Template renderer options
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
$(target).xiboLayoutScaler(properties);

// Get body
var body = $(target).find('.template-container > div');

// Get items
var templateItems = $(target).find('#content > .template-item');

// Run only if there are items
if (templateItems.length > 0) {
    // Render items
    $(target).find('#content').xiboFinanceRender(properties, templateItems, body);
} else {
    // Hide container
    $(body).hide();
}
$(target).find('img').xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
        <assets>
            <asset id="flags" type="path" mimeType="image/webp" path="/modules/assets/currency/flags.webp"></asset>
            <asset id="flagsCSS" type="path" mimeType="text/css" path="/modules/assets/currency/flags.css"></asset>
        </assets>
    </template>
    <template>
        <id>currencies1</id>
        <type>static</type>
        <dataType>currency</dataType>
        <title>Currencies 1</title>
        <thumbnail>currencies1</thumbnail>
        <startWidth>500</startWidth>
        <startHeight>300</startHeight>
        <properties>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
            </property>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
                <default></default>
            </property>
            <property id="itemBackgroundColor" type="color">
                <title>Item Colour</title>
                <helpText>Background colour for each currency item.</helpText>
                <default>rgba(0, 0, 0, 0.87)</default>
            </property>
            <property id="itemFontColor" type="color">
                <title>Item Font Colour</title>
                <helpText>Font colour for each currency item.</helpText>
                <default>#fff</default>
            </property>
            <property id="headerFontColor" type="color">
                <title>Header Font Colour</title>
                <helpText>Font colour for the header.</helpText>
                <default>#fff</default>
            </property>
            <property id="upArrowColor" type="color">
                <title>Up Arrow Colour</title>
                <helpText>Colour for the up change arrow.</helpText>
                <default>green</default>
            </property>
            <property id="downArrowColor" type="color">
                <title>Down Arrow Colour</title>
                <helpText>Colour for the down change arrow.</helpText>
                <default>red</default>
            </property>
            <property id="fontFamily" type="fontSelector">
                <title>Font</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="itemsPerPage" type="hidden" saveDefault="true">
                <default>4</default>
            </property>
        </properties>
        <stencil>
            <width id="width">820</width>
            <height id="height">420</height>
            <hbs><![CDATA[
<div class="row-finance template-item">
  <div class="flags">
    <div class="img-circle center-block flag-icon-container">
      <img src="[[assetId=flags]]" class="flag-icon flag-icon-{{NameShort}}">
    </div>
  </div>
  <div class="name value">{{NameShort}}</div>
  <div class="price text-center value">{{RawLastTradePriceOnly}}</div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<div class="container-main template-container">
    <div class="container">
        <div class="row-header">
            <div class="header-rate value">||RATE||</div>
        </div>
        <div id="cycle-container" class="items-container">
        </div>
    </div>
</div>
            ]]></twig>
            <style><![CDATA[
body {
    width: 820px !important;
    height: 420px !important;
    line-height: 1;
{% if fontFamily %}
    font-family: {{fontFamily}};
{% else %}
    font-family: "Helvetica", "Arial", sans-serif;
{% endif %}
}

.container-main {
    height: 420px !important;
    width: 820px !important;
{% if backgroundColor %}
    background-color: {{backgroundColor}};
{% endif %}
}

.container {
    height: 420px !important;
    width: 820px !important;
    float: left;
}

.row-finance {
    height: 60px;
    margin-bottom: 20px;
{% if itemBackgroundColor %}
    background-color: {{itemBackgroundColor}};
{% endif %}
}

.row-header {
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 20px;
{% if headerFontColor %}
    color: {{headerFontColor}};
{% endif %}
}

.header-rate {
    margin-left: 70%;
    width: 30%;
    text-align: center;
}

.value {
    font-size: 20px;
    padding-top: 20px;
    font-weight: bold;
}

.page .value {
{% if itemFontColor %}
    color: {{itemFontColor}};
{% endif %}
}

.img-circle {
    border-radius: 50%;
    vertical-align: middle;
    border: 0;
}

.center-block {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.down-arrow {
    font-size: 20px;
{% if downArrowColor %}
    color: {{downArrowColor}};
{% endif %}
    padding-top: 17px;
}

.up-arrow {
    font-size: 20px;
{% if upArrowColor %}
    color: {{upArrowColor}};
{% endif %}
    padding-top: 17px;
}

.variant {
    font-size: 20px;
    padding-top: 17px;
}

.flags {
    padding-top: 4px;
    width: 15%;
    float: left;
}

.name {
    width: 30%;
    float: left;
}

.price {
    float: right;
    width: 30%;
    text-align: center;
}

.center-block {
    width: 50px;
    height: 50px;
}
            ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
// Template renderer options
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
var overrideItemPerPage = {
    itemsPerPage: 0,
};
$(target).xiboLayoutScaler($.extend({}, properties, overrideItemPerPage));

// Get items
var templateItems = $(target).find(".template-item");

// Get body
var body = $(target).find(".template-container");

// Run only if there are items
if (templateItems.length > 0) {
    // Render items
    $(target).find("#content").xiboFinanceRender(properties, templateItems, body);
} else {
    // Hide container
    $(body).hide();
}
$(target).find("img").xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
        <assets>
            <asset id="currencies1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/currency/currencies1.png"></asset>
            <asset id="flags" type="path" mimeType="image/webp" path="/modules/assets/currency/flags.webp"></asset>
            <asset id="flagsCSS" type="path" mimeType="text/css" path="/modules/assets/currency/flags.css"></asset>
        </assets>
    </template>
    <template>
        <id>currencies2</id>
        <type>static</type>
        <dataType>currency</dataType>
        <title>Currencies 2</title>
        <thumbnail>currencies2</thumbnail>
        <startWidth>500</startWidth>
        <startHeight>300</startHeight>
        <properties>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
            </property>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
                <default></default>
            </property>
            <property id="itemBackgroundColor" type="color">
                <title>Item Colour</title>
                <helpText>Background colour for each currency item.</helpText>
                <default>#e0e0e0</default>
            </property>
            <property id="itemFontColor" type="color">
                <title>Item Font Colour</title>
                <helpText>Font colour for each currency item.</helpText>
                <default>#000</default>
            </property>
            <property id="borderLeftColor" type="color">
                <title>Item Border Colour</title>
                <helpText>Border colour for each currency item.</helpText>
                <default>#264a88</default>
            </property>
            <property id="upArrowColor" type="color">
                <title>Up Arrow Colour</title>
                <helpText>Colour for the up change arrow.</helpText>
                <default>green</default>
            </property>
            <property id="downArrowColor" type="color">
                <title>Down Arrow Colour</title>
                <helpText>Colour for the down change arrow.</helpText>
                <default>red</default>
            </property>
            <property id="equalArrowColor" type="color">
                <title>Equal Arrow Colour</title>
                <helpText>Colour for the equal change arrow.</helpText>
                <default>gray</default>
            </property>
            <property id="fontFamily" type="fontSelector">
                <title>Font</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="itemsPerPage" type="hidden" saveDefault="true">
                <default>5</default>
            </property>
        </properties>
        <stencil>
            <width id="width">820</width>
            <height id="height">420</height>
            <hbs><![CDATA[
<div class="row-finance template-item">
    <div class="flags">
      <div class="img-circle center-block flag-icon-container">
        <img src="[[assetId=flags]]" class="flag-icon flag-icon-{{NameShort}}">
      </div>
    </div>
    <div class="name value">{{NameShort}}</div>
    <div class="price value">{{RawLastTradePriceOnly}}</div>
    <div class="perc value {{ChangeStyle}}">{{ChangePercentage}}%</div>
    <div class="arrow"><div class="{{ChangeIcon}}"></div></div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<div class="container-main template-container">
  <div id="cycle-container" class="items-container">
  </div>
</div>
            ]]></twig>
            <style><![CDATA[
body {
  width: 820px !important;
  height: 420px !important;
{% if fontFamily %}
    font-family: {{fontFamily}};
{% else %}
    font-family: "Helvetica", "Arial", sans-serif;
{% endif %}
  line-height: 1;
}

.img-circle {
    border-radius: 50%;
    vertical-align: middle;
    border: 0;
}

.container-main {
  height: 370px !important;
  width: 820px !important;
  float: left;
  padding: 25px 0;
{% if backgroundColor %}
  background-color: {{backgroundColor}};
{% endif %}
}

.row-finance {
  height: 60px;
  margin-bottom: 17px;
  border-left: #264a88 10px solid;
{% if borderLeftColor %}
    border-left-color: {{borderLeftColor}};
{% endif %}
{% if itemBackgroundColor %}
    background: {{itemBackgroundColor}};
{% endif %}
}

.row-finance>div {
  float: left;
}

.value {
  font-size: 20px;
  padding-top: 20px;
{% if itemFontColor %}
  color: {{itemFontColor}};
{% endif %}
  white-space: nowrap;
}

.down-arrow {
  margin: 25px 0px 0px 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid red;
  {% if downArrowColor %}
    border-top-color: {{downArrowColor}};
  {% endif %}
}

.up-arrow {
  margin: 25px 0px 0px 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid green;
{% if upArrowColor %}
    border-bottom-color: {{upArrowColor}};
{% endif %}
}

.right-arrow {
  margin: 20px 0px 0px 25px;
  width: 0;
  height: 0;
  border-left: 10px solid gray;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
{% if equalArrowColor %}
    border-left-color: {{equalArrowColor}};
{% endif %}
}

.img-circle {
  border-radius: 50%;
  vertical-align: middle;
  border: 0;
}

.center-block {
  width: 50px;
  height: 50px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.variant {
  font-size: 20px;
  padding-top: 17px;
}

.flags {
  padding-top: 4px;
  width: 15%;
}

.name {
  width: 20%;
}

.price {
  width: 20%;
  margin-left: 15%;
  text-align: right;
}

.perc {
  width: 20%;
  text-align: right;
}

.arrow {
  width: 8%;
  margin-left: 2%;
}

.value-up {
  font-weight: bold;
{% if upArrowColor %}
    color: {{upArrowColor}};
{% endif %}
}

.value-down {
  font-weight: bold;
{% if downArrowColor %}
    color: {{downArrowColor}};
{% endif %}
}

.value-equal {
  font-weight: bold;
{% if equalArrowColor %}
    color: {{equalArrowColor}};
{% endif %}
}

.name-stock {
  color: gray;
}
            ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
// Template renderer options
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
var overrideItemPerPage = {
    itemsPerPage: 0,
};
$(target).xiboLayoutScaler($.extend({}, properties, overrideItemPerPage));

// Get template items
var templateItems = $(target).find(".template-item");

// Get body
var body = $(target).find(".template-container");

$(target).find("#content").xiboFinanceRender(properties, templateItems, body);
$(target).find("img").xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
        <assets>
            <asset id="currencies2" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/currency/currencies2.png"></asset>
            <asset id="flags" type="path" mimeType="image/webp" path="/modules/assets/currency/flags.webp"></asset>
            <asset id="flagsCSS" type="path" mimeType="text/css" path="/modules/assets/currency/flags.css"></asset>
        </assets>
    </template>
</templates>
