{% extends 'telemeta/base.html' %}
{% load telemeta_tags %}
{% load i18n %}
{% load bootstrap_pagination %}

{% block title %}
{% endblock %}
{% block extra_stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/jquery-ui.css" />
{% endblock %}
{% block content %}
        {% if query %}
            <div class='row'>
                <div class="col-md-3">
                    <img src="{{ STATIC_URL }}telemeta/images/search_red.png" alt="search-results" style="vertical-align:middle" /> <h1>{% trans "Search Results" %}</h1>
                </div>
                <div class="col-md-6" >
                    <center>{% bootstrap_paginate page range=10 show_first_last="True" %}</center>
                </div>
                <div class="col-md-0">&nbsp;</div>
            </div>
            <div class="row" style="margin-left:15px">
                <div class="col-md-4">
                    {% ifequal type 'collection'%}
                            <p><b><a href="{% url "haystack_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| Collections ({{collection_count}}) | <a href="{% url "haystack_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | <a href="{% url "haystack_search_type" "fonds" %}?{{request.GET.urlencode}}">Fonds ({{fonds_count}})</a></b></p>
                    {% else %}
                        {% ifequal type 'corpus'%}
                            <p><b><a href="{% url "haystack_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| <a href="{% url "haystack_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | Corpus ({{corpus_count}}) | <a href="{% url "haystack_search_type" "fonds" %}?{{request.GET.urlencode}}">Fonds ({{fonds_count}})</a></b></p>
                        {% else %}
                            {% ifequal type 'fonds'%}
                                <p><b><a href="{% url "haystack_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| <a href="{% url "haystack_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | <a href="{% url "haystack_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | Fonds ({{fonds_count}})</b></p>
                            {% else %}
                                {% ifequal type 'item' %}
                                    <p><b>Items ({{item_count}}) | <a href="{% url "haystack_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | <a href="{% url "haystack_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | <a href="{% url "haystack_search_type" "fonds" %}?{{request.GET.urlencode}}">Fonds ({{fonds_count}})</a></b></p>
                                {% endifequal %}
                            {% endifequal %}
                        {% endifequal %}
                    {% endifequal %}
                 </div>
                 <div class="col-md-4 col-md-offset-4" >
                    <div class="pull-right"">
                        <label style="display:inline-block;vertical-align:middle">{% trans "results per page"%}:</label>
                        <div style="display:inline-block;vertical-align:middle">
                            <select id="results-per-page" name="results_page">
                                <option {% ifequal results_page 20 %}selected{% endifequal %} value="20">20</option>
                                <option {% ifequal results_page 50 %}selected{% endifequal %} value="50">50</option>
                                <option {% ifequal results_page 100 %}selected{% endifequal %} value="100">100</option>
                                <option {% ifequal results_page 250 %}selected{% endifequal %} value="250">250</option>
                                <option {% ifequal results_page 500 %}selected{% endifequal %} value="500">500</option>
                                <option {% ifequal results_page 1000 %}selected{% endifequal %} value="1000">1000</option>
                                <option {% ifequal results_page 10000 %}selected{% endifequal %} value="10000">10000</option>
                            </select>
                        </div>
                    </div>
                 </div>
             </div>
             {% include "search/filters.html" %}

            <form method="POST" action="{% url "haystack_playlist" type %} ">{% csrf_token %}
             {% with object_list as items %}
                <div class="fullpage" style="display:none">
                    {% ifequal type 'item' %}
                        {% include "search/mediaitem_listhaystack.html" %}
                    {% else %}
                        {% ifequal type 'collection' %}
                            {% include "search/mediacollection_listhaystack.html" %}
                        {% else %}
                            {% ifequal type 'corpus' %}
                                {% include "search/mediaresource_listhaystack.html" %}
                            {% else %}
                                {% ifequal type 'fonds' %}
                                    {% include "search/mediaresource_listhaystack.html" %}
                                {%endifequal%}
                            {%endifequal%}
                        {%endifequal%}
                    {%endifequal%}
                </div>
                <noscript>
                    <div class="fullpage">
                    {% ifequal type 'item' %}
                        {% include "search/mediaitem_listhaystack.html" %}
                    {% else %}
                        {% ifequal type 'collection' %}
                            {% include "search/mediacollection_listhaystack.html" %}
                        {% else %}
                            {% ifequal type 'corpus' %}
                                {% include "search/mediaresource_listhaystack.html" %}
                            {% else %}
                                {% ifequal type 'fonds' %}
                                    {% include "search/mediaresource_listhaystack.html" %}
                                {%endifequal%}
                            {%endifequal%}
                        {%endifequal%}
                    {%endifequal%}
                    </div>
                </noscript>
            {% endwith %}

            {% if user.is_authenticated %}
                <input type="hidden" name="lastquerypath" value="{{request.get_full_path}}"/>
                <button style="margin-top:10px" type="submit" id="btn" class="btn btn-default">{% trans "Add to playlist" %}</button>
            {% endif %}
            </form>
        {% else %}
            <meta http-equiv="REFRESH" content="0;url={% url "haystack_search" %}?q=+">
        {% endif %}
    </form>
{% endblock %}
{% block extra_javascript %}
    <script src="{{ STATIC_URL }}jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}telemeta/js/search.js" type="text/javascript"></script>
    <script>


            $(function(){
                $("#results-per-page").selectmenu({
                icons : {button: "ui-icon-carat-2-n-s"},
                change : function(){
                    window.location = '?q={{ query }}&amp;page=1&amp;selected_facets={{selected_facets_url|join:'&selected_facets='}}&results_page='+$(this).val();
                }
            }).selectmenu("menuWidget").addClass("overflow");

        });
    </script>
{% endblock %}
