{% load staticfiles %}
{% load i18n %}

  <div class="show-for-medium medium-4 large-3 column" style="padding:0;"><img src="{% static "images/sopds_logo.gif" %}"></div>

  <div class="small-12 medium-8 large-9 column" style="padding:0;">
  <form method="get" action="{% url "web:searchbooks" %}" id="searchform" data-abide>
  {% csrf_token %}
 
    <div class="input-group">  
		<input class="input-group-field" type="search" name="searchterms" placeholder="Search" id="main_searchbox" data-validator="check_search" required>

		<div class="input-group-button">
		      <button class="button" type="submit" data-close="search-dropdown" name="submit">{% trans "Search" %}</button>	   
		</div>   
		
		<div class="input-group-button">
		      <a class="dropdown button arrow-only float-right" data-toggle="search-dropdown"></a>    
		</div> 	
		<input type="hidden" name="page" value="0">		
	</div>
			
	<div class="dropdown-pane bottom" id="search-dropdown" data-dropdown>
	  <div class="row">
	  <fieldset class="large-12 columns">
	    <legend>{% trans "Choose Search Type:" %}</legend>
	    <input type="radio" name="searchtype" value="m" id="title" onClick="SetSearch()" {% if searchobject == "title" or not searchobject %}checked{%endif%}><label for="title">{% trans "Title" %}</label>
	    <input type="radio" name="searchtype" value="m" id="author" onClick="SetSearch()" {% if searchobject == "author" %}checked{%endif%}><label for="author">{% trans "Author" %}</label>
	    <input type="radio" name="searchtype" value="m" id="series" onClick="SetSearch()" {% if searchobject == "series" %}checked{%endif%}><label for="series">{% trans "Series" %}</label>
	  </fieldset>
	  </div>
	</div>	
	 		    
  </form>
  
  </div>

  <script>    	
	function SetSearch() {
	         var searchtype = $("input[name='searchtype']:radio:checked").attr("id");
	         $('#main_searchbox').attr( "placeholder","Search by "+ searchtype);
	         if (searchtype == "title") $('#searchform').attr( "action","{% url "web:searchbooks" %}");
	         if (searchtype == "author") $('#searchform').attr( "action","{% url "web:searchauthors" %}");
	         if (searchtype == "series") $('#searchform').attr( "action","{% url "web:searchseries" %}");	
	         $('#search-dropdown').foundation('close');         
	}	   
  </script>