{% if PERMISSION_PROFILE and loops.whovisitedthistopic|length %}
<ul class="whovisitedthistopic mt-2 grid md:gap-4 gap-2">
	<li class="card">
		<div class="flex items-center justify-between card-title">
			<h2>{{ WHOVISITEDTHISTOPIC_VISIT_TITLE }}</h2>
			{% 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-whovisitedthistopic" data-zn-collapse="#zn-whovisitedthistopic-collapse-1">
				<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 id="zn-whovisitedthistopic-collapse-1" class="zn-collapse w-full overflow-hidden" aria-labelledby="zn-whovisitedthistopic-collapse-1">
			<ul class="topiclist forums divide-y md:p-4 md:mt-2 p-2 mt-1">
        {% for whovisitedthistopic in loops.whovisitedthistopic %}
        <li class="pt-4 mt-4 first:pt-0 first:mt-0 topic row{% if whovisitedthistopic.S_ROW_COUNT is even %} bg1{% else %} bg2{% endif %}">
          <div class="row-item flex max-md:flex-col gap-4 max-md:gap-2 items-center">
  					<div class="flex flex-wrap w-full md:justify-between relative gap-y-3 row-title" title="{whovisitedthistopic.TOPIC_FOLDER_IMG_ALT}">
  						<div class="flex flex-row grow gap-4">
  							<div class="topic-icon mt-0.5 leading-[0] row-icon {{ zeina.forums_type }} {{ zeina.forums_mode == 'images' ? 'forum_custom_icon' }} {whovisitedthistopic.TOPIC_IMG_STYLE}" <!-- IF whovisitedthistopic.TOPIC_ICON_IMG --> style="background-image: url('{T_ICONS_PATH}{whovisitedthistopic.TOPIC_ICON_IMG}'); background-repeat: no-repeat; background-size: 24px; background-position: bottom right;"<!-- ENDIF -->>
  								{% include 'forumlist_icons.html' with {'IMG_STYLE': whovisitedthistopic.TOPIC_IMG_STYLE} %}
  							</div>
  							<div class="topic-details">
						      {% if whovisitedthistopic.S_UNREAD_TOPIC and not S_IS_BOT %}<a href="{{ whovisitedthistopic.U_NEWEST_POST }}" class="row-item-link"></a>{% endif %}
  								<div class="flex items-center gap-2 max-md:py-1">
  									<!-- IF whovisitedthistopic.S_UNREAD_TOPIC and not S_IS_BOT -->
  									<a class="unread leading-[0]" href="{whovisitedthistopic.U_NEWEST_POST}">
  										<i class="iconify" data-mode="style" data-icon="ph:file" data-width="14" data-height="14" aria-hidden="true"></i><span class="sr-only">{L_NEW_POST}</span>
  									</a>
  									<!-- ENDIF -->
  									
  									<h3 class="text-sm font-semibold"><!-- IF whovisitedthistopic.U_VIEW_TOPIC --><a href="{whovisitedthistopic.U_VIEW_TOPIC}" class="topictitle max-md:py-1">{whovisitedthistopic.TOPIC_TITLE}</a><!-- ELSE -->{whovisitedthistopic.TOPIC_TITLE}<!-- ENDIF --></h3>
  									
                    <!-- IF whovisitedthistopic.S_TOPIC_UNAPPROVED or whovisitedthistopic.S_POSTS_UNAPPROVED -->
  										<a class="leading-[0]" href="{whovisitedthistopic.U_MCP_QUEUE}" title="<!-- IF whovisitedthistopic.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF -->">
  											<i class="iconify" data-mode="style" data-icon="ri:question-line" data-width="16" data-height="16" aria-hidden="true"<!-- IF S_CONTENT_DIRECTION eq 'rtl' --> data-flip="horizontal"<!-- ENDIF -->></i><span class="sr-only"><!-- IF whovisitedthistopic.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF --></span>
  										</a>
  									<!-- ENDIF -->
  									<!-- IF whovisitedthistopic.S_TOPIC_REPORTED -->
  										<a class="leading-[0]" href="{whovisitedthistopic.U_MCP_REPORT}" title="{L_TOPIC_REPORTED}">
  											<i class="iconify" data-mode="style" data-icon="lucide:circle-alert" data-width="16" data-height="16" aria-hidden="true"></i><span class="sr-only">{L_TOPIC_REPORTED}</span>
  										</a>
  									<!-- ENDIF -->
								  </div>

  								<div class="topic-poster flex flex-wrap items-center gap-1 text-xs font-medium mt-0.5 text-secondary">
  									<!-- IF whovisitedthistopic.S_HAS_POLL --><i class="iconify" data-mode="style" data-icon="fluent:data-histogram-16-regular" data-height="16" data-width="16" aria-hidden="true"></i><!-- ENDIF -->
  									<!-- IF whovisitedthistopic.ATTACH_ICON_IMG --><i class="iconify" data-mode="style" data-icon="ph:paperclip-bold" data-height="16" data-width="16" aria-hidden="true"></i><!-- ENDIF -->
  									{L_POST_BY_AUTHOR} {whovisitedthistopic.TOPIC_AUTHOR_FULL} &raquo; <span class="text-secondary">{whovisitedthistopic.FIRST_POST_TIME}</span> &raquo; {L_IN} <a href="{whovisitedthistopic.U_VIEW_FORUM}">{whovisitedthistopic.FORUM_NAME}</a>
  								</div>
  							</div>
  						</div>

  						<!-- IF .whovisitedthistopic.pagination -->
  						<div class="pagination flex items-center gap-1 max-md:grow max-md:justify-center">
  							<i class="iconify text-secondary" data-mode="style" data-icon="ph:copy" data-height="16" data-width="16" aria-hidden="true"></i>
  							<ul class="flex items-center text-sm text-center justify-center gap-1">
  							<!-- BEGIN pagination -->
  								<!-- IF whovisitedthistopic.pagination.S_IS_PREV -->
  								<!-- ELSEIF whovisitedthistopic.pagination.S_IS_CURRENT --><li class="active py-0.5 px-1 rounded-md font-medium text-secondary hover:text-color bg-gray-100 border min-w-6 text-center dark:hover:text-color-dark dark:bg-slate-800"><span>{whovisitedthistopic.pagination.PAGE_NUMBER}</span></li>
  								<!-- ELSEIF whovisitedthistopic.pagination.S_IS_ELLIPSIS --><li class="ellipsis py-0.5 px-1 rounded-md text-secondary hover:text-color hover:bg-gray-100 border min-w-6 text-center dark:hover:text-color-dark dark:hover:bg-slate-800"><span>{L_ELLIPSIS}</span></li>
  								<!-- ELSEIF whovisitedthistopic.pagination.S_IS_NEXT -->
  								<!-- ELSE --><li><a class="ripple py-0.5 px-1 rounded-md text-secondary hover:text-color hover:bg-gray-100 border min-w-6 justify-center dark:hover:text-color-dark dark:hover:bg-slate-800" href="{whovisitedthistopic.pagination.PAGE_URL}">{whovisitedthistopic.pagination.PAGE_NUMBER}</a></li>
  								<!-- ENDIF -->
  							<!-- END pagination -->
  							</ul>
  						</div>
  						<!-- ENDIF -->
  					</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">
  								{whovisitedthistopic.TOPIC_REPLIES}
  								<div class="text-secondary md:text-xs md:mt-0.5">{L_REPLIES}</div>
  							</div>
  							<div class="posts font-medium text-sm max-md:flex items-center gap-2 lg:w-20">
  								{whovisitedthistopic.TOPIC_VIEWS}
  								<div class="text-secondary md:text-xs md:mt-0.5">{L_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">
  							{L_POST_BY_AUTHOR} {whovisitedthistopic.LAST_POST_AUTHOR_FULL}
  							<!-- IF not S_IS_BOT and whovisitedthistopic.U_LAST_POST -->
  								<a class="align-middle" href="{whovisitedthistopic.U_LAST_POST}" 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 -->
  							<time class="text-xs block mt-0.5 text-secondary" datetime="{whovisitedthistopic.LAST_POST_TIME}">{whovisitedthistopic.LAST_POST_TIME}</time>
  						</div>
  					</div>
  			  </div>

        </li>
        {% endfor %}
      </ul>
    </div>
  </li>
</ul>
{% endif %}