{% if (DISPLAY_RECENT_INDEX or DISPLAY_RECENT_PORTAL) and TSRAT_ENABLE %}
{% if ENABLE_XMAS %}
{% if (XMAS_TESTMODE and U_ACP) or not XMAS_TESTMODE %}
<div class="hat"></div>
{% endif %}
{% endif %}

<ul class="mt-2 grid md:gap-4 gap-2">
	<li class="card">
		<div class="flex items-center justify-between card-title">
			<div class="flex items-center gap-2">
				<i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i> {{ TSRAT_NUMBER }} {{ lang('RECENT_ACTIVE') }}
			</div>
            <div class="flex items-center justify-end gap-2">
                <div class="flex items-center gap-2 tsticker">
    				<a class="leading-[0]" href="#" title="{L_PREVIOUS_SCROLL}" id="ticker-previous"><i class="iconify" data-mode="style" data-icon="ph:arrow-circle-left" data-width="24" data-height="24" aria-hidden="true"<!-- IF S_CONTENT_DIRECTION eq 'rtl' --> data-flip="horizontal"<!-- ENDIF -->></i></span></a>
    				<a class="leading-[0]" href="#" title="{L_NEXT_SCROLL}" id="ticker-next"><i class="iconify" data-mode="style" data-icon="ph:arrow-circle-right" data-width="24" data-height="24" aria-hidden="true"<!-- IF S_CONTENT_DIRECTION eq 'rtl' --> data-flip="horizontal"<!-- ENDIF -->></i></a>
    				<a class="leading-[0]" href="#" title="{L_STOP_SCROLL}" id="stop"><i class="iconify" data-mode="style" data-icon="ph:pause-circle" data-width="24" data-height="24" aria-hidden="true"></i></a>
    				<a class="leading-[0]" href="#" title="{L_START_SCROLL}" id="start"><i class="iconify" data-mode="style" data-icon="ph:play-circle" data-width="24" data-height="24" aria-hidden="true"></i></a>
                </div>
    			{% if zeina.collapse_panel %}
    			<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="zn-collapse-button-top-stats-active" data-zn-collapse="#zn-category-collapse-top-stats-active">
    				<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
    			</div>
    			{% endif %}
            </div>
		</div>
		<div id="zn-category-collapse-top-stats-active" class="zn-collapse w-full overflow-hidden" aria-labelledby="zn-category-collapse-top-stats-active">
			<ul {% if S_TS_JSSCROLL %} id="vertical-ticker"{% endif %} class="topiclist forums divide-y md:p-4 md:mt-2 p-2 mt-1">
			    {% for recent_active in loops.recent_active %}
                <li class="py-4 first:pt-0 topic row">
    				<div class="row-item flex max-md:flex-col gap-4 max-md:gap-2 items-center">
    					<div class="starimg flex flex-wrap w-full md:justify-between relative gap-y-3 row-title">
    						<div class="flex flex-row grow gap-4">
    							<div class="topic-details ">
    								<div class="flex items-center gap-2 max-md:py-1">
									    <h3 class="text-sm font-semibold"><!-- IF recent_active.U_FIRST_TOPIC --><a href="{{ recent_active.U_FIRST_TOPIC }}" class="topictitle max-md:py-1">{{ recent_active.TOPIC_TITLE }}</a><!-- ELSE -->{{ recent_active.TOPIC_TITLE }}<!-- ENDIF --></h3>
                                    </div>
                                    <div class="topic-poster flex flex-wrap items-center gap-1 text-xs font-medium mt-0.5 text-secondary">
    									{{ lang('POST_BY_AUTHOR') }} <a style="font-weight:bold; color: #{{ recent_active.TOPIC_FIRST_POSTER_COLOUR }};" href="{{ recent_active.USERNAME_FIRST }}">{{ recent_active.TOPIC_FIRST_POSTER_NAME }}</a> &raquo; <span class="text-secondary">{{ recent_active.TOPIC_TIME }}</span>
    									&raquo; {L_IN} <a href="{{ recent_active.FORUM_URL }}">{{ recent_active.FORUM_NAME }}</a>
    								</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex max-lg:flex-col max-lg:gap-2 max-md:w-full md:border-0 md:p-0 p-3 border rounded-lg dark:border-slate-800">
    						<div class="lg:flex grid grid-cols-2 max-md:py-1">
    							<div class="topics font-medium text-sm max-md:flex items-center gap-2 lg:w-20">
    								{{ recent_active.TOPIC_REPLIES }}
    								<div class="text-secondary md:text-xs md:mt-0.5">{{ lang('POSTS') }}</div>
    							</div>
    							<div class="posts font-medium text-sm max-md:flex items-center gap-2 lg:w-20">
    								{{ recent_active.TOPIC_VIEWS }}
    								<div class="text-secondary md:text-xs md:mt-0.5">{{ lang('VIEWS') }}</div>
    							</div>
    						</div>
                            <div class="lastpost text-sm max-lg:pt-2 font-medium max-lg:border-t sm:w-52 w-full dark:border-slate-800">
    							{{ lang('POST_BY_AUTHOR') }} <a style="font-weight:bold; color: #{{ recent_active.TOPIC_LAST_POSTER_COLOUR }};" href="{{ recent_active.USERNAME_LAST }}">{{ recent_active.TOPIC_LAST_POSTER_NAME }}</a>
    							<!-- IF not S_IS_BOT and recent_active.U_LAST_TOPIC -->
    								<a class="align-middle" href="{{ recent_active.U_LAST_TOPIC }}" title="{L_GOTO_LAST_POST}" aria-label="{L_VIEW_LATEST_POST}">
    									<i class="iconify" data-mode="style" data-icon="ph:arrow-square-out-bold" data-height="16" data-width="16" aria-hidden="true"<!-- IF S_CONTENT_DIRECTION eq 'rtl' --> data-flip="horizontal"<!-- ENDIF -->></i>
    								</a>
    							<!-- ENDIF -->
    							<span class="text-xs block mt-0.5 text-secondary">{{ recent_active.TOPIC_LAST_POST_TIME }}</span>
    						</div>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </li>
</ul>
{% endif %}