{% extends "site_base.html" %}
{% load i18n %}

{% block title %} {% trans "Search" %} - {{ block.super }} {% endblock %}

{% block body_class %}adv-search search{% endblock %}

{% block body_outer %}
  <div class="span12">
    <h2 class="page-title">{% trans "Search" %}</h2>
    <form action="{% url "search" %}" class="form-horizontal advanced-search" method="GET">
      <div class="row">
        <div class="span2">
          <h3>{% trans "Search for: "%}</h3>
        </div>
        <div class="span10">
          <fieldset class="fieldset1">
            <div class="span2">
              <select name="" id="" class="span2">
                <option value="">{% trans 'All of the words' %}</option>
              </select>
            </div>
            <div class="span7">
              <div class="control-group">
                <input type="text" name="q"/>
                <button type="submit" class="btn">{% trans "Search "%}</button>
              </div>
              <div class="control-group">
                <label for="id_exclusions">{% trans 'Exclude words from your search' %}<br />
                  <input type="text" id="id_exclusions" name="exclude"/>
                </label>
              </div>
              <div class="control-group">
                <label for="id_filter_categories_all" class="radio inline">
                  <input type="radio" name="type" value="all" id="id_filter_categories_all" checked /> {% trans 'All resources' %}
                </label>
                <label for="id_filter_categories_maps" class="radio inline">
                  <input type="radio" name="type" value="map" id="id_filter_categories_maps" /> {% trans 'Maps only' %}
                </label>
                <label for="id_filter_categories_datasets" class="radio inline">
                  <input type="radio" name="type" value="layer" id="id_filter_categories_datasets" /> {% trans 'Layers only' %}
                </label>
                <label for="id_filter_categories_groups" class="radio inline">
                  <input type="radio" name="type" value="owner" id="id_filter_categories_groups" /> {% trans 'Users only' %}
                </label>
              </div>
              <div class="control-group">
                <label for="id_category">{% trans 'Category' %}</label>

                  <select name="category">
                    <option value="">{% trans 'Search All Categories' %}</option>
                  {% for category in category_list %}
                    <option value="{{ category.identifier }}">{{ category }}</option>
                  {% endfor %}
                  </select>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="span2">
          <h3>{% trans "Search by Extent: "%}</h3>
        </div>
        <div class="span10">
          <fieldset>
            <div class="control-group">
	      <div id="search_map" class="search-map" style="height:350px;width:100%;"></div>
              <div class="controls hidden" >
                <input type="text" id="extent" name="extent" class="trigger-extent" />
              </div>
            </div>
          </fieldset>
        </div>
        <!-- TODO implement search from portals/organization/group/geographic region-->
        <!--<div class="span2">
          <h3>{% trans "Type: "%}</h3>
        </div>
        <div class="span10">
          <fieldset>
            <div class="control-group">
              <label class="control-label" for="id_type_site">{% trans 'From this site/portal' %}</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="id_type_site">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_type_group">{% trans 'From this group' %}</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="id_type_group">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_type_org">{% trans 'From this organization' %}</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="id_type_org">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_type_region">{% trans 'From this geographic region' %}</label>
              <div class="controls">
                <select name="" id="id_type_region">
                  <option value=""></option>
                </select>
              </div>
            </div>
          </fieldset>
        </div>-->
        <div class="span2">
          <h3>{% trans "Metadata: "%}</h3>
        </div>
        <div class="span10">
          <fieldset>
            <div class="control-group">
              <label class="control-label" for="id_meta_date_since">{% trans 'Since this date' %}</label>
              <div class="controls">
                <div class=" input-append date"  data-date="2013-01-01" data-date-format="yyyy-mm-dd">
                  <input name="start_date" id="id_meta_date_since" type="text" class="span2" placeholder="yyyy-mm-dd" />
                  <span class="add-on"><i class="icon-calendar"></i></span>
                </div>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="id_meta_date_until">{% trans 'Until this date' %}</label>
              <div class="controls">
                <div class=" input-append date"  data-date="2013-01-01" data-date-format="yyyy-mm-dd">
                  <input name="end_date" id="id_meta_date_until" type="text" class="span2" placeholder="yyyy-mm-dd" />
                  <span class="add-on"><i class="icon-calendar"></i></span>
                </div>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="span12">
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">{% trans "Search "%}</button>
          <button class="btn btn-secondary"><a href=".">{% trans "Clear Options "%}</a></button>
        </div>
        </div>
      </div>
    </form>
    
  </div>
{% endblock %}

{% block extra_script %}
    {% if DEBUG_STATIC %}
    <script src="{{ STATIC_URL }}lib/js/bootstrap-datepicker.js" type="text/javascript"></script>
    {% endif %}
    <script type="text/javascript">
        Ext.onReady(function() {
          $(".date").datepicker();

           var map;
           var latlon_proj = new OpenLayers.Projection("EPSG:4326");
           var merc_proj = new OpenLayers.Projection("EPSG:900913");

           var update_textbox = function(){
                var tempbounds = map.getExtent().transform(merc_proj, latlon_proj);
                $("#extent").val(tempbounds.left + "," + tempbounds.right + "," + tempbounds.bottom + "," + tempbounds.top);
           }

           function init_map(){
                map = new OpenLayers.Map( 'search_map');
                layer = new OpenLayers.Layer.OSM();
                map.addLayer(layer);
                map.setCenter(
                    new OpenLayers.LonLat(0,0).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                    ), 1
                );    
                map.events.register("moveend", map, update_textbox);

                map.events.register("zoomend", map, update_textbox);
            }

            init_map();

        });
    </script>

    <style type="text/css">
        .olMapViewport{
            z-index:0;
        }
        .hidden{
            display:none;
        }
        .content-wrap{
          padding-top: 100px;
        }
    </style>

    
{% endblock %}

{% block extra_head %}
    <link href="{{ STATIC_URL }}geoexplorer/externals/ext/resources/css/ext-all.css" type="text/css" rel="stylesheet">
    <script src="{{ STATIC_URL }}geoexplorer/externals/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}geoexplorer/externals/ext/ext-all.js" type="text/javascript"></script>                       
    <script src="{{ STATIC_URL }}geoexplorer/script/GeoExplorer.js" type="text/javascript"></script>
{% endblock %}



