{% extends 'base/structure.html.twig' %}

{% block topcontainer %}
<div id="search-container">
	<form action="/news/search" method="get" class="searchForm" accept-charset="UTF-8">
		<div class="search-header">
			<div class="keywords-container">
				<label class="search-label">{{ 'Keywords'|trans }}</label>
				<input type="text" name="keywords" class="search-text" value="{{ searchFilter.keywords }}" placeholder="{{ 'Keywords'|trans }}">
				<div class="searchType">
					<label><input type="checkbox" name="searchType" value="2">{{ '_SEARCH_IN_TITLE_AND_BODY_'|trans }}</label>
				</div>
				<div class="searchType">
					<label><input type="checkbox" name="exactMatch" value="2">{{ 'Exact Keywords'|trans }}</label>
				</div>
			</div>
			<input type="hidden" name="sortBy" class="sortByInput" value="1">
			<div class="authorCategories-container">
				<label class="search-label">{{ 'Choose Category'|trans }}</label>
				<div class="categoriesSelect">
					<span class="triangle-bottom"></span>
					<select name="category" class="categories">
						{% for id,category in categoriesSelect %}
							<option value="{{ id }}" {% if searchFilter.category is defined and searchFilter.category == id %}selected{% endif %}>{{ category }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="author-search">
					<label class="search-label">{{ '_AUTHOR_'|trans }}</label>
					<input type="text" name="author" class="search-text searchAuthor" value="{% if searchFilter.author is defined %}{{ searchFilter.author }}{% endif %}" placeholder="{{ '_AUTHOR_'|trans }}" autocomplete="off">
					<ul class="displayAuthor"></ul>
				</div>
			</div>
			<div class="date-picker-container">
				<label class="search-label">{{ '_DATE_'|trans }} {{ 'From'|trans }}</label>
				<div class="dateFrom-search dateinput">
					<input type="date" name="calendar" class="datefrom datepickerinputstart search-text" value="{% if searchFilter.calendar is defined %}{{ searchFilter.calendar }}{% endif %}" placeholder="mm/dd/yyyy">
				</div>
				<div class="dateTo-search dateinput">
					<label class="search-label">{{ 'To'|trans }}</label>
					<input type="date" name="to" class="dateto datepickerinputend search-text" value="{% if searchFilter.to is defined %}{{ searchFilter.to }}{% endif %}" placeholder="mm/dd/yyyy">
				</div>
			</div>
		</div>
		<div class="search-footer">
			<input type="submit" name="submit" class="submitSearchForm" value="{{ 'Search'|trans }}">
		</div>
	</form>
</div>

<div class="searchHeader">
	<h3 id="result">
		<!--{CONSTANTS._RESULTS_OF_:h}: {searchFilter.keywords:h} - {CONSTANTS._NUMBER_:h}: {totalResults}-->
		<span class="sortBy">{{ '_SORTBY_'|trans }}: </span>
		<a href="#" class="sortBy {% if not searchFilter.sortBy is defined or searchFilter.sortBy == "date" %}activeSortBy{% endif %}" title="{{ '_DATE_'|trans }}" data-value="date">{{ '_DATE_'|trans }}</a>
		<a href="#" class="sortBy {% if searchFilter.sortBy is defined and searchFilter.sortBy == "relevance" %}activeSortBy{% endif %}" title="{{ 'Most Relevant'|trans }}" data-value="relevance">{{ 'Most Relevant'|trans }}</a>
	</h3>
</div>

{% endblock %}