{% load static %}
{% load i18n %}

<div class="in-search-form">
    <form action="{{ search_form.search_url }}" class="search_form" id="search-block-form">
        <div class="s-title">{{ search_form.title }}</div>
            <div class="search-form-wrap">
                <div class="search-line">
                    <div class="sf-field-wrap">
                        <div class="sf-field">
                            <label for="search">{% trans 'Я ищу:' %}</label>
                            <div class="input-text">{{ search_form.q }}</div>
                        </div>
						<div class="sf-autocomplete main-field-complete visible">
							<div class="sfa-wrap q-field-complete-wrap"  id="q-field-complete-wrap">

							</div>
						</div>

                    </div>
                    <div class="sf-field-wrap">
                        <div class="sf-field">
                            <label for="where">{% trans 'Где:' %}</label>
                            <div class="input-text">{{ search_form.w }}</div>
                        </div>
						<div class="sf-autocomplete main-field-complete visible">
							<div class="sfa-wrap w-field-complete-wrap"  id="w-field-complete-wrap">

							</div>
						</div>
                    </div>
                    <div class="sf-field-wrap">
                        <button class="search_submit" type="submit"><span>{% trans 'найти' %}</span></button>
                    </div>
                </div>
                <div class="search-line sl-options">
                    {% if search_form.th %}
                        <div class="sf-field-wrap no-wrap">{% trans 'Тематика: ' %}
                            <a class="search-modal-open" href="#pwSubj" id="subj-modal-trigger" data-default="{{ search_form.get_themes_display }}">
								{{ search_form.get_themes_display }}
							</a>
							<span class="clear-all-button">&nbsp;</span>
                        </div>
                    {% endif %}
                    {% if search_form.place_type %}
                        <div class="sf-field-wrap">{% trans 'Тип: ' %}
                            <a class="search-modal-open" href="#pw-place_type" id="subj-modal-trigger" data-default="{{ search_form.get_themes_display }}">
								bla
							</a>
                        </div>
                    {% endif %}
                    {% if search_form.area %}
                    <div class="sf-field-wrap no-wrap">{% trans 'Место: ' %}
                        <a class="search-modal-open" href="#pwPlace" id="place-modal-trigger" data-default="{{ search_form.get_places_display }}">
                        {{ search_form.get_places_display }}
                        </a>
						<span class="clear-all-button">&nbsp;</span>
					</div>
                    {% endif %}

                    {% if search_form.fr %}
                        <div class="sf-field-wrap no-wrap"><span class="trigger-label">{% trans 'Период: ' %}</span>
                            <a class="search-modal-open" href="#pwPeriod"  id="period-modal-trigger" data-default="Не важно" data-lng-from="с" data-lng-to="по">
                            {% if search_form.fr.value or search_form.to.value %}
                                {% if search_form.fr.value %}
                                    c {{ search_form.fr.value }}
                                {% endif %}
                                {% if search_form.to.value %}
                                    по {{ search_form.to.value }}
                                {% endif %}
                            {% else %}
                                Не важно
                            {% endif %}
                            </a>
							<span class="clear-all-button">&nbsp;</span>
                        </div>
                    {% endif %}
                </div>
        </div>
		<div class="modals">
			<div class="search-modal-overlay" id="search-modal">
				<div class="search-modal-wrap fancybox-skin">
					<div class="search-modal-body"> {% if search_form.th %}
						{% include 'client/popups/theme.html' with search_form=search_form formId="pwSubj" selectedItemTemplate="csb-subj-selected" autoCompleteId="subj-filter-complete-block" filterInputId="subj-fliter-input" selectedItemsContainer="csb-subj-selected-items" subjectTriggerWrapId="subj-checks" exhibitionCheck="exhibition-check" conferenceCheck="conference-check" hasDate="true" %}
						{% endif %}
						{% if search_form.place_type %}
						{% include 'client/popups/place_type.html' with search_form=search_form formId="pwPlace" %}
						{% endif %}
						{% if search_form.area %}
						{% include 'client/popups/place.html' with search_form=search_form formId="pwPlace" selectedItemTemplate="csb-selected" autoCompleteId="filter-complete-block" filterInputId="place-filter-input" selectedItemsContainer="csb-selected-items" hasDate="true" %}
						{% endif %}
						{% if search_form.fr %}
						{% include 'client/popups/period.html' with search_form=search_form %}
						{% endif %}
					</div>
					<div class="a modal-close fancybox-close">&nbsp;</div>
				</div>
			</div>

		</div>

    </form>
	{% block scripts %}
	<script src="{% static 'client/js/plugins/inputmask/jquery.inputmask.js' %}"></script>
	<script src="{% static 'client/js/_modules/block.search.js' %}"></script>
	<script>
	EXPO.searchBlock.init({
		formId: 'search-block-form',
		modalTriggerClass:'search-modal-open',
		searchData:'{{ search_form.data_with_parents|safe }}',
		closerText: "{% trans ' и еще _ позиции' %}",
		closerTextSingle:"{% trans ' и еще _ позиция' %}",
		place:{
			id:'pwPlace',
			selectedItemTemplate:'csb-selected',
			ajaxUrl:'http://{{ request.get_host }}/search-form/',
			autoCompleteUrl:'http://{{ request.get_host }}/search-form/autocomplete/',
			getParentUrl:'http://{{ request.get_host }}/search-form/get-parent/',
			autoCompleteId:'filter-complete-block',
			filterInputId:'place-filter-input',
			modalTrigger:'place-modal-trigger',
			selectedItemsContainer:'csb-selected-items',
			clearAllButtonClass:'clear-all-button',
			applyBtnClass:'modal-approve'

		},
		subject:{
			id:'pwSubj',
			selectedItemTemplate:'csb-subj-selected',
			autoCompleteId:'subj-filter-complete-block',
			ajaxUrl:'http://{{ request.get_host }}/search-form/',
			autoCompleteUrl:'http://{{ request.get_host }}/search-form/autocomplete/',
			filterInputId:'subj-fliter-input',
			modalTrigger:'subj-modal-trigger',
			getParentUrl:'http://{{ request.get_host }}/search-form/get-parent/',
			selectedItemsContainer:'csb-subj-selected-items',
			subjectTriggerWrapId:'subj-checks',
			//switched by default
			defaultOn:['exhibition-check','conference-check'],
			clearAllButtonClass:'clear-all-button',

			applyBtnClass:'modal-approve'
		},
		period:{
			id:'pwPeriod',
			dateTo:'dateTo',
			dateFrom:'dateFrom',
			modalTrigger:'period-modal-trigger',
			clearAllButtonClass:'clear-all-button',

			applyBtnClass:'modal-approve'
		},
		firstField:{
			id:'id_q',
			autoCompleteUrl:'http://{{ request.get_host }}{{ search_form.autocomplete_url }}',
			autoCompleteWrapId:'q-field-complete-wrap',
			prefix:'tid_',
			prefixInner:'tgid_'
		},
		placeField:{
			id:'id_w',
			autoCompleteUrl:'http://{{ request.get_host }}/search-form/autocomplete/',
			autoCompleteWrapId:'w-field-complete-wrap',
			prefix:'id_'
		},
		modal:{
			id:'search-modal',
			wrapClass:'search-modal-wrap',
			size:{
				pwPeriod:{
					width:524,
					height:260
				},
				pwSubj:{
					width:640,
					height:514
				},
				pwPlace:{
					width:640,
					height:460
				}
			}

		}

	});
	</script>

	{% endblock %}
</div>