{% embed "overall_header.html" %}
	{% block header_content %}
		<h1 class="text-slate-50 md:text-2xl text-xl"><a href="{{ U_KNOWLEDGEBASE }}">{{ lang('KNOWLEDGEBASE') }}</a></h1>
	{% endblock %}
{% endembed %}

<h2 class="forum-title mt-2"><a href="{{ U_KNOWLEDGEBASE }}">{{ lang('KNOWLEDGEBASE') }}</a></h2>
<p class="text-sm text-secondary mb-4">{{ lang('KNOWLEDGEBASE_EXPLAIN') }}</p>

{% if S_DISPLAY_POST_BUTTON or S_DISPLAY_TYPE_MENU %}
<div class="action-bar bar-top flex flex-wrap grow items-center gap-1">

	<div class="flex flex-wrap items-center gap-1">
		{% if not S_IS_BOT and S_DISPLAY_POST_BUTTON %}
			<a href="{{ U_POST_NEW_ARTICLE }}" class="ripple card-sm" title="{{ lang('KB_POST_ARTICLE') }}">
				<i class="iconify" data-mode="style" data-icon="mingcute:pencil-line" data-width="18" data-height="18" aria-hidden="true"></i> <span>{{ lang('KB_BUTTON_NEW_ARTICLE') }}</span>
			</a>
		{% endif %}
	</div>

	{% if S_DISPLAY_TYPE_MENU %}
  <div class="zn-dropdown relative topic-tools">
  	<button type="button" class="zn-dropdown-toggle ripple card-sm link" title="{{ lang('KB_TYPE') }}">
  		<span class="w-full item-label">{{ TYPE }}</span>
      <span class="md:hidden leading-[0]"><i class="iconify" data-mode="style" data-icon="ri:arrow-{{ S_CONTENT_FLOW_END }}-s-line" data-width="18" data-height="18" aria-hidden="true"></i></span>
      <span class="max-md:hidden leading-[0]"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></span>
  	</button>
  	<div class="zn-dropdown-menu dropdown dropdown-start md:w-56">
			<div class="pointer"><div class="pointer-inner"></div></div>
  		<ul class="dropdown-content text-sm">
        {% for types in loops.types %}
  				<li><a href="{{ types.U_TYPE }}" class="watch-topic-link ripple dropdown-item gap-2">{{ types.TYPE }}</a></li>
  			{% endfor %}
  		</ul>
  	</div>
  </div>
	{% endif %}

</div>
{% endif %}

{% if S_TYPE_APPROVED %}
  <div class="card p-4 my-2">
		<p id="explain" class="text-secondary text-sm mb-3 font-medium">{{ lang('KB_NARROW_SEARCH') }}{{ lang('COLON') }}</p>
		<form method="get" id="categories" action="">
			<fieldset>
				<select class="inputbox w-auto max-md:w-full" name="c" id="category_id" onchange="document.getElementById('categories').submit()">
				<option value="all">{{ lang('KB_ALL_CATEGORIES') }}</option>
					{% for categories in loops.categories %}
					<option value="{{ categories.CATEGORY_ID }}"{% if categories.S_SELECTED %} selected="selected"{% endif %}>{{ categories.CATEGORY_NAME }}</option>
					{% endfor %}
				</select>
			</fieldset>
		</form>
		{% if CATEGORY_DESCRIPTION %}<p id="description" class="mt-3 description text-secondary text-sm">{{ CATEGORY_DESCRIPTION }}</p>{% endif %}
  </div>
{% endif %}


{% if loops.articlerow|length %}
  <ul class="topics my-2 grid md:gap-4 gap-2">
    {% for articlerow in loops.articlerow %}
    <li class="card">
    	<div class="flex items-center justify-between card-title">
    		<h2>{{ lang('KB_ARTICLES') }}</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-knowledgbase" data-zn-collapse="#zn-topics-collapse-knowledgbase">
    			<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-topics-collapse-knowledgbase" class="zn-collapse w-full overflow-hidden" aria-labelledby="zn-topics-collapse-knowledgbase">
    		<ul class="topiclist forums divide-y md:p-4 md:mt-2 p-2 mt-1">

    			<li class="pt-4 mt-4 first:pt-0 first:mt-0 topic row">
    				<!-- EVENT forumlist_body_forum_row_prepend -->
    				<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="{articlerow.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' }} {articlerow.TOPIC_IMG_STYLE}" <!-- IF articlerow.TOPIC_ICON_IMG and S_TOPIC_ICONS --> style="background-image: url('{T_ICONS_PATH}{articlerow.TOPIC_ICON_IMG}'); background-repeat: no-repeat; background-size: 24px; background-position: bottom right;"<!-- ENDIF -->>
    								{% include 'forumlist_icons.html' with {'IMG_STYLE': articlerow.TOPIC_IMG_STYLE} %}
    							</div>
    							<div class="topic-details">
    								<div class="flex items-center gap-2 max-md:py-1">
    									<h3 class="text-sm font-semibold"><a href="{{ articlerow.U_VIEW_ARTICLE }}" class="topictitle max-md:py-1">{{ articlerow.ARTICLE_TITLE }}</a></h3>
                    </div>
                    <div class="topic-poster flex flex-col flex-wrap gap-0.5 text-xs font-medium mt-1 text-secondary">
  							      <div>{{ articlerow.ARTICLE_DESCRIPTION }}</div>
  						        <div><span class="font-medium">{{ lang('KB_CATEGORIES') }}{{ lang('COLON') }}</span> {{ articlerow.CATEGORIES }}</div>
    								</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="posts font-medium text-sm max-md:flex items-center gap-2 lg:w-20">
  								{{ articlerow.VIEWS }}
  								<div class="text-secondary md:text-xs md:mt-0.5">{{ lang('VIEWS') }}</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') }} {{ articlerow.ARTICLE_AUTHOR_FULL }}
    							<span class="text-xs block mt-0.5 text-secondary">{{ articlerow.ARTICLE_TIME }}</span>
    						</div>
              </div>
  					</div>
          </li>
        </ul>
      </div>
    </li>
    {% endfor %}
  </ul>

{% else %}
  <div class="card w-full p-4 text-sm my-2">
		{{ lang('KB_NO_ARTICLES') }}
	</div>
{% endif %}

{% INCLUDE 'overall_footer.html' %}