<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
{{{ if config.theme.enableBreadcrumbs }}}
<!-- IMPORT partials/breadcrumbs.tpl -->
{{{ end }}}

{{{ if widgets.header.length }}}
<div data-widget-area="header">
	{{{each widgets.header}}}
	{{widgets.header.html}}
	{{{end}}}
</div>
{{{ end }}}

<div class="category-header d-flex flex-column gap-2">
	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
		<h1 class="tracking-tight fs-2 fw-semibold mb-0 text-center">[[world:name]]</h1>
	</div>
	{{{ if ./descriptionParsed }}}
	<p class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
		{./descriptionParsed}
	</p>
	{{{ end }}}
</div>

<div class="row flex-fill">
	<div class="world {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
		<div class="category">
			<div class="row flex-row-reverse">
				<div class="col-lg-4 col-sm-12 mt-2 pt-1 {{{ if !config.loggedIn }}}invisible{{{ end }}}">
					<form class="mb-3" role="search" method="GET" action="{config.relative_path}/search">
						<input type="hidden" name="in" value="categories" />
						<div class="input-group bottom-sheet">
							<input class="form-control form-control-lg" component="category-search" name="term" type="text" autocomplete="off" placeholder="[[world:category-search]]" />
							<button class="btn btn-outline-secondary dropdown-toggle d-md-none" type="button" data-bs-toggle="dropdown">
								<i class="fa fa-fw fa-list"></i>
							</button>
							<ul class="dropdown-menu">
								{{{ each categories }}}
								<li class="flex-grow-1 align-items-start d-flex gap-2 p-1 mb-2 position-relative">
									<div>
										{buildCategoryIcon(@value, "24px", "rounded-1")}
									</div>
									<div class="d-grid gap-0">
										<div class="title fw-semibold">
											<a class="text-reset stretched-link" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
										</div>
										{{{ if ./descriptionParsed }}}
										<div class="description text-muted text-xs w-100 line-clamp-sm-5">{./descriptionParsed}</div>
										{{{ end }}}
									</div>
								</li>
								{{{ end }}}
							</ul>
						</div>
					</form>
					<div class="quick-search-container dropdown-menu d-block p-2 hidden">
						<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
						<div class="quick-search-results-container"></div>
					</div>

					<ul class="categories-list ps-0 list-unstyled pt-3 d-none d-md-block">
						{{{ each categories }}}
						<!-- IMPORT partials/account/category-item.tpl -->
						{{{ end }}}
					</ul>
				</div>

				<div class="col-lg-8 col-sm-12">
					{{{ if posts.length }}}
					<div class="topic-list-header sticky-top btn-toolbar justify-content-end align-items-center px-1 py-2 mb-2 flex-nowrap">
						{{{ if config.loggedIn }}}
						<div class="dropdown bottom-sheet">
							<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown">
								<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
								<span id="sort-label" class="visible-md-inline visible-lg-inline fw-semibold"></span>
							</button>
							<ul class="dropdown-menu" id="sort-options">
								<li><a class="dropdown-item" href="{config.relative_path}/world">[[world:latest]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?local=1">[[world:latest-local]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?all=1">[[world:latest-all]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?sort=popular&term=day">[[world:popular-day]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?sort=popular&term=week">[[world:popular-week]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?sort=popular&term=month">[[world:popular-month]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?sort=popular&term=year">[[world:popular-year]]</a></li>
								<li><a class="dropdown-item" href="{config.relative_path}/world?sort=popular&term=alltime">[[world:popular-alltime]]</a></li>
							</ul>
						</div>
						{{{ end }}}
						<a class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center fw-semibold" id="world-help" href="#">
							<i class="fa fa-question text-primary"></i>
							<span class="visible-md-inline visible-lg-inline">[[world:help]]</span>
						</a>
						<!-- IMPORT partials/category/tools-dropdown-left.tpl -->
					</div>
					{{{ end }}}

					<!-- IMPORT partials/topic/quickreply.tpl -->

					{{{ if !config.loggedIn }}}
					<div class="alert alert-info alert-dismissible fade show">
						<p class="fw-semibold">
							[[world:onboard.title]]
						</p>
						<p>[[world:onboard.what]]</p>
						<p>[[world:onboard.why]]</p>
						<p>[[world:onboard.how]]</p>
						<a href="{config.relative_path}/register" class="fw-semibold btn btn-sm btn-warning">[[global:register]]</a>
						<a href="{config.relative_path}/login" class="fw-semibold btn btn-sm btn-info">[[global:login]]</a>
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
					</div>
					{{{ end }}}

					<ul class="list-unstyled" id="world-feed">
						{{{ each posts }}}
						<!-- IMPORT partials/feed/item.tpl -->
						{{{ end }}}
					</ul>

					{{{ if config.usePagination }}}
					<!-- IMPORT partials/paginator.tpl -->
					{{{ end }}}
				</div>
			</div>
		</div>
	</div>
	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
		{{{ each widgets.sidebar }}}
		{{widgets.sidebar.html}}
		{{{ end }}}
	</div>
</div>

<div data-widget-area="footer">
	{{{each widgets.footer}}}
	{{widgets.footer.html}}
	{{{end}}}
</div>