<!--
  ~ 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>stocks_custom_html</id>
        <type>static</type>
        <dataType>stock</dataType>
        <showIn>none</showIn>
        <title>Stocks 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="dateFormat" type="text" variant="dateFormat">
                <title>Date Format</title>
                <helpText>The format to apply to all dates returned by the Widget.</helpText>
                <default>#DATE_FORMAT#</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>7</default>
            </property>
            <property id="customTemplate" type="hidden">
                <default>1</default>
            </property>
            <property id="moduleType" type="hidden">
                <default>stocks</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>Main Template</title>
            </property>
            <property id="itemTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
                <title>Item Template</title>
            </property>
            <property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
                <title>Optional Stylesheet</title>
            </property>
            <property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
                <title>Optional JavaScript</title>
                <helpText>Add JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.</helpText>
            </property>
        </properties>
        <stencil>
            <twig><![CDATA[
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}

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

<div class="item-template" style="display: none;">
{{itemTemplate|raw}}
</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 items
var items = $(target).find(".template-item");

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

$(target).find("#content").xiboFinanceRender(properties, items, body);
$(target).find("img").xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
        <assets>
            <asset id="stocks1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/stocks/stocks1.png" />
        </assets>
    </template>
    <template>
        <id>stocks1</id>
        <type>static</type>
        <dataType>stock</dataType>
        <title>Stocks 1</title>
        <thumbnail>stocks1</thumbnail>
        <startWidth>800</startWidth>
        <startHeight>450</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 stock item.</helpText>
                <default>#e0e0e0</default>
            </property>
            <property id="itemFontColor" type="color">
                <title>Item Font Colour</title>
                <helpText>Font colour for each stock item.</helpText>
                <default>#000</default>
            </property>
            <property id="itemLabelFontColor" type="color">
                <title>Item Label Font Colour</title>
                <helpText>Font colour for each stock item label.</helpText>
                <default>gray</default>
            </property>
            <property id="borderLeftColor" type="color">
                <title>Item Border Colour</title>
                <helpText>Border colour for each stock 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>7</default>
            </property>
        </properties>
        <stencil>
            <width id="width">820</width>
            <height id="height">420</height>
            <hbs><![CDATA[
<div class="row row-finance template-item">
    <div class="stock-col col-2 value name-stock">{{SymbolTrimmed}}</div>
    <div class="stock-col col-5 value ">{{Name}}</div>
    <div class="stock-col col-2 text-right value">{{LastTradePriceOnly}} {{CurrencyUpper}}</div>
    <div class="stock-col col-2 text-right value {{ChangeStyle}}">{{ChangePercentage}}%</div>
    <div class="stock-col col-1 text-right"><div class="{{ChangeIcon}}"></div></div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<div class="container-main template-container">
    <div class="container">
        <div id="cycle-container" class="items-container">
        </div>
    </div>
</div>
            ]]></twig>
            <style><![CDATA[
body {
 width: 820px !important;
 height: 420px !important;
}

{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}

.text-right {
    text-align: right;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.text-center {
 text-align: center;
}
 h1 {
 margin: 0.67em 0;
 font-size: 2em;
}

.container:after, .container:before, .row:after, .row:before {
    display: table;
    content: " ";
}
.container:after, .row:after {
    clear: both;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
{% if fontFamily %}
    font-family: {{fontFamily}};
{else}
    font-family: "Helvetica", "Arial", sans-serif;
{% endif %}
    line-height: 1;
}

.container-main {
    height: 420px !important;
    width: 820px !important;
}

.container {
    width: 820px !important;
    height: 420px !important;
    float: left;
    padding-top: 20px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

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

.row {
    margin-right: 0;
    margin-left: 0;
}

#cycle-container {
    margin-left: -15px;
    margin-right: -15px;
}

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

.down-arrow {
    margin: 15px 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: 15px 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: 10px 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 %}
}

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

.flags {
    padding-top: 4px;
}

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

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

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

.name-stock {
    {% if itemLabelFontColor %}
    color: {{itemLabelFontColor}};
    {% endif %}
}

.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-5 {
    width: 41.66666667%;
}

.stock-col {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
            ]]></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 items = $(target).find(".template-item");

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

$(target).find("#content").xiboFinanceRender(properties, items, body);
$(target).find("img").xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
        <assets>
            <asset id="stocks1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/stocks/stocks1.png" />
        </assets>
    </template>
    <template>
        <id>stocks2</id>
        <type>static</type>
        <dataType>stock</dataType>
        <title>Stocks 2</title>
        <thumbnail>stocks2</thumbnail>
        <startWidth>550</startWidth>
        <startHeight>350</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="itemFontColor" type="color">
                <title>Item Font Colour</title>
                <helpText>Font colour for each stock item.</helpText>
                <default>#000</default>
            </property>
            <property id="itemLabelFontColor" type="color">
                <title>Item Label Font Colour</title>
                <helpText>Font colour for each stock item label.</helpText>
                <default>gray</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">
                <default>1</default>
            </property>
        </properties>
        <stencil>
            <width id="width">500</width>
            <height id="height">380</height>
            <hbs><![CDATA[
<div class="row row-finance template-item">
    <div class="stock-col col-12 name">{{Name}}</div>
    <div class="stock-col col-12 subname">{{SymbolTrimmed}}</div>
    <div class="stock-col col-12 value-currency">{{LastTradePriceOnly}} {{CurrencyUpper}}</div>
    <div class="stock-col col-12 total">
        <div class="subtotal {{ChangeStyle}}">{{ChangePercentage}}%</div>
        <div class="subtotal {{ChangeIcon}}"></div>
    </div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<div class="container-main template-container">
    <div class="container">
        <div id="cycle-container" class="items-container">
        </div>
    </div>
</div>
            ]]></twig>
            <style><![CDATA[
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 500px !important;
    height: 380px !important;
{% if fontFamily %}
    font-family: {{fontFamily}};
{else}
    font-family: "Helvetica", "Arial", sans-serif;
{% endif %}
    line-height: 1;
}

{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}

.text-right {
    text-align: right;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 500px !important;
    height: 380px !important;
    float: left;
    margin: 0;
    padding: 0;
}

.text-center {
    text-align: center;
}

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

.container:after, .container:before, .row:after, .row:before {
    display: table;
    content: " ";
}

.container:after, .row:after {
    clear: both;
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container-main {
    height: 380px !important;
    width: 500px !important;
}

.row {
    margin: 0;
}

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

.value-currency {
    font-size: 45px;
    text-align: right;
    margin-bottom: 40px;
}

.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 %}
}

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

.flags {
    padding-top: 4px;
}

.live-title {
    font-size: 30px;
    font-weight: bold;
}

.time-title {
    font-size: 14px;
    padding-top: 10;
}

.name-stock {
{% if itemLabelFontColor %}
  color: {{itemLabelFontColor}};
{% endif %}
}

.name {
    font-size: 40px;
    margin-top: 40px;
}

.subname {
    font-size: 35px;
    margin-bottom: 30px;
{% if itemLabelFontColor %}
  color: {{itemLabelFontColor}};
{% endif %}
}

.total {
    margin-top: 30px;
    font-size: 80px;
    font-weight: bold;
}

.subtotal {
    display: inline-block;
}

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

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

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

.col-12 {
    width: 100%;
}

.stock-col {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.logo {
    height: 40px;
}
            ]]></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 items
var items = $(target).find(".template-item");

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

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