@use crate::BaseData;
@(data: &BaseData)


<link rel="stylesheet" type="text/css" href="/variable_assets/@data.asset_hash/assets/css/page/infoPage.css">
<script defer src="/variable_assets/@data.asset_hash/assets/js/page/infoPage.js"></script>

<div class="d-flex center">
	<article>

		<!-- Shortcuts -->
		<div id="shortcutInfo" class="small-12 medium-6 columns small-centered">
			<h2>@data.gettext("Shortcuts")</h2>
			<p>@data.gettext("To improve the quality of life on Jotoba, we offer some shortcuts to quickly navigate the page:")</p>
			
         <!-- Everywhere accessable shortcuts -->
        	<b>@data.gettext("Everywhere")</b>
		 	<div class="table">
				<div class="row">
					<span>w | s | n | k</span>
					<span>@data.gettext("Quickly change between words | sentences | names | kanji tabs")</span>
				</div>
				<div class="row">
					<span>/</span>
					<span>@data.gettext("Focus the search bar")</span>
				</div>
			</div>

         <!-- Shortcuts when focussed on search bar -->
			<b>@data.gettext("Focussed search bar")</b>
			<div class="table">
				<div class="row">
					<span>↑ | ↓</span>
					<span>@data.gettext("Iterate suggestions up | down")</span>
				</div>
				<div class="row">
					<span>[Tab]</span>
					<span>@data.gettext("Iterate suggestions down")</span>
				</div>
			</div>

         <!-- Shortcuts used only by the [Words] search -->
			<b>@data.gettext("[Words] search")</b>
			<div class="table">
				<div class="row">
					<span>p</span>
					<span>@data.gettext("Play the first possible audio")</span>
				</div>
			</div>

		<!-- Shortcuts used only by the [Words] search -->
			<b>@data.gettext("[Kanji] search")</b>	
			<div class="table">
				<div class="row">
					<span>c</span>
					<span>@data.gettext("Show / Collapse compounds")</span>
				</div>
			</div>

		</div>

		<!-- Hashtags -->
		<div class="small-12 medium-6 columns small-centered help-cat">
			<h2>@data.gettext("Hashtags")</h2>
			<p>
				@data.gettext("To specify what kind of results your search should offer, you can use shortcuts.") <br> @data.gettext("Hashtags should be written at end end of your input like this:")
				<a class="clickable no-align" href="/search/start%20%23noun?t=0">start #noun</a>
			</p>

         <!-- Word search hashtags --> 
			<b>@data.gettext("Available Hashtags for [Words] search")</b>+

			<div class="table">
				<div class="row">
					<span>#noun</span>
					<span>@data.gettext("Search for nouns")</span>
				</div>
				<div class="row">
					<span>#verb</span>
					<span>@data.gettext("Search for verbs")</span>
				</div>
				<div class="row">
					<span>#transitive</span>
					<span>@data.gettext("Search for transitive verbs")</span>
				</div>
				<div class="row">
					<span>#intransitive</span>
					<span>@data.gettext("Search for intransitive verbs")</span>
				</div>
				<div class="row">
					<span>#adverb</span>
					<span>@data.gettext("Search for adverbs")</span>
				</div>
				<div class="row">
					<span>#auxilary</span>
					<span>@data.gettext("Search for auxilary verbs")</span>
				</div>
				<div class="row">
					<span>#adjective</span>
					<span>@data.gettext("Search for adjectives")</span>
				</div>
				<div class="row">
					<span>#pronoun</span>
					<span>@data.gettext("Search for pronouns")</span>
				</div>
				<div class="row">
					<span>#conjungation</span>
					<span>@data.gettext("Search for conjugations")</span>
				</div>
				<div class="row">
					<span>#prefix</span>
					<span>@data.gettext("Search for prefixes")</span>
				</div>
				<div class="row">
					<span>#suffix</span>
					<span>@data.gettext("Search for suffixes")</span>
				</div>
				<div class="row">
					<span>#particle</span>
					<span>@data.gettext("Search for japanese particles")</span>
				</div>
                                <div class="row">
					<span>#Irregular-Ichidan</span>
					<span>@data.gettext("Lists iru/eru ending verbs which are conjugated as godan verbs")</span>
				</div>
				<div class="row">
					<span>#sfx</span>
					<span>@data.gettext("Search for sfx words [comic sounds]")</span>
				</div>
				<div class="row">
					<span>#counter</span>
					<span>@data.gettext("Search for words used for counting")</span>
				</div>
				<div class="row">
					<span>#expression</span>
					<span>@data.gettext("Search for expressions")</span>
				</div>
				<div class="row">
					<span>#interjection</span>
					<span>@data.gettext("Search for words used as interjections")</span>
				</div>
				<div class="row">
					<span>#numeric</span>
					<span>@data.gettext("Search for numeric words")</span>
				</div>
				<div class="row">
					<span>#abbreviation</span>
					<span>@data.gettext("Search for abbreviations")</span>
				</div>
				<div class="row">
					<span>#katakana</span>
					<span>@data.gettext("Search for katakana words")</span>
				</div>
				<div class="row">
					<span>#unclassified</span>
					<span>@data.gettext("Search for words that don't fit in any category")</span>
				</div>
				<div class="row">
					<span>#N [5-1]</span>
					<span>@data.gettext("Search for words included in the specific JLPT level")</span>
				</div>
				<div class="row">
					<span>#word</span>
					<span>@data.gettext("Search in the [words] category")</span>
				</div>
				<div class="row">
					<span>#sentence</span>
					<span>@data.gettext("Search in the [sentences] category")</span>
				</div>
				<div class="row">
					<span>#name</span>
					<span>@data.gettext("Search in the [name] category")</span>
				</div>
				<div class="row">
					<span>#kanji</span>
					<span>@data.gettext("Search in the [kanji] category")</span>
				</div>
			</div>	

         <!-- Sentence search hashtags --> 
			<b>@data.gettext("Available Hashtags for [Sentence] search")</b>
			<div class="table">
				<div class="row">
					<span>#N [1-5]</span>
					<span>@data.gettext("Search for sentences included in the specific JLPT level")</span>
				</div>
				<div class="row">
					<span>#hidden</span>
					<span>@data.gettext("Hide translations by default to translate them yourself and check if its correct")</span>
				</div>
			</div>

         <!-- Kanji search hashtags --> 
			<b>@data.gettext("Available Hashtags for [Kanji] search")</b>
			<div class="table">
				<div class="row">
					<span>#Genki [3-23]</span>
					<span>@data.gettext("Search for kanji included in the specific Genki chapter")</span>
				</div>
			</div>
		</div>

		<!-- Radical Search info -->
        <div class="small-12 medium-6 columns small-centered help-cat">
			<h2>@data.gettext("Radical search")</h2>
			<p>
				@data.gettext("The radical picker allows searching for radicals to make the process of picking radicals even faster. The supported inputs are as following:")
			</p>
			<div class="table">
				<div class="row">
					<span>Kanji</span>
					<span>@data.gettext("Results in all radicals used to build given kanji characters")</span>
				</div>
				<div class="row">
					<span>Kana</span>
					<span>@data.gettext("Searches in words for the given query and returns in result-matching radicals")</span>
				</div>
				<div class="row">
					<span>Romaji</span>
					<span>@data.gettext("Tries to find the given query in radicals names, otherwise does a word search and returns the result's kanji")</span>
				</div>
			</div>

        </div>

	</article>
</div>
