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


{% block title %}
{% trans "Search" %}
{% endblock %}
{% block extra_stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/search.css" />
{% endblock %}
{% block content %}
    <form method="get" action=".">
        <div class="row">
            <div class="col-md-5" id="left-form">
                <div class="fieldWrapper">
                    {{form.q.errors}}
                    {{ form.q.label_tag }}</br>
                    {{form.q}}
                </div>
                <div class="fieldWrapper">
                    {{form.collectors.errors}}
                    {% trans form.collectors.label_tag %}</br>
                    {{form.collectors}}
                </div>
                <div class="fieldWrapper">
                    {{form.location.errors}}
                    {% trans form.location.label_tag %}</br>
                    {{form.location}}
                </div>
                <div class="fieldWrapper">
                    {{form.ethnic_group.errors}}
                    {% trans form.ethnic_group.label_tag %}</br>
                    {{form.ethnic_group}}
                </div>
                <div class="fieldWrapper">
                    {{form.instruments.errors}}
                    {% trans form.instruments.label_tag %}</br>
                    {{form.instruments}}
                </div>

                <div class="fieldWrapper">
                    {{form.media_type.errors}}
                    <label>{% trans "media type" %} :</label></br>
                    <ul id="id_media_type" style="margin-left:-40px">
                        {%ifequal query.media_type 'audio'%}
                            <li><label for="id_media_type_0">{% trans "no preference" %}</label><input id="id_media_type_0" type="radio" value="1" name="media_type"></input></li>
                            <li><label for="id_media_type_1">{% trans "audio" %}</label><input id="id_media_type_1" type="radio" value="audio" name="media_type" checked="checked"></input></li>
                            <li><label for="id_media_type_2">{% trans "video" %}</label><input id="id_media_type_2" type="radio" value="video" name="media_type"></input></li>
                        {%else%}
                            {%ifequal query.media_type 'video'%}
                                <li><label for="id_media_type_0">{% trans "no preference" %}</label><input id="id_media_type_0" type="radio" value="1" name="media_type"></input></li>
                                <li><label for="id_media_type_1">{% trans "audio" %}</label><input id="id_media_type_1" type="radio" value="audio" name="media_type"></input></li>
                                <li><label for="id_media_type_2">{% trans "video" %}</label><input id="id_media_type_2" type="radio" value="video" name="media_type" checked="checked"></input></li>
                            {%else%}
                                <li><label for="id_media_type_0">{% trans "no preference" %}</label><input id="id_media_type_0" type="radio" value="1" name="media_type" checked="checked"></input></li>
                                <li><label for="id_media_type_1">{% trans "audio" %}</label><input id="id_media_type_1" type="radio" value="audio" name="media_type"></input></li>
                                <li><label for="id_media_type_2">{% trans "video" %}</label><input id="id_media_type_2" type="radio" value="video" name="media_type"></input></li>
                            {%endifequal%}
                        {%endifequal%}
                    </ul>

                </div>
                <div class="fieldWrapper">
                    {{form.viewable_errors}}
                    <label>{% trans "Available for consultation media" %} : </label></br>
                    <ul id="id_viewable" style="margin-left:-40px">
                        {%ifequal query.viewable '2'%}
                            <li><label for="id_viewable_0">{% trans "no preference" %}</label><input id="id_viewable_0" type="radio" value="1" name="viewable"></input></li>
                            <li><label for="id_viewable_1">{% trans "online and public" %}</label><input id="id_viewable_1" type="radio" value="2" name="viewable" checked="checked"></input></li>
                            <li><label for="id_viewable_2">{% trans "online (account required)" %}</label><input id="id_viewable_2" type="radio" value="3" name="viewable"></input></li>
                        {%else%}
                            {%ifequal query.viewable '3'%}
                                <li><label for="id_viewable_0">{% trans "no preference" %}</label><input id="id_viewable_0" type="radio" value="1" name="viewable"></input></li>
                                <li><label for="id_viewable_1">{% trans "online and public" %}</label><input id="id_viewable_1" type="radio" value="2" name="viewable"></input></li>
                                <li><label for="id_viewable_2">{% trans "online (account required)" %}</label><input id="id_viewable_2" type="radio" value="3" name="viewable" checked="checked"></input></li>
                            {%else%}
                                <li><label for="id_viewable_0">{% trans "no preference" %}</label><input id="id_viewable_0" type="radio" value="1" name="viewable" checked="checked"></input></li>
                                <li><label for="id_viewable_1">{% trans "online and public" %}</label><input id="id_viewable_1" type="radio" value="2" name="viewable"></input></li>
                                <li><label for="id_viewable_2">{% trans "online (account required)" %} </label><input id="id_viewable_2" type="radio" value="3" name="viewable"></input></li>
                            {%endifequal%}
                        {%endifequal%}
                    </ul>
                </div>
            </div>
            <div class="col-md-5" id="right-form" style="margin-left:13%">
                <div class="fieldWrapper">
                    {{form.recorded_from_date.errors}} {{form.recorded_to_date.errors}}
                    <label>{% trans "Recording date" %}:</label></br>
                    {{form.recorded_from_date}} <span style="font-size:3em" aria-hidden="true">-</span> {{form.recorded_to_date}}
                </div>
                <div class="fieldWrapper">
                    {{form.item_status_errors}}
                    <label>{% trans "Document status" %} : </label></br>
                    <ul id="id_item_status" style="margin-left:-40px">
                        {%ifequal query.item_status 'pub'%}
                            <li><label for="id_item_status_0">{% trans "no preference" %}</label><input id="id_item_status_0" type="radio" value="1" name="item_status"></input></li>
                            <li><label for="id_item_status_1">{% trans "Published" %}</label><input id="id_item_status_1" type="radio" value="pub" name="item_status" checked="checked"></input></li>
                            <li><label for="id_item_status_2">{% trans "Unpublished" %}</label><input id="id_item_status_2" type="radio" value="unpub" name="item_status"></input></li>
                        {%else%}
                            {%ifequal query.item_status 'unpub'%}
                                <li><label for="id_item_status_0">{% trans "no preference" %}</label><input id="id_item_status_0" type="radio" value="1" name="item_status"></input></li>
                                <li><label for="id_item_status_1">{% trans "Published" %}</label><input id="id_item_status_1" type="radio" value="pub" name="item_status"></input></li>
                                <li><label for="id_item_status_2">{% trans "Unpublished" %}</label><input id="id_item_status_2" type="radio" value="unpub" name="item_status" checked="checked"></input></li>
                            {%else%}
                                <li><label for="id_item_status_0">{% trans "no preference" %}</label><input id="id_item_status_0" type="radio" value="1" name="item_status" checked="checked"></input></li>
                                <li><label for="id_item_status_1">{% trans "Published" %}</label><input id="id_item_status_1" type="radio" value="pub" name="item_status"></input></li>
                                <li><label for="id_item_status_2">{% trans "Unpublished" %}</label><input id="id_item_status_2" type="radio" value="unpub" name="item_status"></input></li>
                            {%endifequal%}
                        {%endifequal%}
                    </ul>
                </div>
                <div class="fieldWrapper">
                    {{form.year_published_from.errors}} {{form.year_published_to.errors}}
                    <label> {% trans "year published" %} :</label></br>
                    {{form.year_published_from}} <span style="font-size:3em" aria-hidden="true">-</span> {{form.year_published_to}}
                </div>
                <div class="fieldWrapper">
                    {{form.recording_context.errors}}
                    {{ form.recording_context.label_tag }}</br>
                    {{form.recording_context}}
                </div>
                <div class="fieldWrapper">
                    {{form.physical_format.errors}}
                    {% trans form.physical_format.label_tag %}</br>
                    {{form.physical_format}}
                </div>
                <div class="fieldWrapper">
                    {{form.code.errors}}
                    {% trans form.code.label_tag %}</br>
                    {{form.code}}
                </div>
            </div>
        </div></br>
        <button id="btn" class="btn btn-default col-md-3 col-md-offset-4" type="submit" style="height:45px;font-size:1.2em;align:center"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> {% trans "Search" %}</button></br></br>
    </form>
        <div id="anchor"></br></div>
        {% 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 'item' %}
                         <p><b>Items ({{item_count}}) | <a href="{% url "haystack_advance_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | <a href="{% url "haystack_advance_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | <a href="{% url "haystack_advance_search_type" "fonds" %}?{{request.GET.urlencode}}">Fonds ({{fonds_count}})</a></b></p>
                    {% else %}
                        {% ifequal type 'corpus' %}
                            <p><b><a href="{% url "haystack_advance_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| <a href="{% url "haystack_advance_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | Corpus ({{corpus_count}})</a> | <a href="{% url "haystack_advance_search_type" "fonds" %}?{{request.GET.urlencode}}">Fonds ({{fonds_count}})</a></b></p>
                        {% else %}
                            {% ifequal type 'fonds' %}
                                <p><b><a href="{% url "haystack_advance_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| <a href="{% url "haystack_advance_search_type" "collection" %}?{{request.GET.urlencode}}">Collections ({{collection_count}})</a> | <a href="{% url "haystack_advance_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | Fonds ({{fonds_count}})</b></p>
                            {% else %}
                                {% ifequal type 'collection'%}
                                    <p><b><a href="{% url "haystack_advance_search_type" "item" %}?{{request.GET.urlencode}}">Items ({{item_count}}) </a>| Collections ({{collection_count}}) | <a href="{% url "haystack_advance_search_type" "corpus" %}?{{request.GET.urlencode}}">Corpus ({{corpus_count}})</a> | <a href="{% url "haystack_advance_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>
             <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 'corpus' %}
                            {% include "search/mediaresource_listhaystack.html" %}
                        {% else %}
                            {% ifequal type 'fonds' %}
                                {% include "search/mediaresource_listhaystack.html" %}
                            {% else %}
                                {% ifequal type 'collection' %}
                                    {% include "search/mediacollection_listhaystack.html" %}
                                {%endifequal%}
                            {%endifequal%}
                        {%endifequal%}
                    {%endifequal%}
                </div>
                <noscript>
                    <div class="fullpage">
                        {% ifequal type 'item' %}
                            {% include "search/mediaitem_listhaystack.html" %}
                        {% else %}
                            {% ifequal type 'corpus' %}
                                {% include "search/mediaresource_listhaystack.html" %}
                            {% else %}
                                {% ifequal type 'fonds' %}
                                    {% include "search/mediaresource_listhaystack.html" %}
                                {% else %}
                                    {% ifequal type 'collection' %}
                                        {% include "search/mediacollection_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 %}
            <div id="results"></div>{# Show some example queries to run, maybe query syntax, something else? #}
        {% endif %}

{% endblock %}
{% block extra_javascript %}
    <script src="{{ STATIC_URL }}jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}telemeta/js/advanceSearch.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("#results-per-page").selectmenu({
                icons : {button: "ui-icon-carat-2-n-s"},
                change : function(){
                    window.location = '?q={{request.GET.q}}&location={{request.GET.location}}&ethnic_group={{request.GET.ethnic_group}}&instruments={{request.GET.instruments}}&year_published_from={{request.GET.year_published_from}}&year_published_to={{request.GET.year_published_to}}&media_type={{request.GET.media_type}}&viewable={{request.GET.viewable}}&collectors={{request.GET.collectors}}&recorded_from_date={{request.GET.recorded_from_date}}&recorded_to_date={{request.GET.recorded_to_date}}&item_status={{request.GET.item_status}}&recording_context={{request.GET.recording_context}}&physical_format={{request.GET.physical_format}}&code={{ request.GET.code }}&page=1&results_page='+$(this).val();
                }
            }).selectmenu("menuWidget").addClass("overflow");

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