<!--
  ~ 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 Color</title>
                <default>%THEME_COLOR%</default>
            </property>
            <property id="fontSize" type="number">
                <title>Font Size</title>
                <default>40</default>
            </property>
            <property id="lineHeight" type="number">
                <title>Line Height</title>
                <default>1.2</default>
            </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>
            </property>
            <property id="justify" type="checkbox">
                <title>Justify</title>
                <helpText>Should the text be justified?</helpText>
                <default>0</default>
                <visibility>
                    <test>
                        <condition field="textWrap" type="eq">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 Color</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>
                <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 fontSize}}font-size: {{fontSize}}px;{{/if}}
    {{#if fontColor}}color: {{fontColor}};{{/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 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 verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if textWrap}}
        white-space: break-spaces;
        {{#if justify}}
            text-align: justify;
        {{/if}}
    {{else}}
        white-space: nowrap;
    {{/if}}
    {{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if textWrap}}white-space: break-spaces;{{else}}white-space: nowrap;{{/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>
        </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 Color</title>
                <default>%THEME_COLOR%</default>
            </property>
            <property id="fontSize" type="number">
                <title>Font Size</title>
                <default>40</default>
            </property>
            <property id="lineHeight" type="number">
                <title>Line Height</title>
                <default>1.2</default>
            </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>
            </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 Color</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>
                <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 fontSize}}font-size: {{fontSize}}px;{{/if}}
    {{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
    {{#if fontColor}}color: {{fontColor}};{{/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 horizontalAlign}}justify-content: {{horizontalAlign}};{{/if}}
    {{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
    {{#if textWrap}}white-space: break-spaces;{{else}}white-space: nowrap;{{/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');
    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);
});
        ]]></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>
                <default>https://xibosignage.com/dist/img/header-logo.svg</default>
            </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="neq">fill</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="neq">fill</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>
        </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}}">
    {{#if url}}
        <img src="{{{url}}}" style="
            width:100%; height: 100%;
            object-fit: {{objectFit}};
            object-position: {{alignId}} {{valignId}};
            opacity: {{opacity}}%;
            position: absolute; top: 0; left: 0;"
        />
    {{/if}}
</div>
            ]]></hbs>
        </stencil>
        <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>
    </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>Color</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 Color</title>
                <default>#1775F6</default>
            </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 Color</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="background-color: {{backgroundColor}};
    {{#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 Color</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 Color</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>
        <symbol id="circle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
            <circle
                {{#if outline }}
                    r="calc(50 - calc({{outlineWidth}} / 4))"
                {{else}}
                    r="50"
                {{/if}}
                {{# 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>
        <assets>
            <asset id="circle-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/circle.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 Color</title>
                <default>#1775F6</default>
            </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 Color</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>
        <symbol id="triangle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
            <polygon points="1,99 50,1 99,99"
                {{#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>
        <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 Color</title>
                <default>#1775F6</default>
            </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 Color</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>
        <symbol id="pentagon_{{uniqueID}}" viewBox="0 0 100 93" preserveAspectRatio="xMidYMid meet">
            <polygon points="50,1 99,36 83.33,93 16.67,93 1,36"
                {{#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>
        <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 Color</title>
                <default>#1775F6</default>
            </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 Color</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>
        <symbol id="hexagon_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
            <polygon points="50,1 99,24.5 99,73.5 50,99 1,73.5 1,24.5"
                {{#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>
        <assets>
            <asset id="hexagon-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/hexagon.png" />
        </assets>
    </template>
</templates>
