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

{% block title %}{% trans "Upcoming Events" %}{% endblock %}
{% block teaser%}<h1>{% trans "Upcoming Events" %}</h1>{% 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 %}
        <div class="grid_6">
            {% if perms.events.change_event %}
                <a href="{{ event.get_edit_url }}" class="button" style="float:right"><span class="fa fa-pencil"></span></a>
            {% endif %}
            <a href="{{ event.get_absolute_url }}" class="thumbnail"><img
               src="{{ event.get_image|thumbnail_url:'thumbnail' }}" alt="{% trans 'Event Image' %}" width="140" height="140"/>
            </a>
            <h4><a href="{{ event.get_absolute_url }}">{{ event.name }}</a></h4>
            <ul class="info">
                <li><span class="fa fa-calendar-o" title="{% trans 'Date' %}" aria-label="{% trans 'Date' %}"></span>
                    <time datetime="{{event.start|date:'c'}}">
                        {{ event.start|date:'D' }}
                        {{ event.start|date:'SHORT_DATE_FORMAT' }}
                    </time>
                </li>
                <li><span class="fa fa-clock-o" title="{% trans 'Start' %}" aria-label="{% trans 'Start' %}"></span>
                    {{ event.start|time:'H:i' }}
                </li>

                <li><span class="fa fa-map-marker" title="{% trans 'Location' %}" aria-label="{% trans 'Location' %}"></span>
                    {{ event.location }}
                </li>
                <li><span class="fa fa-comments" title="{% trans 'Comments' %}" aria-label="{% trans 'Comments' %}"></span>
                    <a href="{{event.get_absolute_url}}#comments">{{ comment_count }}</a>
                </li>
            </ul>
            <p>{{event.description|truncatewords_html:25|safe}}</p>
        </div>
        {% if forloop.counter|divisibleby:2 %}<br class="clear">{% endif %}
    {% endfor %}
{% endfor %}
{% if page_obj.has_other_pages %}{% include 'paginator.html' %}{% endif %}
{% endblock %}