{% block template_doc %}{% if TEMPLATE_DOC %}
This template has the following customizations:
 * add 'keyboard' support to display clickable characters.
 * include input_variants[].user_friendly_short_name in search form, crkMacr -> āēīō, etc.
 * include data-url-base in form to retarget search in the JS dropdown.
{% endif %}{% endblock %}


{%- set keyboard = false %}
{%- set keyboards = [] %}
{%- set variants = [] %}
{%- set current_var = false %}
{% if current_pair_settings.input_variants %}
    {% if current_pair_settings.input_variants|length > 0 %}
        {% for variant in current_pair_settings.input_variants %}
          {% if variant.short_name == _from %}
            {% do keyboards.append(variant.onscreen_keyboard) %}
            {% do variants.append(variant) %}
            {% break %}
          {% endif %}
        {% endfor %}
        {% if keyboards|length > 0 %}
          {% set keyboard = keyboards[0] %}
        {% endif %}
        {% if variants|length > 0 %}
          {% set current_var = variants[0] %}
        {% endif %}
    {% endif -%}
{% endif -%}

{% if keyboard %}
    <div id="keyboard">
        <ul>
            {% for key in keyboard %}
                <li><a href="#" class="key" data-char="{{ key }}" lang="{{ _from }}">{{ key }}</a></li>
            {% endfor %}
        </ul>
    </div>
{% endif %}
<form id="neahttadigisanit" class="form-inline pull-left"
   method="post"
   data-url-base="/itwewina"
   action="{{ url_for('.canonical_root_search_pair', _from=_from, _to=_to) }}">
<div class="input-prepend input-append">
 <div class="btn-group">
   <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
       <span class="val_name">{{ current_var.user_friendly_short_name }}→{{ _to }}</span>
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" id="langpairs" role="menu"
       data-for="target_lang">

    {# TODO: i18n #}
    {# TODO: dropdown select to language pair for form submit #}
    {% for iso_pair, pair_options in language_pairs.iteritems() %}
        {% if pair_options.input_variants %}
            {% for variant in pair_options.input_variants %}
                 <li class="selected{%- if variant.short_name == _from and iso_pair[1] == _to %} active{% endif -%}"><a tabindex="-1" href="#"
                         data-value="{{ variant.short_name}}-{{ iso_pair[1] }}">
                        <span lang="{{ current_locale }}">{{ variant.short_name|iso_to_i18n }} ({{ variant.user_friendly_short_name }})↔ {{ iso_pair[1]|iso_to_i18n }}</span>
                    </a>
            {% endfor %}
        {% else %}
             <li class="selected{%- if iso_pair[0] == _from and iso_pair[1] == _to %} active{% endif -%}"><a tabindex="-1" href="#"
                     data-value="{{ iso_pair[0]}}-{{ iso_pair[1] }}">
                    <span lang="{{ current_locale }}">{{ iso_pair[0]|iso_to_i18n }} &rarr; {{ iso_pair[1]|iso_to_i18n }}</span>
                </a></li>
        {% endif %}
    {% endfor %}
   </ul>
 </div>
 <input type="text" name="lookup"
        autocorrect="off"
        autocapitalize="off"
        placeholder="{{ user_input }}"></input>
 <div class="btn-group">
   <button type="submit" type="button" class="btn" name="search">
       <span lang="{{ current_locale }}">{% trans %}Search{% endtrans %}</span>
   </button>
 </div>
</div>
<div id="results"></div>
</form><!-- ./form -->