{% extends 'base.html' %}

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

{% block footer_js %}
{% endblock %}

{% block search_li %}
{% endblock %}

{% block search_li_form %}
{% endblock %}

{% block extra_css %}
	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/browse.css')}}" />
	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/detail.css')}}" />
{% endblock %}

{% block extra_nav %}
    {# Dictionaries #}
    <li><a href="{{ url_for(".browse") }}">
            <span lang="{{ current_locale }}">{% trans %}Browse{% endtrans %}</span>
    </a></li>

    {% include 'mobile_nav_dictionary_list.html' %}
{% endblock %}

{% block bodyclass %}browse_page{% 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 fill-rows">
        {# TODO: hide menu when inactive #}
        <div class="fill-row" id="left_nav" style="display:none;">
            {% include 'left_dictionary_list.html' %}
        </div>
        <div class="fill-row" id="letter-select">
            <ul class="letters">
                <li id="left_nav_show"><a href="#"><i class="icon-book"></i></a></li>
                {% for letter in letters %}
                    {% if letter.has_entries and letter.page %}
                        {% set li_class = 'has_entries' %}
                        {% set link = "?page=%d" % letter.page %}
                    {% else %}
                        {% set li_class = 'no_entries' %}
                        {% set link = "#" %}
                    {% endif %}
                    <li class="{{ li_class }}"><a lang="{{ _from }}" href="{{ link }}">{{ letter.letter }}</a></li>
                {% endfor %}
            </ul>
            <div class="scroll_down_arrow">
                <span class>
                    <i class="icon-arrow-down"></i>
                </span>
            </div>
        </div>
        <div class="fill-row" id="word-select">
            <ul>
                {% for w in words %}
                    <li><a lang="{{ _from }}" href="#">{{ w }}</a></li>
                {% endfor %}
            </ul>
        </div>
        <div class="fill-row" id="fixed-content-area">

            <h4 class="dict_title">
                <span>{{ _from|iso_to_i18n }} → {{ _to|iso_to_i18n }}</span>
            </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 #}

            {# TODO: deep link needs to go to specific lexeme when it comes from the front page #}
            {% if successful_entry_exists %}

                <div class="results">
                    {% for tpl in entry_templates %}
                        {{ tpl|safe }}
                    {% endfor %}
                    <div id="end"></div>
                </div>

                <div class="pagination upper">
                    {% if prev_page %}
                        <a class="prev" href="?page={{ prev_page }}#end">
                            <span lang="{{ current_locale }}">
                                {% trans %}prev{% endtrans %}
                            </span>
                        </a>
                    {% else %}
                        <a class="prev no_prev" href="#">
                            <span lang="{{ current_locale }}">
                                &nbsp;
                            </span>
                        </a>
                    {% endif %}
                    <a class="next" href="?page={{ next_page }}">
                        <span lang="{{ current_locale }}">
                            {% trans %}next{% endtrans %}
                        </span>
                    </a>
                </div>

            {% else %}
                {% if no_more %}
                    <div class="alert alert-success">
                        <p class="lead">
                            <span lang="{{ current_locale }}">{% trans %}Congratulations! You have read the whole dictionary.{% endtrans %}</span>
                        </p>
                    </div>
                {% endif %}
            {% endif %}
            {% if show_info %}
                {{ search_info_template|safe }}
            {% endif %}
        </div>

        <div class="fill-row span2" id="word-detail">
            {#
            <div class="pagination">
                {% if prev_page %}
                    <a class="prev" href="?page={{ prev_page }}">
                        <span lang="{{ current_locale }}">
                            {% trans %}prev{% endtrans %}
                        </span>
                    </a>
                {% else %}
                    <a class="prev no_prev" href="#">
                        <span lang="{{ current_locale }}">
                            &nbsp;
                        </span>
                    </a>
                {% endif %}
                <a class="next" href="?page={{ next_page }}">
                    <span lang="{{ current_locale }}">
                        {% trans %}next{% endtrans %}
                    </span>
                </a>
            </div>
            #}

        </div>
        
    </div>

</div>
<script type="text/javascript">
    // TODO: track scroll position of letters and words in anchor #
    $(document).ready(function(){

        function expand_to_detail() {
            $('#word-detail').removeClass('span2').addClass('span5');
            $('#fixed-content-area').addClass('detail-visible');
        }

        function shrink_from_detail() {
            $('#word-detail').removeClass('span5').addClass('span2');
            $('#fixed-content-area').removeClass('detail-visible');
        }


        $("#left_nav_show a").click(function(){
            $('#left_nav_show').toggle();
            $('#left_nav').toggle();
        });

        $('.lexeme a').click( function(){
            var target = $(this).attr('href');
            if (target.search('/detail/') < 0) {
                return true;
            }

            target = target + '&embedded=true';

            $.get(target, function(result) {
                expand_to_detail();
                $('#word-detail').html(result);
            });

            // if it's a detail URL, add the parameter &embedded=true
            // request and display contents to #word-detail
            // and expand the column to accomodate paradigms, etc.
            return false;
        });
    });
</script>

{% endblock %}