<!--
  ~ 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>text</id>
        <title>Text</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>text-thumb</thumbnail>
        <startWidth>200</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="text" type="textArea">
                <title>Text</title>
                <default>Text</default>
            </property>
            <property id="fontFamily" type="fontSelector">
                <title>Font Family</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="fontColor" type="color">
                <title>Font Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="fitToArea" type="checkbox">
                <title>Fit to selection</title>
                <helpText>Fit to selected area instead of using the font size?</helpText>
                <default>0</default>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient for the text?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <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="lineHeight" type="number">
                <title>Line Height</title>
                <default>1.2</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="bold" type="checkbox">
                <title>Bold</title>
                <helpText>Should the text be bold?</helpText>
                <default>0</default>
            </property>
            <property id="italics" type="checkbox">
                <title>Italics</title>
                <helpText>Should the text be italicised?</helpText>
                <default>0</default>
            </property>
            <property id="underline" type="checkbox">
                <title>Underline</title>
                <helpText>Should the text be underlined?</helpText>
                <default>0</default>
            </property>
            <property id="textWrap" type="checkbox">
                <title>Text Wrap</title>
                <helpText>Should the text wrap to the next line?</helpText>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="justify" type="checkbox">
                <title>Justify</title>
                <helpText>Should the text be justified?</helpText>
                <default>0</default>
                <visibility>
                    <test type="and">
                        <condition field="textWrap" type="eq">1</condition>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="showOverflow" type="checkbox">
                <title>Show Overflow</title>
                <helpText>Should the widget overflow the region?</helpText>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="textShadow" type="checkbox">
                <title>Text Shadow</title>
                <default>0</default>
                <helpText>Should the text have a shadow?</helpText>
            </property>
            <property id="textShadowColor" type="color">
                <title>Text Shadow Colour</title>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowX" type="number">
                <title>Shadow X Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowY" type="number">
                <title>Shadow Y Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowBlur" type="number">
                <title>Shadow Blur</title>
                <default>2</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="horizontalAlign" type="dropdown">
                <title>Horizontal Align</title>
                <default>center</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
                <options>
                    <option name="flex-start">Left</option>
                    <option name="center">Center</option>
                    <option name="flex-end">Right</option>
                </options>
            </property>
            <property id="verticalAlign" type="dropdown">
                <title>Vertical Align</title>
                <default>center</default>
                <options>
                    <option name="flex-start">Top</option>
                    <option name="center">Middle</option>
                    <option name="flex-end">Bottom</option>
                </options>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-text"
    style="
    display: flex;
    {{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
    {{#if useGradient}}
        {{parseJSON "gb" gradient}}
        background-clip: text;
        color: transparent;
        {{#eq gb.type 'linear'}}
            background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
        {{else}}
            background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
        {{/eq}}
    {{else}}
        {{#if fontColor}}color: {{fontColor}};{{/if}}
    {{/if}}
    {{#if bold}}font-weight: bold;{{/if}}
    {{#if italics}}font-style: italic;{{/if}}
    {{#if underline}}text-decoration: underline;{{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if fitToArea}}
        white-space: nowrap;
    {{else}}
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        {{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
        {{#if horizontalAlign}}
            justify-content: {{horizontalAlign}};
        {{/if}}
        {{#eq horizontalAlign "flex-start"}}text-align: left;{{/eq}}
        {{#eq horizontalAlign "center"}}text-align: center;{{/eq}}
        {{#eq horizontalAlign "flex-end"}}text-align: right;{{/eq}}
            {{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
        {{#if textWrap}}
            white-space: break-spaces;
            {{#if justify}}
                text-align: justify;
            {{/if}}
        {{else}}
            white-space: nowrap;
        {{/if}}
    {{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
    width: 100%; height: 100%;"
>
{{#if escapeHtml}}
    <div>{{text}}</div>
{{else}}
    <div>{{{text}}}</div>
{{/if}}
</div>
            ]]></hbs>
        <onTemplateRender><![CDATA[
if(properties.fitToArea) {
    // Set target for the text
    properties.fitTarget = 'div';

    var $selector = $(target).is('.global-elements-text') ?
        $(target) : $(target).find('.global-elements-text');

    // Scale text to container
    $selector.xiboTextScaler(properties);
}
        ]]></onTemplateRender>
        </stencil>
        <assets>
            <asset id="text-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/text.png" />
        </assets>
    </template>
    <template>
        <id>date</id>
        <title>Date</title>
        <type>element</type>
        <dataType>global</dataType>
        <showIn>none</showIn>
        <canRotate>true</canRotate>
        <thumbnail>date-thumb</thumbnail>
        <startWidth>300</startWidth>
        <startHeight>80</startHeight>
        <properties>
            <property id="date" type="date" format="d/m/Y H:i:s" variant="dateTime">
                <title>Date</title>
                <default></default>
            </property>
            <property id="dateFormat" type="text" variant="dateFormat">
                <title>Date Format</title>
                <default>d/m/Y H:i:s</default>
            </property>
            <property id="lang" type="languageSelector" variant="momentLocales">
                <title>Language</title>
                <helpText>Select the language you would like to use.</helpText>
            </property>
            <property id="fontFamily" type="fontSelector">
                <title>Font Family</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="fontColor" type="color">
                <title>Font Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="fitToArea" type="checkbox">
                <title>Fit to selection</title>
                <helpText>Fit to selected area instead of using the font size?</helpText>
                <default>0</default>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient for the text?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <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="lineHeight" type="number">
                <title>Line Height</title>
                <default>1.2</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="bold" type="checkbox">
                <title>Bold</title>
                <helpText>Should the text be bold?</helpText>
                <default>0</default>
            </property>
            <property id="italics" type="checkbox">
                <title>Italics</title>
                <helpText>Should the text be italicised?</helpText>
                <default>0</default>
            </property>
            <property id="underline" type="checkbox">
                <title>Underline</title>
                <helpText>Should the text be underlined?</helpText>
                <default>0</default>
            </property>
            <property id="textWrap" type="checkbox">
                <title>Text Wrap</title>
                <helpText>Should the text wrap to the next line?</helpText>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="showOverflow" type="checkbox">
                <title>Show Overflow</title>
                <helpText>Should the widget overflow the region?</helpText>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="textShadow" type="checkbox">
                <title>Text Shadow</title>
                <default>0</default>
                <helpText>Should the text have a shadow?</helpText>
            </property>
            <property id="textShadowColor" type="color">
                <title>Text Shadow Colour</title>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowX" type="number">
                <title>Shadow X Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowY" type="number">
                <title>Shadow Y Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowBlur" type="number">
                <title>Shadow Blur</title>
                <default>2</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="horizontalAlign" type="dropdown">
                <title>Horizontal Align</title>
                <default>center</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
                <options>
                    <option name="flex-start">Left</option>
                    <option name="center">Center</option>
                    <option name="flex-end">Right</option>
                </options>
            </property>
            <property id="verticalAlign" type="dropdown">
                <title>Vertical Align</title>
                <default>center</default>
                <options>
                    <option name="flex-start">Top</option>
                    <option name="center">Middle</option>
                    <option name="flex-end">Bottom</option>
                </options>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-date"
    style="
    display: flex;
    {{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
    {{#if useGradient}}
        {{parseJSON "gb" gradient}}
        background-clip: text;
        color: transparent;
        {{#eq gb.type 'linear'}}
            background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
        {{else}}
            background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
        {{/eq}}
    {{else}}
        {{#if fontColor}}color: {{fontColor}};{{/if}}
    {{/if}}
    {{#if bold}}font-weight: bold;{{/if}}
    {{#if italics}}font-style: italic;{{/if}}
    {{#if underline}}text-decoration: underline;{{/if}}
    {{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if fitToArea}}
        white-space: nowrap;
    {{else}}
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        {{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
        {{#if horizontalAlign}}justify-content: {{horizontalAlign}};{{/if}}
    {{#if textWrap}}white-space: break-spaces;{{else}}white-space: nowrap;{{/if}}
    {{/if}}
    {{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
    width: 100%; height: 100%;"
>
<div class="date" data-date="{{date}}">{{date}}</div>
</div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
// Match all affected elements and get date div value
$(target).find('.date').each(function(_idx, dateEl){
    var dateValue = $(dateEl).data('date');

    if (String(dateValue).length === 0 || !dateValue) {
        $(dateEl).html('');
        return;
    }

    var globalDate = moment(dateValue);

    // Check for lang config
    if (properties.lang !== null && String(properties.lang).length > 0) {
        globalDate.locale(properties.lang);
    }

    // Format the date with the dateFormat property
    var formattedDate = globalDate.format(properties.dateFormat);

    // Set the date div value to the formatted date
    $(dateEl).html(formattedDate);


    if (properties.fitToArea) {
        // Set target for the text
        properties.fitTarget = '.date';

        var $selector = $(target).is('.global-elements-date') ?
            $(target) : $(target).find('.global-elements-date');

        // Scale text to container
        $selector.xiboTextScaler(properties);
    }
});
        ]]></onTemplateRender>
        <assets>
            <asset id="date-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/date.png" />
        </assets>
    </template>
    <template>
        <id>date_advanced</id>
        <title>Date / Time</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>date-thumb</thumbnail>
        <startWidth>380</startWidth>
        <startHeight>80</startHeight>
        <properties>
            <property id="currentDate" type="checkbox">
                <title>Current date?</title>
                <helpText>Use the current date to be displayed.</helpText>
                <default>1</default>
            </property>
            <property id="offset" type="number">
                <title>Offset</title>
                <helpText>The offset in minutes that should be applied to the current date.</helpText>
                <default></default>
                <visibility>
                    <test>
                        <condition field="currentDate" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="date" type="date" format="DD/MM/Y HH:mm:ss" variant="dateTime">
                <title>Custom Date</title>
                <helpText>Insert date to be displayed.</helpText>
                <default></default>
                <visibility>
                    <test>
                        <condition field="currentDate" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="dateFormat" type="text" variant="dateFormat">
                <title>Date Format</title>
                <default>d/m/Y H:i:s</default>
            </property>
            <property id="lang" type="languageSelector" variant="momentLocales">
                <title>Language</title>
                <helpText>Select the language you would like to use.</helpText>
            </property>
            <property id="fontFamily" type="fontSelector">
                <title>Font Family</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="fontColor" type="color">
                <title>Font Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="fitToArea" type="checkbox">
                <title>Fit to selection</title>
                <helpText>Fit to selected area instead of using the font size?</helpText>
                <default>0</default>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient for the text?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <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="lineHeight" type="number">
                <title>Line Height</title>
                <default>1.2</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="bold" type="checkbox">
                <title>Bold</title>
                <helpText>Should the text be bold?</helpText>
                <default>0</default>
            </property>
            <property id="italics" type="checkbox">
                <title>Italics</title>
                <helpText>Should the text be italicised?</helpText>
                <default>0</default>
            </property>
            <property id="underline" type="checkbox">
                <title>Underline</title>
                <helpText>Should the text be underlined?</helpText>
                <default>0</default>
            </property>
            <property id="textWrap" type="checkbox">
                <title>Text Wrap</title>
                <helpText>Should the text wrap to the next line?</helpText>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="showOverflow" type="checkbox">
                <title>Show Overflow</title>
                <helpText>Should the widget overflow the region?</helpText>
                <default>1</default>
            </property>
            <property id="textShadow" type="checkbox">
                <title>Text Shadow</title>
                <default>0</default>
                <helpText>Should the text have a shadow?</helpText>
            </property>
            <property id="textShadowColor" type="color">
                <title>Text Shadow Colour</title>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowX" type="number">
                <title>Shadow X Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowY" type="number">
                <title>Shadow Y Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowBlur" type="number">
                <title>Shadow Blur</title>
                <default>2</default>
                <visibility>
                    <test>
                        <condition field="textShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="horizontalAlign" type="dropdown">
                <title>Horizontal Align</title>
                <default>center</default>
                <visibility>
                    <test>
                        <condition field="fitToArea" type="neq">1</condition>
                    </test>
                </visibility>
                <options>
                    <option name="flex-start">Left</option>
                    <option name="center">Center</option>
                    <option name="flex-end">Right</option>
                </options>
            </property>
            <property id="verticalAlign" type="dropdown">
                <title>Vertical Align</title>
                <default>center</default>
                <options>
                    <option name="flex-start">Top</option>
                    <option name="center">Middle</option>
                    <option name="flex-end">Bottom</option>
                </options>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-date-advanced"
    style="
    display: flex;
    {{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
    {{#if useGradient}}
        {{parseJSON "gb" gradient}}
        background-clip: text;
        color: transparent;
        {{#eq gb.type 'linear'}}
            background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
        {{else}}
            background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
        {{/eq}}
    {{else}}
        {{#if fontColor}}color: {{fontColor}};{{/if}}
    {{/if}}
    {{#if bold}}font-weight: bold;{{/if}}
    {{#if italics}}font-style: italic;{{/if}}
    {{#if underline}}text-decoration: underline;{{/if}}
    {{#if fitToArea}}
        white-space: nowrap;
    {{else}}
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        {{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
        {{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
        {{#if horizontalAlign}}justify-content: {{horizontalAlign}};{{/if}}
        {{#if textWrap}}white-space: break-spaces;{{else}}white-space: nowrap;{{/if}}
    {{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
    width: 100%; height: 100%;"
>
<div class="date-advanced"></div>
</div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
var $dateEl = $(target).find('.date-advanced');
var useCurrentDate = (properties.currentDate == 1);

if (useCurrentDate) {
    // Use current date

    let firstRun = true;

    var offset = properties.offset || 0;
    // Clear previous interval if exists
    if (window['updateInterval_' + id]) {
        clearInterval(window['updateInterval_' + id]);
    }

    // Update every second
    window['updateInterval_' + id] = setInterval(function() {
        // If element was removed, clear interval
        if(!$dateEl.is(':visible')) {
            clearInterval(window['updateInterval_' + id]);
            return;
        }

        // Update date value
        var currentDate = moment().add(offset, "m");

        // Check for lang config
        if (properties.lang !== null && String(properties.lang).length > 0) {
            currentDate.locale(properties.lang);
        }

        $dateEl.html(currentDate.format(properties.dateFormat));

        if (firstRun && properties.fitToArea) {
            // Set target for the text
            properties.fitTarget = '.date-advanced';

            var $selector = $(target).is('.global-elements-date-advanced') ?
                $(target) : $(target).find('.global-elements-date-advanced');

            // Scale text to container
            $(target).find('.global-elements-date-advanced').xiboTextScaler(properties);

            firstRun = false;
        }
    }, 1000);
} else {
    // Use custom date

    // If date is not defined, don't render
    if (String(properties.date).length === 0) {
        $dateEl.html('');
        return;
    }

    var customDate = moment(properties.date);

    // Check for lang config
    if (properties.lang !== null && String(properties.lang).length > 0) {
        customDate.locale(properties.lang);
    }

    // Format the date with the dateFormat property
    var formattedDate = customDate.format(properties.dateFormat);

    // Set the date div value to the formatted date
    $dateEl.html(formattedDate);

    if (properties.fitToArea) {
        // Set target for the text
        properties.fitTarget = '.date-advanced';

        var $selector = $(target).is('.global-elements-date-advanced') ?
            $(target) : $(target).find('.global-elements-date-advanced');

        // Scale text to container
        $selector.xiboTextScaler(properties);
    }
}
        ]]></onTemplateRender>
        <assets>
            <asset id="date-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/date.png" />
        </assets>
    </template>
    <template>
        <id>global_image</id>
        <type>element</type>
        <dataType>global</dataType>
        <title>Image</title>
        <thumbnail>image</thumbnail>
        <showIn>none</showIn>
        <startWidth>100</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="url" type="text">
                <title>Image URL</title>
                <helpText>Enter the URL of the image you want to use.</helpText>
            </property>
            <property id="opacity" type="number">
                <title>Opacity</title>
                <helpText>Should the image have some transparency? Choose from 0 to 100.</helpText>
                <default>100</default>
            </property>
            <property id="objectFit" type="dropdown" mode="single">
                <title>Scale type</title>
                <helpText>How should this image be scaled?</helpText>
                <default>contain</default>
                <options>
                    <option name="fill">Fill</option>
                    <option name="contain">Contain</option>
                    <option name="cover">Cover</option>
                </options>
            </property>
            <property id="alignId" type="dropdown" mode="single">
                <title>Horizontal Align</title>
                <helpText>How should this image be aligned?</helpText>
                <default>center</default>
                <options>
                    <option name="left">Left</option>
                    <option name="center">Centre</option>
                    <option name="right">Right</option>
                </options>
                <visibility>
                    <test>
                        <condition field="objectFit" type="eq">contain</condition>
                    </test>
                </visibility>
            </property>
            <property id="valignId" type="dropdown" mode="single">
                <title>Vertical Align</title>
                <helpText>How should this image be vertically aligned?</helpText>
                <default>middle</default>
                <options>
                    <option name="top">Top</option>
                    <option name="middle">Middle</option>
                    <option name="bottom">Bottom</option>
                </options>
                <visibility>
                    <test>
                        <condition field="objectFit" type="eq">contain</condition>
                    </test>
                </visibility>
            </property>
            <property id="roundBorder" type="checkbox">
                <title>Round Border</title>
                <default>0</default>
                <helpText>Should the image have rounded corners?</helpText>
                <visibility>
                    <test>
                        <condition field="objectFit" type="neq">contain</condition>
                    </test>
                </visibility>
            </property>
            <property id="borderRadius" type="number">
                <title>Border Radius</title>
                <default>20</default>
                <visibility>
                    <test type="and">
                        <condition field="roundBorder" type="eq">1</condition>
                        <condition field="objectFit" type="neq">contain</condition>
                    </test>
                </visibility>
            </property>
            <property id="imageShadow" type="checkbox">
                <title>Image Shadow</title>
                <default>0</default>
                <helpText>Should the image have a shadow?</helpText>
            </property>
            <property id="imageShadowColor" type="color">
                <title>Image Shadow Colour</title>
                <visibility>
                    <test>
                        <condition field="imageShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowX" type="number">
                <title>Shadow X Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="imageShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowY" type="number">
                <title>Shadow Y Offset</title>
                <default>1</default>
                <visibility>
                    <test>
                        <condition field="imageShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="shadowBlur" type="number">
                <title>Shadow Blur</title>
                <default>2</default>
                <visibility>
                    <test>
                        <condition field="imageShadow" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="assetId" type="hidden"></property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-image img-container"
    style="width:100%; height: 100%; overflow: hidden; position: relative;
    {{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}">
    <img src="{{#if assetId}}[[assetId={{assetId}}]]{{else}}{{{url}}}{{/if}}" style="
        width:100%; height: 100%;
        object-fit: {{objectFit}};
        object-position: {{alignId}} {{valignId}};
        opacity: {{opacity}}%;
        {{#if imageShadow}}
            filter: drop-shadow({{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{imageShadowColor}});
        {{/if}}
        position: absolute; top: 0; left: 0;"
    />
</div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
$(target).find('img').xiboImageRender(properties);
        ]]></onTemplateRender>
        <assets>
            <asset id="image" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/image.png" />
        </assets>
    </template>
    <template>
        <id>global_library_image</id>
        <extends override="url" with="mediaId">global_image</extends>
        <type>element</type>
        <title>Library Image</title>
        <dataType>global</dataType>
        <showIn>none</showIn>
        <canRotate>true</canRotate>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="imageReplace" type="imageReplaceControl">
                <title>Replace Image</title>
                <helpText>Select an image from the Toolbox and drop here to replace this element.</helpText>
            </property>
        </properties>
    </template>
    <template>
        <id>line</id>
        <title>Line</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>line-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="lineWidth" type="number">
                <title>Width</title>
                <default>5</default>
            </property>
            <property id="lineColor" type="color">
                <title>Colour</title>
                <default>%THEME_COLOR%</default>
            </property>
            <property id="lineStyle" type="dropdown" mode="single">
                <title>Style</title>
                <default>solid</default>
                <options>
                    <option name="solid">Solid</option>
                    <option name="dotted">Dotted</option>
                    <option name="dashed">Dashed</option>
                    <option name="double">Double</option>
                </options>
            </property>
            <property id="tip1Type" type="dropdown" mode="single">
                <title>Tip1 Type</title>
                <default>squared</default>
                <options>
                    <option name="squared">Squared</option>
                    <option name="diamond">Diamond</option>
                    <option name="line-arrow">Line Arrow</option>
                    <option name="solid-arrow">Solid Arrow</option>
                    <option name="circle">Circle</option>
                </options>
            </property>
            <property id="tip2Type" type="dropdown" mode="single">
                <title>Tip2 Type</title>
                <default>squared</default>
                <options>
                    <option name="squared">Squared</option>
                    <option name="diamond">Diamond</option>
                    <option name="line-arrow">Line Arrow</option>
                    <option name="solid-arrow">Solid Arrow</option>
                    <option name="circle">Circle</option>
                </options>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-line" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    {{#eq tip1Type "diamond"}}
        <g fill="{{lineColor}}" style="
                transform:
                translate(0, calc(50% - calc({{lineWidth}}px * 1.5 * 1.214)))
                scale(calc({{lineWidth}} * 0.75));
        ">
            <polygon points="0 2.5,2.5 5,5 2.5,2.5 0"></polygon>
        </g>
    {{/eq}}
    {{#eq tip2Type "diamond"}}
        <g fill="{{lineColor}}" style="
                transform:
                translate(calc(100% - calc({{lineWidth}}px * 3.75)), calc(50% - calc({{lineWidth}}px * 1.5 * 1.214)))
                scale(calc({{lineWidth}} * 0.75));
        ">
            <polygon points="0 2.5,2.5 5,5 2.5,2.5 0"></polygon>
        </g>
    {{/eq}}
    {{#*inline "lineArrow"}}
        <g fill="{{fillColor}}" style="
            transform:
            {{#eq tip "start"}}
                translate(3px, calc(50% - calc({{strokeWidth}}px * 3)))
            {{/eq}}
            {{#eq tip "end"}}
                translate(calc(100% - calc({{strokeWidth}}px * 4)), calc(50% - calc({{strokeWidth}}px * 3)))
            {{/eq}}
            scale(calc({{strokeWidth}} * 0.75))
        ">
            <polygon points="{{points}}"></polygon>
        </g>
    {{/inline}}
    {{#eq tip1Type "line-arrow"}}
        {{> lineArrow fillColor=lineColor strokeWidth=lineWidth points="0,4 4,0 5,1 2,4 5,7 4,8" tip="start" }}
    {{/eq}}
    {{#eq tip2Type "line-arrow"}}
        {{> lineArrow fillColor=lineColor strokeWidth=lineWidth points="0,1 1,0 5,4 1,8 0,7 3,4" tip="end" }}
    {{/eq}}
    {{#*inline "solidArrow"}}
        <g fill="{{fillColor}}"
            style="
                transform:
                {{#eq tip "start"}}
                    translate(0, calc(50% - calc(calc(calc({{strokeWidth}}px * 0.75) * 8) / 2)))
                {{/eq}}
                {{#eq tip "end"}}
                    translate(
                        calc(100% - calc(calc({{strokeWidth}}px * 0.75) * 5)),
                        calc(50% - calc(calc(calc({{strokeWidth}}px * 0.75) * 8) / 2))
                    )
                {{/eq}}
                scale(calc({{strokeWidth}} * 0.75));
        ">
            <polygon points="{{points}}" />
        </g>
    {{/inline}}
    {{#eq tip1Type "solid-arrow"}}
        {{> solidArrow fillColor=lineColor strokeWidth=lineWidth points="0,4 5,1 5,7" tip="start" }}
    {{/eq}}
    {{#eq tip2Type "solid-arrow"}}
        {{> solidArrow fillColor=lineColor strokeWidth=lineWidth points="0,1 0,7 5,4" tip="end" }}
    {{/eq}}
    {{#eq tip1Type "circle"}}
        <g fill="{{lineColor}}" style="
            transform:
                translate(calc({{lineWidth}}px * 1.5), 50%)
                scale(1.5);
        ">
            <circle r="{{lineWidth}}"></circle>
        </g>
    {{/eq}}
    {{#eq tip2Type "circle"}}
        <g fill="{{lineColor}}" style="
            transform:
                translate(calc(100% - calc({{lineWidth}}px * 1.5)), 50%)
                scale(1.5);
        ">
            <circle r="{{lineWidth}}"></circle>
        </g>
    {{/eq}}
</svg><div class="line"
    style="border-color: {{lineColor}};
    position: absolute;
    {{#if lineStyle }}border-style: {{lineStyle}};{{/if}}
        height: {{lineWidth}}px;
        border-width: {{lineWidth}}px 0 0 0;
        top: calc(50% - calc({{lineWidth}}px / 2));
        left: 0;
        width: 100%;
        {{#eq tip1Type "squared"}}
            {{#eq tip2Type "squared"}}{{else}}
                width: calc(100% - {{lineWidth}}px);
                left: 0;
                {{#eq tip2Type "line-arrow"}}
                    width: calc(100% - {{lineWidth}}px);
                {{/eq}}
            {{/eq}}
        {{else}}
            {{#eq tip2Type "squared"}}
                width: calc(100% - {{lineWidth}}px);
                left: {{lineWidth}}px;
            {{else}}
                width: calc(100% - calc({{lineWidth}}px * 2));
                left: {{lineWidth}}px;
            {{/eq}}
        {{/eq}}"
    ></div></div>
            ]]></hbs>
        </stencil>
        <assets>
            <asset id="line-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/line.png" />
        </assets>
    </template>
    <template>
        <id>rectangle</id>
        <title>Rectangle</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>square-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient as background?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="roundBorder" type="checkbox">
                <title>Round Border</title>
                <default>0</default>
                <helpText>Should the rectangle have rounded corners?</helpText>
            </property>
            <property id="borderRadius" type="number">
                <title>Border Radius</title>
                <default>20</default>
                <visibility>
                    <test>
                        <condition field="roundBorder" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the rectangle have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>8</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="rectangle-container"
    style="
    {{#if useGradient}}
        {{parseJSON "gb" gradient}}
        {{#eq gb.type 'linear'}}
            background: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
        {{else}}
            background: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
        {{/eq}}
    {{else}}
        background-color: {{backgroundColor}};
    {{/if}}
    {{#if outline}}border: {{outlineWidth}}px solid {{outlineColor}};{{/if}}
    {{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}
    width: 100%; height: 100%; box-sizing: border-box;"
>
</div>
            ]]></hbs>
        </stencil>
        <assets>
            <asset id="square-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/square.png" />
        </assets>
    </template>
    <template>
        <id>circle</id>
        <title>Circle</title>
        <type>element</type>
        <dataType>global</dataType>
        <thumbnail>circle-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient as background?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fit" type="checkbox">
                <title>Fit to area</title>
                <default>0</default>
                <helpText>Should the shape scale to fit the element area?</helpText>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the circle have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>8</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-circle" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        {{{createGradientInSVG gradient uniqueID}}}

        <symbol id="circle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
            <circle
                {{# if useGradient }}
                    {{parseJSON "gb" gradient}}
                    {{# eq gb.type 'linear'}}
                        fill="url(#gradLinear_{{uniqueID}})"
                    {{else}}
                        fill="url(#gradRadial_{{uniqueID}})"
                    {{/eq}}
                {{else if backgroundColor }}
                    fill="{{backgroundColor}}"
                {{else}}
                    fill="none"
                {{/if}}
                {{# if outline }}
                    {{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
                    {{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
                    vector-effect="non-scaling-stroke"
                {{/if}}
                cx="50%"
                cy="50%"
            ></circle>
        </symbol>
    </defs>
    <use href="#circle_{{uniqueID}}" width="100%" height="100%" />
</svg></div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
    // Calculate circle radius based on outlineWidth
    var circleRadius = properties.outline == 1 ?
        50 - (properties.outlineWidth / 4) : 50;
    var selector = $(target).is('.global-elements-circle') ? '' : '.global-elements-circle ';
    $(target).find(selector + 'svg symbol circle').attr('r', circleRadius);
        ]]></onTemplateRender>
        <assets>
            <asset id="circle-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/circle.png" />
        </assets>
    </template>
    <template>
        <id>ellipse</id>
        <title>Ellipse</title>
        <type>element</type>
        <dataType>global</dataType>
        <thumbnail>ellipse-thumb</thumbnail>
        <canRotate>true</canRotate>
        <startWidth>300</startWidth>
        <startHeight>200</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the circle have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>4</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-ellipse" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="ellipse_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="none">
            <ellipse
                {{# if backgroundColor }}
                    fill="{{backgroundColor}}"
                {{else}}
                    fill="none"
                {{/if}}
                {{# if outline }}
                    {{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
                    {{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
                    vector-effect="non-scaling-stroke"
                    rx="49"
                    ry="49"
                {{else}}
                    rx="50"
                    ry="50"
                {{/if}}
                cx="50"
                cy="50"
            ></ellipse>
        </symbol>
    </defs>
    <use href="#ellipse_{{uniqueID}}" width="100%" height="100%" />
</svg></div>
            ]]></hbs>
        </stencil>
        <assets>
            <asset id="ellipse-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/ellipse.png" />
        </assets>
    </template>
    <template>
        <id>triangle</id>
        <title>Triangle</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>triangle-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient as background?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fit" type="checkbox">
                <title>Fit to area</title>
                <default>0</default>
                <helpText>Should the shape scale to fit the element area?</helpText>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the triangle have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>8</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-triangle" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        {{{createGradientInSVG gradient uniqueID}}}

        <symbol id="triangle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
            <polygon points="0,100 50,0 100,100"
                {{# if useGradient }}
                    {{parseJSON "gb" gradient}}
                    {{# eq gb.type 'linear'}}
                        fill="url(#gradLinear_{{uniqueID}})"
                    {{else}}
                        fill="url(#gradRadial_{{uniqueID}})"
                    {{/eq}}
                {{else if backgroundColor }}
                    fill="{{backgroundColor}}"
                {{else}}
                    fill="none"
                {{/if}}
                {{#if outline }}
                    {{#if outlineColor}}stroke="{{outlineColor}}"{{/if}}
                    {{#if outlineWidth}}stroke-width="{{outlineWidth}}"{{/if}}
                    vector-effect="non-scaling-stroke"
                {{/if}}
                class="triangle"
            ></polygon>
        </symbol>
    </defs>
    <use href="#triangle_{{uniqueID}}" width="100%" height="100%" />
</svg></div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
// Calculate points based on outlineWidth
if(properties.outline == 1) {
    var outlineDeltaX = properties.outlineWidth / 4;
    var outlineDeltaY = properties.outlineWidth / 3;

    var calcPoints = outlineDeltaX + ',' + (100 - outlineDeltaY) + ' ' +
        '50,' + outlineDeltaY + ' ' +
        (100 - outlineDeltaX) + ',' + (100-outlineDeltaY);
    $(target).find('.global-elements-triangle svg symbol polygon').attr('points', calcPoints);
}
        ]]></onTemplateRender>
        <assets>
            <asset id="triangle-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/triangle.png" />
        </assets>
    </template>
    <template>
        <id>pentagon</id>
        <title>Pentagon</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>pentagon-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient as background?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fit" type="checkbox">
                <title>Fit to area</title>
                <default>0</default>
                <helpText>Should the shape scale to fit the element area?</helpText>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the pentagon have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>8</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-pentagon" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        {{{createGradientInSVG gradient uniqueID}}}

        <symbol id="pentagon_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
            <polygon points="50,0 100,36 83.33,100 16.67,100 0,36"
                {{# if useGradient }}
                    {{parseJSON "gb" gradient}}
                    {{# eq gb.type 'linear'}}
                        fill="url(#gradLinear_{{uniqueID}})"
                    {{else}}
                        fill="url(#gradRadial_{{uniqueID}})"
                    {{/eq}}
                {{else if backgroundColor }}
                    fill="{{backgroundColor}}"
                {{else}}
                    fill="none"
                {{/if}}
                {{#if outline }}
                    {{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
                    {{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
                    vector-effect="non-scaling-stroke"
                {{/if}}
            />
        </symbol>
    </defs>
    <use href="#pentagon_{{uniqueID}}" width="100%" height="100%"></use>
</svg></div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
// Calculate points based on outlineWidth
if(properties.outline == 1) {
    var outlineDelta = properties.outlineWidth / 4;
    var calcPoints = '50,' + outlineDelta + ' ' +
        (100 - outlineDelta) + ',36 ' +
        '83.33,' + (100 - outlineDelta) + ' ' +
        '16.67,' + (100 - outlineDelta) + ' ' +
        outlineDelta + ',36';
    $(target).find('.global-elements-pentagon svg symbol polygon').attr('points', calcPoints);
}
        ]]></onTemplateRender>
        <assets>
            <asset id="pentagon-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/pentagon.png" />
        </assets>
    </template>
    <template>
        <id>hexagon</id>
        <title>Hexagon</title>
        <type>element</type>
        <dataType>global</dataType>
        <canRotate>true</canRotate>
        <thumbnail>hexagon-thumb</thumbnail>
        <startWidth>250</startWidth>
        <startHeight>250</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <default>#1775F6</default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">0</condition>
                    </test>
                </visibility>
            </property>
            <property id="useGradient" type="checkbox">
                <title>Use gradient as background?</title>
                <default>0</default>
            </property>
            <property id="gradient" type="colorGradient">
                <title>Gradient</title>
                <default></default>
                <visibility>
                    <test>
                        <condition field="useGradient" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="fit" type="checkbox">
                <title>Fit to area</title>
                <default>0</default>
                <helpText>Should the shape scale to fit the element area?</helpText>
            </property>
            <property id="outline" type="checkbox">
                <title>Show Outline</title>
                <default>1</default>
                <helpText>Should the hexagon have an outline?</helpText>
            </property>
            <property id="outlineColor" type="color">
                <title>Outline Colour</title>
                <default>%THEME_COLOR%</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
            <property id="outlineWidth" type="number">
                <title>Outline Width</title>
                <default>8</default>
                <visibility>
                    <test>
                        <condition field="outline" type="eq">1</condition>
                    </test>
                </visibility>
            </property>
        </properties>
        <preview></preview>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-hexagon" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;"
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        {{{createGradientInSVG gradient uniqueID}}}

        <symbol id="hexagon_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
            <polygon points="50,0 100,24.5 100,73.5 50,100 0,73.5 0,24.5"
                {{# if useGradient }}
                    {{parseJSON "gb" gradient}}
                    {{# eq gb.type 'linear'}}
                        fill="url(#gradLinear_{{uniqueID}})"
                    {{else}}
                        fill="url(#gradRadial_{{uniqueID}})"
                    {{/eq}}
                {{else if backgroundColor }}
                    fill="{{backgroundColor}}"
                {{else}}
                    fill="none"
                {{/if}}
                {{#if outline }}
                    {{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
                    {{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
                    vector-effect="non-scaling-stroke"
                {{/if}}
            />
        </symbol>
    </defs>
    <use href="#hexagon_{{uniqueID}}" width="100%" height="100%"></use>
</svg></div>
            ]]></hbs>
        </stencil>
        <onTemplateRender><![CDATA[
// Calculate points based on outlineWidth
if(properties.outline == 1) {
    var outlineDelta = properties.outlineWidth / 4;
    var calcPoints = '50,' + outlineDelta + ' ' +
        (100 - outlineDelta) + ',24.5 ' +
        (100 - outlineDelta) + ',73.5 ' +
        '50,' + (100 - outlineDelta) + ' ' +
        outlineDelta + ',73.5' + ' ' +
        outlineDelta + ',24.5';
    $(target).find('.global-elements-hexagon svg symbol polygon').attr('points', calcPoints);
}
        ]]></onTemplateRender>
        <assets>
            <asset id="hexagon-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/hexagon.png" />
        </assets>
    </template>
    <template>
        <id>placeholder</id>
        <title>Placeholder</title>
        <type>element</type>
        <dataType>global</dataType>
        <showIn>none</showIn>
        <isVisible>false</isVisible>
        <thumbnail>placeholder-thumb</thumbnail>
        <startWidth>200</startWidth>
        <startHeight>100</startHeight>
        <properties>
            <property id="placeholderType" type="dropdown" mode="single">
                <title>Placeholder type</title>
                <helpText>Please select the type of placeholder to use as target.</helpText>
                <default>all</default>
                <options>
                    <option name="all">All</option>
                    <option name="image">Image</option>
                    <option name="global">Global</option>
                </options>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div data-placeholder-type="{{placeholderType}}">
<span>Placeholder: {{placeholderType}}</span>
</div>
            ]]></hbs>
            <style><![CDATA[
div[data-placeholder-type] {
    color: grey;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
            ]]></style>
        </stencil>
        <assets>
            <asset id="placeholder-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/placeholder.png" />
        </assets>
    </template>
    <template>
        <id>image_placeholder</id>
        <title>Image Placeholder</title>
        <canRotate>true</canRotate>
        <extends override="url">global_image</extends>
        <type>element</type>
        <dataType>global</dataType>
        <showIn>none</showIn>
        <isVisible>false</isVisible>
        <startWidth>200</startWidth>
        <startHeight>100</startHeight>
        <propertyGroups>
            <propertyGroup id="placeholderOptions" expanded="true">
                <title>Placeholder options</title>
                <helpText></helpText>
            </propertyGroup>
        </propertyGroups>
        <properties>
            <property id="placeholderMessage" type="text" propertyGroupId="placeholderOptions">
                <title>Placeholder message</title>
                <helpText></helpText>
                <default>Image Placeholder</default>
            </property>
            <property id="placeholderMessageColor" type="color" propertyGroupId="placeholderOptions">
                <title>Placeholder message colour</title>
                <helpText></helpText>
                <default>#333</default>
            </property>
            <property id="fontFamily" type="fontSelector" propertyGroupId="placeholderOptions">
                <title>Font Family</title>
                <helpText>Select a custom font - leave empty to use the default font.</helpText>
            </property>
            <property id="fontSize" type="number" propertyGroupId="placeholderOptions">
                <title>Font Size</title>
                <default>22</default>
            </property>
            <property id="placeholderBackgroundColor" type="color" propertyGroupId="placeholderOptions">
                <title>Placeholder background colour</title>
                <helpText></helpText>
                <default>#f9f9f9</default>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="global-elements-image img-container" style="width:100%; height: 100%; position: relative;">
    <img src="" style="
        width:100%; height: 100%;
        object-fit: {{objectFit}};
        object-position: {{alignId}} {{valignId}};
        opacity: {{opacity}}%;
        position: absolute; top: 0; left: 0;
        {{#if imageShadow}}
            filter: drop-shadow({{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{imageShadowColor}});
        {{/if}}
        {{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}
        background-color: {{placeholderBackgroundColor}};
        "
    />
    <div data-placeholder-type="image">
        <span style="color: {{placeholderMessageColor}};
        {{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
        {{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
        ">
            {{placeholderMessage}}</span>
    </div>
</div>
            ]]></hbs>
            <style><![CDATA[
div[data-placeholder-type] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
}
            ]]></style>
        </stencil>
        <onTemplateRender><![CDATA[
$(target).find('img').xiboImageRender(properties);
        ]]></onTemplateRender>
    </template>
</templates>
