{% extends "groups/group_base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %} {% trans "Explore Groups" %} - {{ block.super }} {% endblock %}

{% block body_class %}groups explore{% endblock %}

{% block body %}
<div class="page-header">
  {% if user.is_authenticated %}
  <a href="{% url "group_create" %}" class="btn btn-primary pull-right">{% trans "Create a Group" %}</a>
  {% endif %}
  <h2 class="page-title">{% trans "Explore Groups" %}</h2>
</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <ul class="list-inline pull-left" id="sort">
      <li><a data-value="-date" data-filter="order_by" class="selected" ng-click="single_choice_listener($event)">{% trans "Most recent" %}</a></li>
      <li><a data-value="date" data-filter="order_by" ng-click="single_choice_listener($event)">{% trans "Less recent" %}</a></li>
      <li><a data-value="title" data-filter="order_by" ng-click="single_choice_listener($event)">{% trans "A - Z" %}</a></li>
      <li><a data-value="-title" data-filter="order_by" ng-click="single_choice_listener($event)">{% trans "Z - A" %}</a></li>
      <li><a data-value="-popular_count" data-filter="order_by" ng-click="single_choice_listener($event)">{% trans "Most popular" %}</a></li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-md-8" id="search-content">
    {% include "groups/_group_list_item.html" %}
  </div>
</div>
<div class="row">
  <div class="col-md-4 col-md-offset-4">
  {% include 'search/_pagination.html' %}
  </div>
</div>
{% endblock %}

{% block extra_script %}
  <script type="text/javascript">
  SEARCH_URL = '{% url 'api_dispatch_list' api_name='api' resource_name='groups' %}'
  </script>
  {% with include_spatial='false' %}
  {% include 'search/search_scripts.html' %}
  {% endwith %}
{% endblock extra_script %}

