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

{% block title %}{% trans "Upcoming Events" %}{% endblock %}

{% block maincontent %}
<h2 class="grid_12">{% trans "Upcoming Events" %}</h2>
{% for event in event_list %}
  {% ifchanged %}<h3 class="grid_12">{{ event.start|date:'F Y' }}</h3>{% endifchanged %}
  {% get_comment_count for event as comment_count %}
  <div class="grid_6">
   <a href="{{ event.get_absolute_url }}"><img src="{{ event.get_thumbnail.url }}" alt=" {% trans 'Event Image' %}" class="thumbnail"/></a>
   <h4><a href="{{ event.get_absolute_url }}">{{ event.name }}</a></h4>
   {{event.description}}
   <ul class="info">
    <li>
     <img src="{{ STATIC_URL }}/icons/date.png" alt="{% trans 'Start' %}:" title="{% trans 'Start' %}">
	 {{ event.start|date:'SHORT_DATE_FORMAT' }}
	 {% if event.end %}
  	  {% trans "from" %} {{ event.start|time:'H:i' }} {% trans "to" %} {{ event.end|time:'H:i' }}
	 {% else %}
  	  {{ event.start|time:'H:i' }}
	 {% endif %}
	</li>
	<li>
	 <img src="{{ STATIC_URL }}/icons/map.png" alt="{% trans 'Location' %}" title="{% trans 'Location' %}">
	 {{ event.location }}
	</li>
	<li>
     <img src="{{ STATIC_URL }}/icons/comments.png" alt="{% trans 'Comments' %}" title="{% trans 'Comments' %}">
     <a href="{{event.get_absolute_url}}#comments">{{ comment_count }}</a>
    </li>
   </ul>
   <p style="text-align:right">
   {% if perms.events.change_event %}
    <a href="{{ event.get_edit_url }}" class="button"><img src="{{ STATIC_URL }}icons/page_edit.png" alt="{%trans "Edit" %}"></a>
   {% endif %}
   {% if perms.events.add_photo %}
    <a href="{% url 'event-photo-list' event.pk %}" class="button"><img src="{{ STATIC_URL }}icons/image_add.png" alt="{%trans "Upload" %}"></a>
   {% endif %}
   </p>
</div>
{% endfor %}
{% if page_obj.has_other_pages %}{% include 'paginator.html' %}{% endif %}
{% endblock %}