{% extends "events/page.html" %}
{% load i18n comments%}

{% block title %}{% trans "Upcoming Events" %}{% endblock %}
{% block teaser%}<h2>{% trans "Upcoming Events" %}</h2>{% endblock %}
{% block maincontent %}

{% regroup event_list by start|date:'F Y' as month_list %}
{% for month in month_list %}
    <h3 class="grid_12">{{ month.grouper }}</h3>
    {% for event in month.list %}
        {% get_comment_count for event as comment_count %}
        <a href="{{ event.get_absolute_url }}" class="grid_2"><img
           src="{{ event.get_thumbnail.url }}" alt=" {% trans 'Event Image' %}"  class="thumbnail"/></a>
        <div class="grid_4">
            {% if perms.events.change_event %}
            <a href="{{ event.get_edit_url }}" class="button" style="float:right"><span class="fa fa-pencil"></span></a>
            {% endif %}
            {% if perms.events.add_photo %}
            <a href="{% url 'event-photo-list' event.pk %}" class="button" style="float:right"><span class="fa fa-camera-retro"></span></a>
            {% endif %}
            <h4><a href="{{ event.get_absolute_url }}">{{ event.name }}</a></h4>
            <ul class="info">
                <li><span class="fa fa-calendar-o" title="{% trans 'Date' %}"></span> <time datetime="{{event.start|date:'c'}}">{{ event.start|date:'SHORT_DATE_FORMAT' }}</time></li>
                <li><span class="fa fa-map-marker" title="{% trans 'Location' %}"></span> {{ event.location }}</li>
                <li><span class="fa fa-comments" title="{% trans 'Comments' %}"></span> <a href="{{event.get_absolute_url}}#comments">{{ comment_count }}</a></li>
            </ul>
            <p>{{event.description|truncatewords_html:20}}</p>
        </div>
        {% if forloop.counter|divisibleby:2 %}<br class="clear">{% endif %}
    {% endfor %}
{% endfor %}
{% if page_obj.has_other_pages %}{% include 'paginator.html' %}{% endif %}
{% endblock %}
