{% INCLUDE 'overall_header.html' %}
{% INCLUDECSS '@vse_similartopics/acp_similar_topics.css' %}

<div id="pst-acp">
	<header class="pst-hero">
		<div>
			<div class="pst-hero-title">
				<h1>{{ lang('PST_TITLE_ACP') }}</h1>
				{% if PST_VERSION %}<span class="pst-version">{{ PST_VERSION }}</span>{% endif %}
			</div>
			<p>{{ lang('PST_EXPLAIN') }}</p>
		</div>
	</header>

	{% if S_PST_NO_COMPAT %}
		<div class="errorbox">
			<h3>{{ lang('WARNING') }}</h3>
			<p>{{ lang('PST_NO_COMPAT') }}</p>
		</div>
	{% endif %}

	<noscript>
		<div class="errorbox">
			<h3>{{ lang('WARNING') }}</h3>
			<p>{{ lang('PST_JAVASCRIPT_REQUIRED') }}</p>
		</div>
	</noscript>

	<form id="acp_similar_topics" method="post" action="{{ U_ACTION }}" data-ajax="true">
		<input type="hidden" id="pst-forum-rules" name="forum_rules" value="{{ PST_FORUM_RULES|e('html_attr') }}">
		<section class="pst-panel pst-feature-panel" aria-labelledby="pst-features-title">
			<div class="pst-section-heading">
				<div>
					<span class="pst-step">01</span>
					<h2 id="pst-features-title">{{ lang('PST_FEATURES') }}</h2>
					<p>{{ lang('PST_FEATURES_EXPLAIN') }}</p>
				</div>
			</div>

			<div class="pst-feature-grid">
				<label class="pst-feature-card" for="pst_enable">
					<span class="pst-feature-copy">
						<strong>{{ lang('PST_ENABLE') }}</strong>
						<small>{{ lang('PST_ENABLE_EXPLAIN') }}</small>
					</span>
					<span class="pst-switch">
						<input type="checkbox" id="pst_enable" name="pst_enable" value="1"{% if S_PST_ENABLE %} checked="checked"{% endif %}{% if S_PST_NO_COMPAT %} disabled="disabled"{% endif %}>
						<span aria-hidden="true"></span>
					</span>
				</label>

				<label class="pst-feature-card" for="pst_dynamic">
					<span class="pst-feature-copy">
						<strong>{{ lang('PST_DYNAMIC') }}</strong>
						<small>{{ lang('PST_DYNAMIC_EXPLAIN') }}</small>
					</span>
					<span class="pst-switch">
						<input type="checkbox" id="pst_dynamic" name="pst_dynamic" value="1"{% if S_PST_DYNAMIC %} checked="checked"{% endif %}>
						<span aria-hidden="true"></span>
					</span>
				</label>
			</div>
		</section>

		<section class="pst-panel" aria-labelledby="pst-results-title">
			<div class="pst-section-heading">
				<div>
					<span class="pst-step">02</span>
					<h2 id="pst-results-title">{{ lang('PST_RESULTS') }}</h2>
					<p>{{ lang('PST_RESULTS_EXPLAIN') }}</p>
				</div>
			</div>

			<div class="pst-field-grid">
				<label class="pst-field" for="pst_limit">
					<span>{{ lang('PST_LIMIT') }}</span>
					<small>{{ lang('PST_LIMIT_EXPLAIN') }}</small>
					<input name="pst_limit" id="pst_limit" type="number" min="0" max="999" value="{{ PST_LIMIT }}">
				</label>

				<div class="pst-field">
					<label for="pst_time">{{ lang('PST_TIME') }}</label>
					<small id="pst-time-explain">{{ lang('PST_TIME_EXPLAIN') }}</small>
					<span class="pst-input-pair">
						<input name="pst_time" id="pst_time" type="number" min="0" max="999" value="{{ PST_TIME }}" aria-describedby="pst-time-explain">
						<span class="pst-select-control">
							<label class="sr-only" for="pst_time_type">{{ lang('PST_TIME_UNIT') }}</label>
							<select name="pst_time_type" id="pst_time_type">
								{% for similar_time_options in loops.similar_time_options %}
									<option value="{{ similar_time_options.VALUE }}"{% if similar_time_options.S_SELECTED %} selected="selected"{% endif %}>{{ lang(similar_time_options.LABEL) }}</option>
								{% endfor %}
							</select>
							<i class="icon fa-caret-down pst-select-icon" aria-hidden="true"></i>
						</span>
					</span>
				</div>
			</div>
		</section>

		{% if loops.forums|length %}
			<section class="pst-panel pst-forum-panel" aria-labelledby="pst-forums-title">
				<div class="pst-section-heading pst-forum-heading">
					<div>
						<span class="pst-step">03</span>
						<h2 id="pst-forums-title">{{ lang('PST_FORUM_RULES') }}</h2>
						<p>{{ lang('PST_FORUM_RULES_EXPLAIN') }}</p>
					</div>
					<div class="pst-forum-stats">
						<strong>{{ PST_FORUM_COUNT }}</strong> {{ lang('PST_FORUMS_MANAGED') }}
						<span aria-hidden="true">&middot;</span>
						<strong>{{ PST_CUSTOM_FORUM_COUNT }}</strong> {{ lang('PST_CUSTOM_RULES') }}
					</div>
				</div>

				<label class="pst-forum-filter" for="pst-forum-filter">
					<span class="sr-only">{{ lang('PST_FILTER_FORUMS') }}</span>
					<i class="icon fa-search pst-search-icon" aria-hidden="true"></i>
					<input type="search" id="pst-forum-filter" placeholder="{{ lang('PST_FILTER_FORUMS') }}" autocomplete="off">
				</label>

				<div class="pst-forum-list" id="pst-forum-list">
					{% for forums in loops.forums %}
						<article class="pst-forum-card" data-forum-id="{{ forums.FORUM_ID }}" data-forum-name="{{ forums.FORUM_NAME|e('html_attr') }}">
							<header>
								<div>
									<span class="pst-forum-dot" aria-hidden="true"></span>
									<strong><a href="{{ forums.U_FORUM }}">{{ forums.FORUM_NAME }}</a></strong>
								</div>
								<span class="pst-source-summary{% if forums.S_CUSTOM_SOURCES %} is-custom{% endif %}">{{ forums.SOURCE_SUMMARY }}</span>
							</header>

							<div class="pst-forum-controls">
								<label class="pst-compact-toggle" for="show-forum-{{ forums.FORUM_ID }}">
									<span><strong>{{ lang('PST_SHOW_HERE') }}</strong><small>{{ lang('PST_SHOW_HERE_EXPLAIN') }}</small></span>
									<span class="pst-switch pst-switch-small">
										<input type="checkbox" id="show-forum-{{ forums.FORUM_ID }}" value="{{ forums.FORUM_ID }}"{% if forums.S_SHOW_FORUM %} checked="checked"{% endif %}>
										<span aria-hidden="true"></span>
									</span>
								</label>

								<label class="pst-compact-toggle" for="searchable-forum-{{ forums.FORUM_ID }}">
									<span><strong>{{ lang('PST_SEARCHABLE') }}</strong><small>{{ lang('PST_SEARCHABLE_EXPLAIN') }}</small></span>
									<span class="pst-switch pst-switch-small">
										<input type="checkbox" id="searchable-forum-{{ forums.FORUM_ID }}" class="pst-searchable-toggle" value="{{ forums.FORUM_ID }}"{% if forums.S_SEARCHABLE_FORUM %} checked="checked"{% endif %}>
										<span aria-hidden="true"></span>
									</span>
								</label>

								<div class="pst-source-control">
									<span><strong>{{ lang('PST_SEARCH_SOURCES') }}</strong><small>{{ lang('PST_SEARCH_SOURCES_EXPLAIN') }}</small></span>
									<button type="button" class="pst-button pst-button-secondary pst-source-button">{{ lang('PST_CHOOSE_SOURCES') }}</button>
								</div>
							</div>

							<input type="hidden" class="pst-source-mode" value="{% if forums.S_CUSTOM_SOURCES %}custom{% else %}all{% endif %}">
							<input type="hidden" class="pst-source-values" value="{{ forums.SOURCE_FORUMS }}">
						</article>
					{% endfor %}
				</div>

				<p class="pst-no-results" hidden>{{ lang('PST_NO_FORUM_MATCH') }}</p>
			</section>
		{% endif %}

		<section class="pst-panel" aria-labelledby="pst-tuning-title">
			<div class="pst-section-heading">
				<div>
					<span class="pst-step">04</span>
					<h2 id="pst-tuning-title">{{ lang('PST_TUNING') }}</h2>
					<p>{{ lang('PST_TUNING_EXPLAIN') }}</p>
				</div>
			</div>

			<div class="pst-field-grid">
					<label class="pst-field{% if not S_PST_SENSITIVITY %} pst-field-disabled{% endif %}" for="pst_sense">
						<span>{{ lang('PST_SENSE') }}</span>
						<small>{% if S_PST_SENSITIVITY %}{{ lang('PST_SENSE_EXPLAIN', PST_SENSITIVITY) }}{% else %}{{ lang('PST_SENSE_UNAVAILABLE') }}{% endif %}</small>
						<span class="pst-range-row">
							<input name="pst_sense" id="pst_sense" type="range" min="1" max="10" value="{{ PST_SENSE }}"{% if not S_PST_SENSITIVITY %} disabled="disabled"{% endif %}>
							<output for="pst_sense" id="pst-sense-value">{{ PST_SENSE }}</output>
						</span>
					</label>

					<label class="pst-field" for="pst-cache-slider">
						<span>{{ lang('PST_CACHE') }}</span>
						<small>{{ lang('PST_CACHE_EXPLAIN') }}</small>
						<input name="pst_cache" id="pst_cache" type="hidden" value="{{ PST_CACHE }}">
						<span class="pst-range-row pst-cache-range-row">
							<input id="pst-cache-slider" type="range" min="0" max="9" step="1" value="{{ PST_CACHE_STEP }}" list="pst-cache-options">
							<output for="pst-cache-slider" id="pst-cache-value" data-default-label="{{ PST_CACHE_LABEL|e('html_attr') }}">{{ PST_CACHE_LABEL }}</output>
						</span>
						<datalist id="pst-cache-options">
							{% for cache_option in loops.cache_duration_options %}
								<option value="{{ cache_option.INDEX }}" data-seconds="{{ cache_option.SECONDS }}" data-label="{{ cache_option.LABEL|e('html_attr') }}"></option>
							{% endfor %}
						</datalist>
					</label>

					<label class="pst-field pst-field-wide" for="pst_words">
						<span>{{ lang('PST_WORDS') }}</span>
						<small>{{ lang('PST_WORDS_EXPLAIN') }}</small>
						<textarea name="pst_words" id="pst_words" rows="4">{{ PST_WORDS }}</textarea>
					</label>

					{% if loops.postgres_ts_names %}
						<label class="pst-field" for="pst_postgres_ts_name">
							<span>{{ lang('FULLTEXT_POSTGRES_TS_NAME') }}</span>
							<small>{{ lang('FULLTEXT_POSTGRES_TS_NAME_EXPLAIN') }}</small>
							<span class="pst-select-control">
								<select name="pst_postgres_ts_name" id="pst_postgres_ts_name">
									{% for ts_name in loops.postgres_ts_names %}
										<option value="{{ ts_name.NAME }}"{% if ts_name.S_SELECTED %} selected="selected"{% endif %}>{{ ts_name.NAME }}</option>
									{% endfor %}
								</select>
								<i class="icon fa-caret-down pst-select-icon" aria-hidden="true"></i>
							</span>
						</label>
					{% endif %}
			</div>
		</section>

		<div class="pst-save-bar">
			<div><strong>{{ lang('PST_READY_TO_SAVE') }}</strong><span>{{ lang('PST_SAVE_EXPLAIN') }}</span></div>
			<div>
				<input class="pst-button pst-button-ghost" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}">
				<input class="pst-button pst-button-primary pst-save-button" type="submit" id="submit" name="submit" value="{{ lang('PST_SAVE_SETTINGS') }}">
			</div>
		</div>
		{{ S_FORM_TOKEN }}

		{% if loops.source_forums|length %}
			<div class="pst-modal" id="pst-source-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="pst-modal-title">
				<div class="pst-modal-backdrop" data-pst-close></div>
				<div class="pst-modal-card" role="document">
					<header>
						<div><span class="pst-eyebrow">{{ lang('PST_SEARCH_SOURCES') }}</span><h2 id="pst-modal-title">{{ lang('PST_CHOOSE_FORUM_SOURCES') }}</h2><p id="pst-modal-forum"></p></div>
						<button type="button" class="pst-modal-close" data-pst-close aria-label="{{ lang('CLOSE_WINDOW') }}">&times;</button>
					</header>

					<p class="pst-modal-intro">{{ lang('PST_SOURCE_MODAL_EXPLAIN') }}</p>

					<div class="pst-mode-options">
						<label><input type="radio" name="pst_source_mode_dialog" value="all"><span><strong>{{ lang('PST_SOURCE_ALL') }}</strong><small>{{ lang('PST_SOURCE_ALL_EXPLAIN') }}</small></span></label>
						<label><input type="radio" name="pst_source_mode_dialog" value="custom"><span><strong>{{ lang('PST_SOURCE_CUSTOM') }}</strong><small>{{ lang('PST_SOURCE_CUSTOM_EXPLAIN') }}</small></span></label>
					</div>

					<div class="pst-source-picker" id="pst-source-picker">
						<div class="pst-picker-tools">
							<label class="pst-source-filter" for="pst-source-filter">
								<span class="sr-only">{{ lang('PST_FILTER_SOURCES') }}</span>
								<i class="icon fa-search pst-search-icon" aria-hidden="true"></i>
								<input type="search" id="pst-source-filter" placeholder="{{ lang('PST_FILTER_SOURCES') }}" autocomplete="off">
							</label>
							<div><button type="button" class="pst-text-button" id="pst-select-available">{{ lang('PST_SELECT_AVAILABLE') }}</button><button type="button" class="pst-text-button" id="pst-clear-sources">{{ lang('PST_CLEAR') }}</button></div>
						</div>

						<div class="pst-source-options">
							{% for source in loops.source_forums %}
								<label data-source-id="{{ source.FORUM_ID }}" data-source-name="{{ source.FORUM_NAME|e('html_attr') }}">
									<input type="checkbox" value="{{ source.FORUM_ID }}">
									<span>{{ source.FORUM_NAME }}</span>
									<small class="pst-availability{% if not source.S_SEARCHABLE %} is-unavailable{% endif %}" data-available="{{ source.S_SEARCHABLE ? '1' : '0' }}">{% if source.S_SEARCHABLE %}{{ lang('PST_GLOBALLY_AVAILABLE') }}{% else %}{{ lang('PST_GLOBALLY_UNAVAILABLE') }}{% endif %}</small>
								</label>
							{% endfor %}
						</div>
						<p class="pst-picker-note">{{ lang('PST_CUSTOM_OVERRIDE_NOTE') }}</p>
					</div>

					<p class="pst-modal-error" id="pst-modal-error" hidden>{{ lang('PST_SELECT_ONE_SOURCE') }}</p>
					<footer>
						<button type="button" class="pst-button pst-button-ghost" data-pst-close>{{ lang('CANCEL') }}</button>
						<button type="button" class="pst-button pst-button-primary" id="pst-apply-sources">{{ lang('PST_APPLY_SOURCES') }}</button>
					</footer>
				</div>
			</div>
		{% endif %}
	</form>
</div>

<span id="pst-labels"
	data-all="{{ lang('PST_SOURCE_ALL')|e('html_attr') }}"
	data-available="{{ lang('PST_GLOBALLY_AVAILABLE')|e('html_attr') }}"
	data-unavailable="{{ lang('PST_GLOBALLY_UNAVAILABLE')|e('html_attr') }}"
	hidden>
	{% for count_label in loops.source_count_labels %}<span data-source-count="{{ count_label.COUNT }}">{{ count_label.LABEL }}</span>{% endfor %}
</span>

{% INCLUDEJS '@vse_similartopics/acp_similar_topics.js' %}
{% INCLUDE 'overall_footer.html' %}