@use crate::BaseData;
@(data: &BaseData, title: &str)

<link rel="stylesheet" type="text/css" href="/variable_assets/@data.asset_hash/assets/css/page/helpPage.css">

<h3 class="noselect word-title">@data.gettext_fmt("No {} found", &[title])</h3>

<div class="d-flex center">
  <div class="small-12 medium-6 columns small-centered">

    @if let Some(search_help) = data.get_search_help() {

      @if !search_help.other_langs.is_empty() {
        <p class="fat">@data.gettext("Found in multiple other languages")</p>
        @for (lang, l_code) in search_help.iter_langs() {
          <b> - @data.gettext(lang)</b>
          
          <div class="indented">
            <a class="clickable" draggable="false" href="/search/@l_code: @data.site.as_search_result().unwrap().query.get_query_encoded()">Temporarily search</a>
          </div>
          
          <div class="indented">
            <a class="clickable" draggable="false" href="#">Change to language</a>
          </div>
        }
      }

      <p class="fat">@data.gettext("Found in other search types")</p>

      @for (query_type, guess) in search_help.iter_items() {
        <div class="indented">
          <a class="clickable" draggable="false" href="#" onclick="changeSearchType(null, @query_type.get_type_id())">@guess.format() @data.gettext("in") @query_type.get_translated(data.dict, Some(data.get_lang())) </a>
        </div>
      }
    }

  <article style="height: 700px;">
    <div class="small-12 medium-6 columns small-centered">
        <p class="fat">@data.gettext("Search Help")</p>
        <ul>
           <li>@data.gettext("Your default search language might not fit your input")</li>
           <li>@data.gettext("Check your search for typos")</li>
           <li>@data.gettext("Use more generic search terms")</li>
           <li>@data.gettext("Try finding your search in a different category using") <span class="highlight"> w / s / n / k </span></li>
           <li>@data.gettext("Your search request might not be included in our database yet")</li>
        </ul>

        <p>
           @data.gettext("If you think your search should be contained in our database, submit an issue on") <a class="clickable" href='https://github.com/WeDontPanic/Jotoba'>Github</a>.
           <br>
           @data.gettext("Also check our") <a class="clickable" href='https://trello.com/b/nmG0xgaW/jotoba'>Trello Board</a> @data.gettext("since we might be working on it!")
        </p>
        <img class="help-joto" src="/variable_assets/@data.asset_hash/assets/jotokun/JotoBook.svg">
    </div>
  </article>
</div>

