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

{% block title %} {{ photo.name }} - {{ photo.event.name }} {% endblock %}
{% block description %}{% spaceless %}
{% if photo.description %}{{photo.description}}
{% else %}
Foto {{ photo.name }} vom {{ photo.date_created|default:photo.created_date }} geschossen bei {{event.name}}
{% endif %}
{% endspaceless %}{% endblock %}

{% block extra_head %}
<script type="text/javascript" src="{{ STATIC_URL }}/js/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}/js/mousetrap.js"></script>
<script type="text/javascript">
if ($('a.previous').attr('href')) {
    Mousetrap.bind('left', function() { window.location = $('a.previous').attr('href'); });
}
if ($('a.next').attr('href')) {
    Mousetrap.bind('right', function() { window.location = $('a.next').attr('href'); });
}
</script>
{% endblock %}

{% block teaser %}
  <h1 class="grid_12">{{event.name}} - {{ photo.name }}</h1>
  {% if event.description %}
  <div id="teaser_text">{{event.description|truncatewords_html:75|safe}}</div>
  {% endif %}
{% endblock %}

{% block opengraph %}
<meta property="og:type" content="photo" />
<meta property="og:title" content="{{photo.name}} - Foto" />
<meta property="og:url" content="http://www.kasu.at{{photo.get_absolute_url}}" />
<meta property="og:image" content="http://www.kasu.at{{photo.thumbnail.url}}" />
{% if photo.description %}<meta property="og:description" content="{{photo.description}}" />{% endif %}
{% endblock %}

{% block maincontent %}
<div id="display" class="grid_12">
    <img src="{{photo.image|thumbnail_url:'display'}}" alt="{{photo.name}}" title="{{photo.name}}"/>
    {% if photo.previous_photo %}
        <a href="{% url 'event-photo' photo.previous_photo.event.id photo.previous_photo.id %}#display" class="previous" id="previous">{% trans 'previous' %}</a>
    {% endif %}
    {% if photo.next_photo %}
        <a href="{% url 'event-photo' photo.next_photo.event.id photo.next_photo.id %}#display" class="next" id="next">Next</a>
   {% endif %}
</div>
<div class="grid_12">
    <ul class="info">
        <li><span class="fa fa-user"></span> <strong>{% trans 'Photographer' %}: </strong>{{ photo.photographer }}</li>
        <li><span class="fa fa-calendar-o"></span> <strong>{% trans 'Date' %}</strong> {{ photo.created_date }}</li>
    </ul>
    <p>{{ photo.description }}</p>
</div>
<p class="right">
    <strong>{% trans 'share on' %}:</strong>
    <a class="button" href="http://facebook.com/sharer.php?u=http%3A%2F%2Fwww.kasu.at{{photo.get_absolute_url|urlencode}}" target="_blank" rel="nofollow">
        <span class="fa fa-twitter"></span>Facebook
    </a>
    <a class="button" href="https://m.google.com/app/plus/x/?v=compose&amp;content={{photo.headline|urlencode}}+-+http%3A%2F%2Fwww.kasu.at/{{photo.get_absolute_url|urlencode}}" target="_blank" rel="nofollow">
        <span class="fa fa-google-plus"></span> Google+
    </a>
    <a class="button" href="https://twitter.com/share?url=http%3A%2F%2Fwww.kasu.at/{{photo.get_absolute_url|urlencode}}" target='_blank' rel="nofollow">
        <span class="fa fa-twitter"></span> Twitter
    </a>
</p>
{% endblock %}

{% block comment %}
  {% render_comment_list for photo %}
  {% render_comment_form for photo %}
{% endblock %}

{% block buttonbar %}
{% if perms.events.change_photo %}
    <form method="post" enctype="multipart/form-data" class="grid_12">
    {% csrf_token %}
      <p class="buttonbar">
 	  	<a href="{{ photo.image.url }}" class="button" type="application/octet-stream"><span class="fa fa-download"></span> {% trans 'download' %}</a>
 		<button type="submit" name="rotate" value="counter-clockwise"><span class="fa fa-undo"></span> {% trans 'Rotate counter clockwise' %}</button>
 		<button type="submit" name="rotate" value="clockwise"><span class="fa fa-repeat"></span> {% trans 'Rotate clockwise' %}</button>
 		<button type="submit"><span class="fa fa-check"></span> {% trans 'Save' %}</button>
	  </p>
    </form>
{% endif %}
{% endblock %}