{% extends "telemeta/base.html" %}
{% load telemeta_utils %}
{% load i18n %}

{% block head_title %}{% trans "Advanced Search" %} - {{ block.super }}{% endblock %}

{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% url telemeta-css "jquery.autocomplete.css" %}" />
{% endblock %}

{% block extra_javascript %}
<script src="{% url telemeta-js "jquery.bgiframe.js" %}" type="text/javascript"></script>
<script src="{% url telemeta-js "jquery.autocomplete.js" %}" type="text/javascript"></script>
<script type="text/javascript">
function update_period(source, from_field, to_field) {
    var from_year = $(from_field);
    var to_year = $(to_field);

    if (from_year.val() == "0") {
        to_year.attr('disabled', '1');
        to_year.val('0');
    } else {
        to_year.removeAttr('disabled');
        if ($(source).is(to_field)) {
            if (parseInt(from_year.val()) > parseInt(to_year.val()))
                from_year.val(to_year.val());
        } else if (parseInt(from_year.val()) > parseInt(to_year.val())) {
            to_year.val(from_year.val());
        }
    }
}

$(document).ready(function () {
    $('#location').autocomplete('{% url telemeta-complete-location %}', {
        max: 20,
        formatResult: function(data) {
            return data[0].replace(/ *\([0-9]+.*\) *$/, '');
        }
    });
    update_period('#rec_year_from', '#rec_year_to');
    $('#rec_year_from, #rec_year_to').change(function () {
        update_period(this, '#rec_year_from', '#rec_year_to');
    });
    update_period('#pub_year_from', '#pub_year_to');
    $('#pub_year_from, #pub_year_to').change(function () {
        update_period(this, '#pub_year_from', '#pub_year_to');
    });
});

</script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

<div id="module-set-left" style="width: 20%">

    {% block module_searches %}
    {% with searches as searches and "My searches" as title %}
    {% include "telemeta/inc/module_searches.html" %}
    {% endwith %}
    {% endblock %}

<div class="module_action">
    <a href="#" class="component_icon button" id="action_yellow"
      onclick="document.getElementById('searchform').submit(); return false;">{% trans 'Search' %}</a>
</div>

</div>

<div class="desk_center">
<div class="course">
<h1>{% trans "Advanced Search" %}</h1>

<form action="{% url telemeta-search %}" id="searchform">{% csrf_token %}
<fieldset>

    <p>
    <label for="location">{% field_label "Location" %}</label>
    <input type="text" name="location" id="location" value="{{ criteria.location }}" />
    </p>

    <p>
    <label for="ethnic_group">{% field_label "EthnicGroup" %}</label>
    <select id="ethnic_group" name="ethnic_group">
        <option value="">All ethnic groups</option>
    {% for group in ethnic_groups %}
        <option value="{{group.id}}" {% ifequal criteria.ethnic_group.id group.id %}selected {% endifequal %}>{{group|escape}}</option>
    {% endfor %}
    </select>
    </p>

    <p>
    <label for="title">{% trans "Title" %}</label>
    <input type="text" id="title" name="title" />
    </p>

    <p>
    <label for="creator">{% field_label "MediaCollection" "creator" %}</label>
    <input type="text" id="creator" name="creator" />
    </p>

    <p>
    <label for="collector">{% field_label "MediaCollection" "collector" %}</label>
    <input type="text" id="collector" name="collector" />
    </p>

    {% if rec_years %}
    <p>
    <label for="rec_date_from">{% trans "Year of recording" %}</label>
    <select id="rec_year_from" name="rec_year_from" class="tiny">
        <option value="0"></option>
        {% for year in rec_years %}
        <option value="{{ year }}" {% ifequal criteria.rec_year_from year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    {% trans "to" %}
    <select id="rec_year_to" name="rec_year_to" class="tiny">
        <option value="0"></option>
        {% for year in rec_years %}
        <option value="{{ year }}" {% ifequal criteria.rec_year_to year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    </p>
    {% endif %}

    {% if pub_years %}
    <p>
    <label for="pub_date_from">{% trans "Year of publication" %}</label>
    <select id="pub_year_from" name="pub_year_from" class="tiny">
        <option value="0"></option>
        {% for year in pub_years %}
        <option value="{{ year }}" {% ifequal criteria.pub_year_from year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    {% trans "to" %}
    <select id="pub_year_to" name="pub_year_to" class="tiny">
        <option value="0"></option>
        {% for year in pub_years %}
        <option value="{{ year }}" {% ifequal criteria.pub_year_to year %}selected {% endifequal %}>{{year}}</option>
        {% endfor %}
    </select>
    </p>
    {% endif %}

    <p><label for="sound">{% trans "Sound" %}</label>
    <input type="checkbox" name="sound" value="True" align="left" />
    </p>

</fieldset>

</form>

</div>
</div>


{% endblock %}