<xf:if is="$threads is not empty">
<xf:css src="wte_widget_default.less"/>
<xf:js src="Truonglv/WidgetThreadEnhance/widget.js" min="true" addon="Truonglv/WidgetThreadEnhance" />
<xf:css src="carousel.less" />
<xf:css src="lightslider.less" />
<xf:js prod="xf/carousel-compiled.js" dev="vendor/lightslider/lightslider.min.js, xf/carousel.js" />
<div class="block wte-widget"
{{ $autoRefreshConfig|raw }}
{{ widget_data($widget) }}>
<xf:if is="$options.show_expanded_title AND $title">
<div class="block-container">
<h3 class="block-header wte-header--carousel">{$title|raw}</h3>
</div>
</xf:if>
<div class="carousel carousel--withFooter wte-widget--articles wte-widget--carousel js-threadList">
<ul class="carousel-body carousel-body--show1" data-xf-init="carousel">
<xf:foreach loop="$threads" value="$thread">
<li>
<div class="carousel-item wte-article--item">
<xf:macro name="article_item"
arg-allowInlineMod="{{ false }}"
arg-options="{$options}"
arg-post="{$thread.FirstPost}"
arg-forum="{$thread.Forum}"
arg-thread="{$thread}" />
</div>
</li>
</xf:foreach>
</ul>
</div>
</div>
</xf:if>
<xf:macro name="article_item" arg-thread="!" arg-post="!" arg-forum="!" arg-options="!">
<xf:css src="message.less" />
<xf:set var="$link" value="{{ link('threads', $thread) }}" />
<xf:set var="$linkUnread" value="{{ link('threads' . (($thread.isUnread() AND $options.show_unread) ? '/unread' : ''), $thread) }}" />
<xf:set var="$username"><xf:username user="{$thread.User}" defaultname="{$thread.username}" class="u-concealed" /></xf:set>
<xf:set var="$ldJson" value="{{ $post ? $thread.getLdStructuredData($post) : null }}" />
<article class="message message--article message--articlePreview {{
$thread.discussion_state == 'moderated' ? 'is-moderated' : '' }}{{
$thread.discussion_state == 'deleted' ? 'is-deleted' : ''
}} js-inlineModContainer js-threadListItem-{$thread.thread_id}">
<div class="articlePreview-main">
<xf:if is="$thread.cover_image">
<a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{$thread.cover_image}')"
aria-hidden="true" tabindex="-1"> </a>
</xf:if>
<div class="articlePreview-text">
<div class="articlePreview-headline">
<h2 class="articlePreview-title">
<xf:if is="$thread.discussion_state == 'moderated'">
<xf:fa icon="fa-shield" class="structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}" />
<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
<xf:elseif is="$thread.discussion_state == 'deleted'" />
<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('deleted') }}</span>
</xf:if>
<xf:if is="$thread.prefix_id">
<xf:if is="$forum">
<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>
<xf:else />
{{ prefix('thread', $thread, 'html', '') }}
</xf:if>
</xf:if>
<a href="{$linkUnread}">{$thread.title}</a>
</h2>
</div>
<div class="articlePreview-content">
<div class="message-content js-messageContent" data-xf-init="lightbox">
<div class="message-userContent lbContainer js-lbContainer"
data-lb-id="post-{$post.post_id}"
data-lb-caption-desc="{{ $post.User ? $post.User.username : $post.username }} · {{ date_time($post.post_date) }}">
<article class="message-body">
{{ snippet($post.message, $options.article_snippet_length, {
'stripQuote': true,
'bbWrapper': true
}) }}
</article>
</div>
</div>
</div>
<div class="articlePreview-links">
<ul class="articlePreview-statuses">
<xf:if is="$thread.isUnread()">
<li><span class="message-newIndicator" title="{{ !$post.isUnread() ? phrase('new_replies') : '' }}">{{ phrase('new') }}</span></li>
</xf:if>
<xf:if is="{$xf.visitor.user_id} AND {$thread.Watch.{$xf.visitor.user_id}}">
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('thread_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('thread_watched') }}</span>
</li>
<xf:elseif is="!$forum AND {$thread.Forum.Watch.{$xf.visitor.user_id}}" />
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('forum_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('forum_watched') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_state == 'moderated'">
<li>
<i class="structItem-status structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted'">
<li>
<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('deleted') }}</span>
</li>
</xf:if>
<xf:if is="!$thread.discussion_open">
<li>
<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('locked') }}</span>
</li>
</xf:if>
<xf:if is="$thread.sticky">
<li>
<i class="structItem-status structItem-status--sticky" aria-hidden="true" title="{{ phrase('sticky')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('sticky') }}</span>
</li>
</xf:if>
</ul>
<a href="{$link}">{{ phrase('view_full_article') }} ></a>
</div>
</div>
</div>
<footer class="articlePreview-footer">
<ul class="articlePreview-meta listPlain">
<li><xf:avatar user="{$thread.User}" size="xxs" defaultname="{$thread.username}"/></li>
<li class="articlePreview-by">{{ phrase('by_user_x', {'name':$username}) }}</li>
<li><a href="{$link}" class="u-concealed" rel="nofollow"><xf:date time="{$thread.post_date}"/></a></li>
<li class="u-flexStretch"><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}"
class="u-concealed"
data-xf-init="share-tooltip"
data-href="{{ link('posts/share', $post) }}"
aria-label="{{ phrase('share')|for_attr }}"
rel="nofollow">
<xf:fa icon="fa-share-alt"/>
</a></li>
<xf:if is="$thread.reply_count">
<li class="articlePreview-replies"><a href="{$linkUnread}"
title="{{ phrase('replies:') }} {$thread.reply_count|number}">
<xf:fa icon="fa-comment" class="u-spaceAfter" /><span class="articlePreview-repliesLabel">{{ phrase('replies:') }} </span>{$thread.reply_count|number}</a></li>
</xf:if>
</ul>
</footer>
<xf:if is="$ldJson">
<script type="application/ld+json">
{$ldJson|json(true)|raw}
</script>
</xf:if>
</article>
</xf:macro>
