{# This is a version of the index page that will render for variant searches.

   To define a specific variant, also define a
   `variant_search_VARIANTTYPE.template` file, where VARIANTTYPE is whatever
   type is defined in the .yaml file.

#}

{% extends 'base.html' %}

{% block extra_js %}
    {{ entry_template_header_includes|safe }}

	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/bootstrap-tagsinput.css')}}" />

    {# TODO: compile these together #}
    <script type="text/javascript" src="{{url_for('static', filename='js/bootstrap-tagsinput-typeahead.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/bootstrap-tagsinput.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/variant_search.js')}}"></script>

{% endblock %}

{% block footer_js %}
{% endblock %}

{% block search_li %}
{% endblock %}

{% block search_li_form %}
{% endblock %}

{% block extra_nav %}
    {# Dictionaries #}
    {% include 'mobile_nav_dictionary_list.html' %}
{% endblock %}

{% block bodyclass %}main_search keyword_search{% endblock %}

{%- set keyboard = false %}
{% if current_variant_options %}
    {% set keyboard = current_variant_options.onscreen_keyboard %}
{% endif -%}

{% block content %}
<div class="container-fluid">
    <div class="row-fluid">
        {% if grouped_nav %}
            {% set nav_width = "span3" %}
            {% set dict_width = "span9" %}
        {% else %}
            {% set nav_width = "span4" %}
            {% set dict_width = "span8" %}
        {% endif %}
        <div class="{{ nav_width }}  hidden-phone hidden-mid" id="left_nav">
            {% include 'left_dictionary_list.html' %}
        </div>
        <div class="{{ dict_width }}">
            <h4 class="dict_title"> 
                {% if current_variant_options %}
                    <span>{{ _from|iso_to_i18n }} ({{ gettext(current_variant_options.description) }}) → {{ _to|iso_to_i18n }}</span>
                {% else %}
                    <span>{{ _from|iso_to_i18n }} → {{ _to|iso_to_i18n }}</span>
                {% endif %}
                <span>  &mdash; {{ gettext(current_search_variant.description) }}</span>
                {% if display_swap %}
                <span class="swaplink" style="font-size: 80%">(<a href="{{ url_for('.canonical_root_search_pair', _from=swap_from, _to=swap_to) }}">⇄ <span lang="{{ current_locale }}">{% trans %}Swap{% endtrans %}</span></a>)</span>
                {% endif %}
            </h4>

            {# figure out if there's a variant, and if the reverse has
            variants, because if mobile, we want to force mobile variant in
            swap #}

            <div class="row-fluid form-row">
                <div class="span8">

                    {# copy-for-now #}
                    {%- set keyboard = false %}
                    {% if current_variant_options %}
                        {% set keyboard = current_variant_options.onscreen_keyboard %}
                    {% endif -%}


                    <div class="container-fluid">
                        <div class="row-fluid">
                            <div class="span12">
                                {# 
                                {% if keyboard %}
                                    <div id="keyboard">
                                        <ul>
                                            {% for key in current_variant_options.onscreen_keyboard %}
                                                <li><a href="#" class="key" data-char="{{ key }}" lang="{{ _from }}">{{ key }}</a></li>
                                            {% endfor %}
                                                <li><a lang="{{ current_locale }}" data-char="" href="#" class="hide_keyboard">{% trans %}hide{% endtrans %}</a></li>
                                        </ul>
                                    </div>
                                {% endif %}
                                #}

                                {% include 'keyword_search_form.html' %}
                                
                                <div class="search_options">
                                    {% if available_keywords %}
                                        <p class="note">Your search turned up words with one or more keywords. Narrow your search down by choosing more:</p>
                                        <div class="search_keywords">
                                            <p>
                                        {% for k in available_keywords %}
                                            <a href="#" class="add_keyword" data-keyword-value="{{ k }}"><span class="label label-success">+ {{ k }}</span></a>
                                        {% endfor %}
                                            </p>
                                        </div>
                                    {% endif %}
                                </div>

                            </div>
                        </div>
                    </div>
                    {# /copy-for-now #}
                    {# TODO: keyword JS stuff #}

                </div>

                <div class="span4 hidden-phone valign_block">
                    {% if analyses %}
                        <p class="analysis_note"><em lang="{{ _from }}">{{ user_input }}</em><span lang="{{ current_locale }}">{% trans user_input=user_input %} is a possible form of ... {% endtrans %}</span></p>
                    {% endif %}
                </div>
            </div>

            {% if successful_entry_exists %}
                <div class="results">
                    {% for tpl in entry_templates %}
                        {{ tpl|safe }}
                    {% endfor %}
                    {% if leftover_analyses_template %}
                        <div class="row-fluid entry_row">
                            <div class="span8 lexeme">
                                {% if entry_templates|length == 0 %}
                                    <div class="alert alert-warning">
                                        <p>
                                            <span lang="{{ current_locale }}">{% trans input=user_input %}Word <span lang="{{ _from }}">{{ input }}</span> not found.{% endtrans %}</span>
                                        </p>
                                    </div>
                                {% else %}
                                    &nbsp;
                                {% endif %}
                            </div>
                            <div class="span4 hidden-phone lexeme_analyses">
                                <p class="leftover">{% trans user_input=user_input %}Other analyses for <em>{{ user_input }}</em> without a translation.{% endtrans %}</p>
                                {{- leftover_analyses_template|safe -}}
                            </div>
                        </div>
                    {% endif %}
                </div>

            {% else %}
                {% if not show_info %}
                        <div class="row-fluid entry_row">
                            <div class="span8 lexeme">
                                {% if entry_templates|length == 0 %}
                                    <div class="alert alert-error">
                                        <p>
                                            <span lang="{{ current_locale }}">{% trans input=user_input %}Word <span lang="{{ _from }}">{{ input }}</span> not found.{% endtrans %}</span>
                                        </p>
                                    </div>
                                {% else %}
                                    &nbsp;
                                {% endif %}
                            </div>
                            <div class="span4 hidden-phone lexeme_analyses">
                                {% if analyses %}
                                    {{- leftover_analyses_template|safe -}}
                                {% endif %}
                            </div>
                        </div>

                {% endif %}
            {% endif %}
            {% if show_info %}
                {{ search_info_template|safe }}
            {% endif %}

            {# NB: this could be a fun idea, but would take work to sort out.
               tl;dr: visual grid of keywords with counts, allow the user to
               pick one, and warn if there are too many entries, displaying
               keywords to narrow it down. #}

            {#
            {% if initial_keywords %}
                <div class="initial_keywords">
                    <div class="keyword_grid">
                        {% for kw, count in initial_keywords[0:100] %}
                            <div class="element-item" data-count="{{ count }}">
                                <span class="keyword">{{ kw }}</span>
                                <span class="count">{{ count }} entries</span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <script src="{{url_for('static', filename='js/isotope.pkgd.min.js')}}"></script>
                <script type="text/javascript">
                    $(document).ready(function(o){
                        var input_field = 'input[name="lookup"]';

                        $("div.keyword_grid").isotope({
                              itemSelector: '.element-item',
                              layoutMode: 'fitRows',
                        });

                        $("div.keyword_grid .element-item").click(function(evt){
                          // Target is a bit weird, sometimes <span /> sometimes <a />
                          var kw = $(evt.target).find('.keyword').text();
                          $(input_field).tagsinput('add', kw);
                        });

                    });
                </script>
            {% endif %}
            #}

        </div>
        
    </div>

    {%- if analyses %}
    <div class="visible-phone">
        <div class="well">
            <p style="font-size: 95%;"><em lang="{{ _from }}">{{ user_input }}</em><span lang="{{ current_locale }}">{% trans user_input=user_input %} is a possible form of ... {% endtrans %}</span></p>

            {{ all_analysis_template|safe }}
        </div>
    </div>
    {%- endif -%}

</div>

{% endblock %}