<!--
  ~ 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>message_custom_html</id>
        <type>static</type>
        <dataType>message</dataType>
        <showIn>none</showIn>
        <properties>
            <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="template" type="richText" allowLibraryRefs="true" variant="html">
                <title>Main Template</title>
                <helpText>The template for formatting your notifications. Enter [Subject] and [Body] with your desired formatting. Enter text or HTML in the box below.</helpText>
            </property>
            <property id="dateFormatSnippets" type="snippet" mode="options" target="template">
                <title>Snippets</title>
                <helpText>Choose element to add to template</helpText>
                <options>
                    <option name="Subject">Subject</option>
                    <option name="Body">Body</option>
                    <option name="Date">Date</option>
                </options>
            </property>
            <property id="embedStyle" type="code" allowLibraryRefs="true" variant="css">
                <title>Custom Style Sheets</title>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when there are no notifications to show. Enter text or HTML in the box below.</helpText>
            </property>
            <property id="effect" type="effectSelector" variant="all">
                <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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
                <visibility>
                    <test>
                        <condition field="effect" type="neq">noTransition</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <stencil>
            <twig><![CDATA[
{% if javaScript %}
<script type="text/javascript">
    {{javaScript|raw}}
</script>
{% endif %}
        ]]></twig>
        <style><![CDATA[
{{embedStyle|raw}}
        ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------

// Adjust some misformed template options.
if (properties.template && properties.template.indexOf('[Body]') >= 0) {
    properties.template = properties.template.replace('[Body]', '[body]');
}
if (properties.template && properties.template.indexOf('[Subject]') >= 0) {
    properties.template = properties.template.replace('[Subject]', '[subject]');
}
if (properties.template && properties.template.indexOf('[Date]') >= 0) {
    properties.template = properties.template.replace('[Date]', '[date]');
}

if (items.length > 0) {
    items = $(items).xiboSubstitutesParser(properties.template, properties.dateFormat, ['date', 'createdAt']);
}

// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    items.push(properties.noDataMessage);
}

// Clear container
$(target).find('#content').empty();

// Add items to container
for (var index = 0; index < items.length; index++) {
  $(items[index]).appendTo($(target).find('#content'));
}

// Render
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > *'));
$(target).find('img').xiboImageRender(properties);
        ]]></onTemplateRender>
        <onTemplateVisible><![CDATA[
// Start effects for this template
$(target).xiboLayoutAnimate(properties);
        ]]></onTemplateVisible>
    </template>
</templates>
