<!--
  ~ 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>article_custom_html</id>
        <type>static</type>
        <dataType>article</dataType>
        <showIn>none</showIn>
        <title>Articles shown with custom HTML</title>
        <properties>
            <property id="customTemplate" type="hidden">
                <default>1</default>
            </property>
            <property id="moduleType" type="hidden">
                <default>article</default>
            </property>
            <property id="effect" type="effectSelector" variant="all">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="itemsSideBySide" type="checkbox">
                <title>Show items side by side?</title>
                <helpText>Should items be shown side by side?</helpText>
                <default>0</default>
            </property>
            <property id="itemsPerPage" type="number">
                <title>Items per page</title>
                <helpText>If an effect has been selected from the General tab, how many pages should we split the items across? If you don't enter anything here 1 item will be put on each page.</helpText>
                <default>1</default>
            </property>
            <property id="dateFormat" type="text" variant="dateFormat">
                <title>Date Format</title>
                <helpText>The format to apply to all dates returned by the Widget.</helpText>
                <default>#DATE_FORMAT#</default>
            </property>
            <property id="backgroundColor" type="color">
                <title>Background Colour</title>
                <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
                <default></default>
            </property>
            <property id="textDirection" type="dropdown" mode="single">
                <title>Text direction</title>
                <helpText>Which direction does the text in the feed use?</helpText>
                <default>ltr</default>
                <options>
                    <option name="ltr">Left to Right (LTR)</option>
                    <option name="rtl">Right to Left (RTL)</option>
                </options>
            </property>
            <property id="template" type="code" allowLibraryRefs="true" variant="html">
                <title>Item Template</title>
                <helpText>Enter text in the box below, used to display each article.</helpText>
            </property>
            <property id="dataTypeSnippets" type="snippet" mode="dataType" target="template">
                <title>Snippets</title>
                <helpText>Choose element to add to template</helpText>
            </property>
            <property id="noDataMessage" type="code" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="css" type="code" allowLibraryRefs="true" variant="css">
                <title>Optional Stylesheet Template</title>
            </property>
            <property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
                <title>Optional JavaScript</title>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <twig><![CDATA[
{% if javaScript %}<script type="text/javascript">{{javaScript}}</script>{% endif %}
{% if css or itemsSideBySide or backgroundColor or textDirection == "rtl" %}
<style>
{% if itemsSideBySide %}.text-render-item, .page { float: left; }{% endif %}
{% if textDirection == "rtl" %}#content { direction: rtl; }{% endif %}
{% if backgroundColor %}body { background-color: {{backgroundColor}}; }{% endif %}
{{css}}
</style>
{% endif %}
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
if (items.length > 0) {
    items = $(items).xiboSubstitutesParser(properties.template, properties.dateFormat, ['date', 'publishedDate'], {
        description: 'summary',
        copyright: 'author',
    });
}

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

// Copyright
if (properties.copyright) {
    items.push({
        title: properties.copyright
    });
}

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

// Add items to container
for (var index = 0; index < items.length; index++) {
  var $newItem = $('<div>').addClass('item').html(items[index]);
  $(target).find('#content').append($newItem);
}

// Render
$(target).find('img').xiboImageRender(properties);

$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > *'));
        ]]></onTemplateRender>
    </template>
    <template>
        <id>article_image_only</id>
        <type>static</type>
        <dataType>article</dataType>
        <title>Image only</title>
        <thumbnail>article_image_only</thumbnail>
        <startWidth>600</startWidth>
        <startHeight>400</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background</title>
                <default></default>
            </property>
            <property id="itemImageFit" type="dropdown" mode="single">
                <title>Image Fit</title>
                <helpText>How should images be scaled by default?</helpText>
                <default>contain</default>
                <options>
                    <option name="contain">Contain</option>
                    <option name="cover">Cover</option>
                    <option name="fill">Fill</option>
                </options>
            </property>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="image">
    {{#if image}}<img src="{{image}}"/>{{/if}}
</div>
            ]]></hbs>
            <twig><![CDATA[
<style>
#content, .text-render-item, .image, .image img {
    width:100%; height: 100%;
}
.image img {
    object-fit: {{itemImageFit}} !important;
}
{% if backgroundColor %}
body {
    background-color: {{backgroundColor}};
}
{% endif %}
{% if copyright %}
.copyright {
    width: 100%;
    height: 100%;
    text-align: center;
}
.copyright span {
    position: relative;
    font-size: 30px;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}
{% endif %}
</style>
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    $(target).find('#content').append(properties.noDataMessage);
}

// Add copyright if we have at least one item
// and copyright is not already added
if (
    properties.copyright &&
    $(target).find('#content > .image').length > 0 &&
    $(target).find('#content > .copyright').length <= 0
) {
    $(target).find('#content').append(
        $('<div class="copyright"><span>' + properties.copyright + '</span></div>')
    );

    // Increase numItems to include the copyright
    properties.numItems = parseInt(properties.numItems) + 1;
}

// Render
$(target).find('img').xiboImageRender(properties);
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
        ]]></onTemplateRender>
        <assets>
            <asset id="article_image_only" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-only.png" />
        </assets>
    </template>
    <template>
        <id>article_with_left_hand_text</id>
        <type>static</type>
        <dataType>article</dataType>
        <title>Image overlaid with the Feed Content on the Left</title>
        <thumbnail>article_with_left_hand_text</thumbnail>
        <startWidth>600</startWidth>
        <startHeight>400</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background</title>
                <default></default>
            </property>
            <property id="itemBackgroundColor" type="color">
                <title>Background (content)</title>
                <default></default>
            </property>
            <property id="itemTitleColor" type="color">
                <title>Title</title>
                <default></default>
            </property>
            <property id="itemDescriptionColor" type="color">
                <title>Description</title>
                <default></default>
            </property>
            <property id="itemFontSize" type="number">
                <title>Font Size</title>
                <default></default>
            </property>
            <property id="itemImageFit" type="dropdown" mode="single">
                <title>Image Fit</title>
                <helpText>How should images be scaled by default?</helpText>
                <default>contain</default>
                <options>
                    <option name="contain">Contain</option>
                    <option name="cover">Cover</option>
                    <option name="fill">Fill</option>
                </options>
            </property>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="image">
  {{#if image}}<img src="{{image}}"/>{{/if}}
  <div class="cycle-overlay background">
    <div class="title">{{title}}</div>
    <div class="description">{{{summary}}}</div>
  </div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<style>
html {
  /* Global font size, change for font scale */
  font-size: 16px;
}

#content, .text-render-item, .image, .image img {
  width: 100%;
  height: 100%;
}

.cycle-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: black;
  opacity: .6;
  filter: alpha(opacity=60);
  position: absolute;
  bottom: 0;
  top: 0px;
  width: 20%;
  height: 100%;
  padding: 0.8rem;
}

.cycle-overlay>div {
  font-family: Arial, Verdana, sans-serif;
}

.cycle-overlay .title {
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}

.cycle-overlay .description {
  font-size: 1rem;
  margin-top: 1rem;
}

{% if backgroundColor %}
body {
    background-color: {{backgroundColor}};
}

{% endif %}
{% if itemImageFit %}
.image img {
  object-fit: {{itemImageFit}};
}
{% endif %}

{% if itemBackgroundColor %}
.background {
  background-color: {{itemBackgroundColor}} !important;
}
{% endif %}

{% if itemTitleColor %}
.title {
  color: {{itemTitleColor}} !important;
}
{% endif %}

{% if itemDescriptionColor %}
.description {
  color: {{itemDescriptionColor}} !important;
}
{% endif %}

{% if itemFontSize %}
html {
  font-size: {{itemFontSize}}px !important;
}
{% endif %}

{% if copyright %}
.copyright {
    width: 100%;
    height: 100%;
    text-align: center;
}
.copyright span {
    position: relative;
    font-size: 30px;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}
{% endif %}
</style>
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    $(target).find('#content').append(properties.noDataMessage);
}

// Add copyright if we have at least one item
// and copyright is not already added
if (
    properties.copyright &&
    $(target).find('#content > .image').length > 0 &&
    $(target).find('#content > .copyright').length <= 0
) {
    $(target).find('#content').append(
        $('<div class="copyright"><span>' + properties.copyright + '</span></div>')
    );

    // Increase numItems to include the copyright
    properties.numItems = parseInt(properties.numItems) + 1;
}

// Render
$(target).find('img').xiboImageRender(properties);
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
        ]]></onTemplateRender>
        <assets>
            <asset id="article_with_left_hand_text" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-with-left-hand-text.png" />
        </assets>
    </template>
    <template>
        <id>article_with_title</id>
        <type>static</type>
        <dataType>article</dataType>
        <title>Image overlaid with the Title</title>
        <thumbnail>article_with_title</thumbnail>
        <startWidth>600</startWidth>
        <startHeight>400</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background</title>
                <default></default>
            </property>
            <property id="itemBackgroundColor" type="color">
                <title>Background (content)</title>
                <default></default>
            </property>
            <property id="itemTitleColor" type="color">
                <title>Title</title>
                <default></default>
            </property>
            <property id="itemFontSize" type="number">
                <title>Font Size</title>
                <default></default>
            </property>
            <property id="itemImageFit" type="dropdown" mode="single">
                <title>Image Fit</title>
                <helpText>How should images be scaled by default?</helpText>
                <default>contain</default>
                <options>
                    <option name="contain">Contain</option>
                    <option name="cover">Cover</option>
                    <option name="fill">Fill</option>
                </options>
            </property>
            <property id="effect" type="effectSelector" variant="showPaged">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="image">
  {{#if image}}<img src="{{image}}"/>{{/if}}
  <div class="cycle-overlay background">
    <div class="title">{{title}}</div>
  </div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<style>
html {
  /* Global font size, change for font scale */
  font-size: 16px;
}

#content, .text-render-item, .image, .image img {
  width: 100%;
  height: 100%;
}

.image img {
  object-fit: cover;
}

.cycle-overlay {
  color: white;
  background: black;
  opacity: .6;
  filter: alpha(opacity=60);
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 2rem 0;
  text-align: center;
}

.cycle-overlay>div {
  font-family: Arial, Verdana, sans-serif;
}

.cycle-overlay .title {
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}

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

{% if itemImageFit %}
.image img {
  object-fit: {{itemImageFit}};
}
{% endif %}

{% if itemBackgroundColor %}
.background {
  background-color: {{itemBackgroundColor}} !important;
}
{% endif %}

{% if itemTitleColor %}
.title {
  color: {{itemTitleColor}} !important;
}
{% endif %}

{% if itemFontSize %}
html {
  font-size: {{itemFontSize}}px !important;
}
{% endif %}

{% if copyright %}
.copyright {
    width: 100%;
    height: 100%;
    text-align: center;
}
.copyright span {
    position: relative;
    font-size: 30px;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}
{% endif %}
</style>
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    $(target).find('#content').append(properties.noDataMessage);
}

// Add copyright if we have at least one item
// and copyright is not already added
if (
    properties.copyright &&
    $(target).find('#content > .image').length > 0 &&
    $(target).find('#content > .copyright').length <= 0
) {
    $(target).find('#content').append(
        $('<div class="copyright"><span>' + properties.copyright + '</span></div>')
    );

    // Increase numItems to include the copyright
    properties.numItems = parseInt(properties.numItems) + 1;
}

// Render
$(target).find('img').xiboImageRender(properties);
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
        ]]></onTemplateRender>
        <assets>
            <asset id="article_with_title" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-with-title.png" />
        </assets>
    </template>
    <template>
        <id>article_with_desc_and_name_separator</id>
        <type>static</type>
        <dataType>article</dataType>
        <title>Prominent title with description and name separator</title>
        <thumbnail>article_with_desc_and_name_separator</thumbnail>
        <startWidth>600</startWidth>
        <startHeight>600</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background</title>
                <default></default>
            </property>
            <property id="itemTitleColor" type="color">
                <title>Title</title>
                <default></default>
            </property>
            <property id="itemDescriptionColor" type="color">
                <title>Description</title>
                <default></default>
            </property>
            <property id="itemNameColor" type="color">
                <title>Name</title>
                <default></default>
            </property>
            <property id="itemFontSize" type="number">
                <title>Font Size</title>
                <default></default>
            </property>
            <property id="effect" type="effectSelector" variant="all">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="article">
    <div><div class="name">{{author}}</div></div>
    <div><div class="title"><strong>{{title}}</strong></div></div>
    <div><div class="description">{{{summary}}}</div></div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<style>
html {
    /* Global font size, change for font scale */
    font-size: 16px;
}

.text-render-item {
    padding: 1rem;
}

.text-render-item.cycle-slide {
    width: calc(100% - 2rem) !important;
}

.article > div {
    font-family: Arial, Verdana, sans-serif;
}

.name {
    font-size: 2rem;
}

.description, .title {
    font-size: 3rem;
}

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

{% if itemTitleColor %}
.title {
  color: {{itemTitleColor}} !important;
}
{% endif %}

{% if itemDescriptionColor %}
.description {
  color: {{itemDescriptionColor}} !important;
}
{% endif %}

{% if itemNameColor %}
.name {
  color: {{itemNameColor}} !important;
}
{% endif %}

{% if itemFontSize %}
html {
  font-size: {{itemFontSize}}px !important;
}
{% endif %}

{% if copyright %}
.copyright {
    width: 100%;
    height: 100%;
    text-align: center;
}
.copyright span {
    position: relative;
    font-size: 30px;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}
{% endif %}
</style>
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    $(target).find('#content').append(properties.noDataMessage);
}

// Add copyright if we have at least one item
// and copyright is not already added
if (
    properties.copyright &&
    $(target).find('#content .article').length > 0 &&
    $(target).find('#content .copyright').length <= 0
) {
    $(target).find('#content').append(
        $('<div class="copyright"><span>' + properties.copyright + '</span></div>')
    );

    // Increase numItems to include the copyright
    properties.numItems = parseInt(properties.numItems) + 1;
}

// Render
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright'));
        ]]></onTemplateRender>
        <assets>
            <asset id="article_with_desc_and_name_separator" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/title-description-name.png" />
        </assets>
    </template>
    <template>
        <id>article_title_only</id>
        <type>static</type>
        <dataType>article</dataType>
        <title>Title Only</title>
        <thumbnail>article_title_only</thumbnail>
        <startWidth>600</startWidth>
        <startHeight>200</startHeight>
        <properties>
            <property id="backgroundColor" type="color">
                <title>Background</title>
                <default></default>
            </property>
            <property id="itemTitleColor" type="color">
                <title>Title</title>
                <default></default>
            </property>
            <property id="itemFontSize" type="number">
                <title>Font Size</title>
                <default></default>
            </property>
            <property id="effect" type="effectSelector" variant="all">
                <title>Effect</title>
                <helpText>Please select the effect that will be used to transition between items.</helpText>
                <default>noTransition</default>
            </property>
            <property id="speed" type="number">
                <title>Speed</title>
                <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                <default>1000</default>
            </property>
            <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                <title>No data message</title>
                <helpText>A message to display when no data is returned from the source</helpText>
            </property>
            <property id="copyright" type="text">
                <title>Copyright</title>
                <helpText>Copyright information to display as the last item in this feed.</helpText>
            </property>
        </properties>
        <stencil>
            <hbs><![CDATA[
<div class="article">
    <div><div class="title"><strong>{{title}}</strong></div></div>
</div>
            ]]></hbs>
            <twig><![CDATA[
<style>
html {
    /* Global font size, change for font scale */
    font-size: 16px;
}

.text-render-item {
    padding: 1rem;
}

.text-render-item.cycle-slide {
    width: calc(100% - 2rem) !important;
}

.article > div {
    font-family: Arial, Verdana, sans-serif;
}

.title {
    font-size: 3rem;
}

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

{% if itemTitleColor %}
.title {
  color: {{itemTitleColor}} !important;
}
{% endif %}

{% if itemFontSize %}
html {
  font-size: {{itemFontSize}}px !important;
}
{% endif %}

{% if copyright %}
.copyright {
    width: 100%;
    height: 100%;
    text-align: center;
}
.copyright span {
    position: relative;
    font-size: 30px;
    line-height: 0;
    top: 50%;
    transform: translateY(-50%);
}
{% endif %}
</style>
            ]]></twig>
        </stencil>
        <onTemplateRender><![CDATA[
// id: The id of the widget
// target: The target element to render
// items: The items to render
// properties: The properties for the widget
// -------------------------------------------
// No data message
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
    $(target).find('#content').append(properties.noDataMessage);
}

// Add copyright if we have at least one item
// and copyright is not already added
if (
    properties.copyright &&
    $(target).find('#content .article').length > 0 &&
    $(target).find('#content .copyright').length <= 0
) {
    $(target).find('#content').append(
        $('<div class="copyright"><span>' + properties.copyright + '</span></div>')
    );

    // Increase numItems to include the copyright
    properties.numItems = parseInt(properties.numItems) + 1;
}

// Render
$(target).xiboLayoutScaler(properties);
$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright'));
        ]]></onTemplateRender>
        <assets>
            <asset id="article_title_only" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/title-only.png" />
        </assets>
    </template>
</templates>
