{% extends "cosinnus/base.html" %}
{% load static from staticfiles %}
{% load i18n bootstrap3 cosinnus_tags widget_tweaks %}

{% block page_title %}{% trans "Search" %}{% endblock %}
{% block content_title %}{% trans "Search" %}{% endblock content_title %}

{% block main_page %}
    <div class="row">
        <form method="get" action="" role="form">
          <div class="col-lg-3 col-md-3">
          
          
          <p class="navi-explanation">{% trans "Topics" %}:</p>
          <div class="app-main">
	          <div type="button" class="btn btn-default w100 regular-space">
			    <ul class="media-list">
			        <li class="media">
			            <a class="pull-left" href="#">
			                <i class="fa fa-lightbulb-o"></i>
			            </a>
			            <div class="media-body">
			                {% captureas placeholder %}{% trans "Select topics" %}{% endcaptureas %}
			                {% render_field form.topics class+=" w100" placeholder=placeholder %}
			            </div>
			            
			        </li>
			    </ul>
			  </div>
          </div>
          
          
            <p class="navi-explanation">{% trans "Search in Apps" %}:</p>
            
            <div class="app-main">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}">
                <ul class="media-list">
                  <li class="media">
            
                    <!--
                    <a class="pull-left" href="#">
                      4
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-search"></i>
                    </a>
                    <div class="media-body">
                      {% trans "All" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
            
            <div class="app-todos">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=todo">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-tasks"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Todos" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
        
            <div class="app-files">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=file">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      0
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-file"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Files" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
        
            <div class="app-etherpad">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=etherpad&models=ethercalc">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-file-text-o"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Etherpads" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
            
            
            <div class="app-etherpad">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=cosinnus_etherpad.ethercalc">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-table"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Ethercalcs" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
            
            <div class="app-poll">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=cosinnus_poll.Poll">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-bar-chart"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Polls" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
            
            <div class="app-marketplace">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=cosinnus_marketplace.Offer">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-exchange"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Offers" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
        
            <div class="app-main">
              <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "models" %}&models=note">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      2
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-file-text-o"></i>
                    </a>
                    <div class="media-body">
                      {% trans "News" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
        
            <div class="app-calendar">
              <button type="button" class="btn w100 btn-emphasized large-space" href="?{% strip_params request "models" %}&models=event">
                <ul class="media-list">
                  <li class="media">
                    <!--
                    <a class="pull-left" href="#">
                      4
                    </a>
                    <a class="pull-left" style="background-color:inherit;" href="#">
                    -->
                    <a class="pull-left" href="#">
                      <i class="fa fa-calendar"></i>
                    </a>
                    <div class="media-body">
                      {% trans "Events" %}
                    </div>
                  </li>
                </ul>
              </button>
            </div>
        
            {% if user.is_authenticated %}
        
            <p class="navi-explanation">{% trans "Search in teams" %}:</p>
            
            {% comment %}  {% if "groups" in request.GET %} {% endcomment %}
            <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "groups" %}">
              <ul class="media-list">
                <li class="media">
                  <!--
                  <a class="pull-left" style="background-color:inherit;" href="#">
                  -->
                  <a class="pull-left" href="#">
                    <i class="fa fa-group"></i>
                  </a>
                  <div class="media-body">
                    {% trans "All Projects and Groups" %}
                  </div>
                </li>
              </ul>
            </button>
            
            
            <button type="button" class="btn w100 btn-emphasized fine-space" href="?{% strip_params request "groups" %}&groups=mine">
              <ul class="media-list">
                <li class="media">
                  <a class="pull-left" href="#">
                      <i class="fa fa-group"></i>
                  </a>
                  <div class="media-body">
                    {% trans "My Projects and Groups" %}
                  </div>
                </li>
              </ul>
            </button>
        
            <button type="button" class="btn w100 btn-emphasized large-space" href="?{% strip_params request "groups" %}&groups=others">
              <ul class="media-list">
                <li class="media">
                  <a class="pull-left" href="#">
                      <i class="fa fa-group"></i>
                  </a>
                  <div class="media-body">
                    {% trans "Other Projects and Groups" %}
                  </div>
                </li>
              </ul>
            </button>
        
        	{% endif %}
            
            <p class="navi-explanation">{% trans "Search for Users" %}:</p>
        
            {% comment %}  {% if "groups" in request.GET %} {% endcomment %}
            <button type="button" class="btn w100 btn-emphasized large-space" href="?&models=user{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
              <ul class="media-list">
                <li class="media">
                  <!--
                  <a class="pull-left" style="background-color:inherit;" href="#">
                  -->
                  <a class="pull-left" href="#">
                    <i class="fa fa-user"></i>
                  </a>
                  <div class="media-body">
                    {% trans "Users" %}
                  </div>
                </li>
              </ul>
            </button>
        
            {% comment %}
            <p class="navi-explanation">Ergebnisse filtern:</p>
            
            <ol class="input-area input-area-left-column">
              <li>
                <div class="calendar-date-time-chooser">
                  Von
                  <input
                    placeholder="Datum"
                    readonly ="readonly"
                    class="calendar-date-time-chooser-date" />
                  <input type="hidden"
                    class="calendar-date-time-chooser-hiddendate"
                    value="{{ form.cleaned_data.valid_start|date:"c" }}"
                    name="valid_start" />
                  <div class="small-calendar"></div>
                </div>
                <div class="calendar-date-time-chooser">
                  Bis
                  <input
                    placeholder="Datum"
                    readonly ="readonly"
                    class="calendar-date-time-chooser-date" />
                  <input type="hidden"
                    class="calendar-date-time-chooser-hiddendate"
                    value="{{ form.cleaned_data.valid_end|date:"c" }}"
                    name="valid_end" />
                  <div class="small-calendar"></div>
                </div>
              </li>
            </ol>
        
            <ol class="input-area input-area-left-column">
              <li>
                <input
                  type="hidden"
                  class="location-selector"
                  data-tags="Berlin,Kreuzberg,Oranienhof,Köln,Paris,London,Frankfurt,New York,Peking"
                  data-placeholder="Ort"
                  name="location"
                  value="{{ form.cleaned_data.location }}" />
              </li>
            </ol>
        
        
            <button type="submit" class="btn btn-default">
              <ul class="media-list">
                <li class="media">
                  <a class="pull-left" href="#">
                    <i class="fa fa-search"></i>
                  </a>
                  <div class="media-body">
                    Filtern
                  </div>
                </li>
              </ul>
            </button>
            {% endcomment %}
          </div>
          <div class="col-lg-9 col-md-9">
            <div class="row">
              <div class="col-xs-12">
                <div class="content-box">
                  
                  <div class="w100 large-space clearfix">
	                  <button type="submit" class="btn btn-emphasized no-margin">
	                    <ul class="media-list">
	                        <li class="media">
	                            <a class="pull-left" href="#">
	                                <i class="fa fa-search"></i>
	                            </a>
	                            <div class="media-body">
	                                {% trans "Search" %}
	                            </div>
	                        </li>
	                    </ul>
	                  </button>
	                  
	                  <div type="button" class="btn btn-default w100" style="display: inline;">
	                    <ul class="media-list">
	                      <li class="media">
	                        <a class="pull-left" href="#">
	                          <i class="fa fa-search"></i>
	                        </a>
	                        <div class="media-body media-body-form-control">
	                          <input class="form-control"
	                            placeholder="Suche"
	                            value="{% if query %}{{ query }}{% elif request.GET.q %}{{ request.GET.q }}{% endif %}"
	                            id="searchChangeInput"
	                            autocomplete="off"
	                            name="q" />
	                        </div>
		                      
	                      </li>
	                    </ul>
	                  </div>
	              </div>
                  
                  {% if query or form.cleaned_data.topics %}
                    <p class="large-space">
                      {% if query and form.cleaned_data.topics %}
                        {% blocktrans with start=page.start_index end=page.end_index total=paginator.count %}Showing {{ end }} of {{ total }} results for your query "{{ query }}" with topics:{% endblocktrans %}
                      {% elif query %}
                        {% blocktrans with start=page.start_index end=page.end_index total=paginator.count %}Showing {{ end }} of {{ total }} results for your query "{{ query }}"{% endblocktrans %}
                      {% elif form.cleaned_data.topics %}
	                    {% blocktrans with start=page.start_index end=page.end_index total=paginator.count %}Showing {{ end }} of {{ total }} results with topics:{% endblocktrans %}
	                  {% endif %}
	                  
                      {% if form.cleaned_data.topics %}
                        {% trans "or" as or_seperator %}
                        {% render_cosinnus_topics form.cleaned_data.topics or_seperator %}
                      {% endif %}	
                    </p>
        
                    {% for result in page.object_list %}
                      {{ result.rendered|safe }}
                    {% empty %}
                    	{% captureas empty_message %}{% trans "We could not find any results matching your search query." %}{% endcaptureas %}
			            {% include 'cosinnus/common/empty_button.html' with message=empty_message %}
                    {% endfor %}
        
                    {% if page.has_previous or page.has_next %}
                      	<div>
                      		<button type="button" class="btn btn-{% if page.has_previous %}emphasized{% else %}default{% endif %} pull-left" style="margin: 0;" {% if page.has_previous %}href="?{% strip_params request "page" %}&page={{ page.previous_page_number }}"{% else %}disabled=1{% endif %}>
					            <ul class="media-list">
					                <li class="media">
					                    <a class="pull-left" href="#">
					                        <i class="fa fa-chevron-left"></i>
					                    </a>
					                    <div class="media-body">
					                        {% trans "previous" %}
					                    </div>
					                </li>
                      </ul>
					        </button> 
					        
					        <button type="button" class="btn btn-{% if page.has_next %}emphasized{% else %}default{% endif %}" {% if page.has_next %}href="?{% strip_params request "page" %}&page={{ page.next_page_number }}"{% else %}disabled=1{% endif %}>
					            <ul class="media-list">
					                <li class="media">
					                    <a class="pull-left" href="#">
					                        <i class="fa fa-chevron-right"></i>
					                    </a>
					                    <div class="media-body">
					                        {% trans "next" %}
					                    </div>
					                </li>
					            </ul>
					        </button> 
                      	
                      	</div>
                      
                    {% endif %}
                  {% else %}
                    {% captureas empty_message %}{% trans "Enter one or more search terms or select a topic to search." %}{% endcaptureas %}
                    {% include 'cosinnus/common/empty_button.html' with message=empty_message %}
                  {% endif %}
                </div><!-- content-box -->
              </div><!-- col -->
            </div><!-- row -->
          </div><!-- right column -->
        </form>
    </div><!-- row -->
    
{% endblock main_page %}
