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

{% block title %}{{ event.name }}{% endblock %}

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

{% block extra_head %}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css" media="screen and (min-width: 701px)">#teaser{background-image:url('{{ event.get_callout.url }}')}</style>
<!--[if lt IE 9]><style type="text/css" media="screen">#teaser{background-image:url("{{event.get_callout.url}}")}</style><![endif]-->
{% endblock %}

{% block maincontent %}
<div class="grid_8" id="teaser">
{% if event.description %}
  <div id="teaser_text">
  <h2>{{event.name}}</h2>
  {{event.description|markdown}}
  </div>
{% else %}
  <div id="teaser_text">
  <h2>{{event.name}}</h2>
  {{event.location.description|markdown}}
  </div>
{% endif %}
</div>
<div class="grid_4 red_box" id="map_canvas" style="width:300px; height:300px;"></div>

<div class="grid_4">
<h3>{% trans "Date" %}</h3>
  <p></p>
  <ul>
  <li><strong>{% trans "Start" %}:</strong> {{ event.start }}</li>
  {% if event.end %}<li><strong>{% trans "End" %}:</strong> {{ event.end }}</li>{% endif %}
  {% if event.url %}<li><strong>{% trans "Homepage" %}:</strong> <a href="{{ event.url }}">{{ event.url }}</a></li>{% endif %}
  </ul>
</div>

<div class="grid_4">
  <h3>{% trans 'Location' %}</h3>
  <strong>{{ event.location.name }}</strong>
  <address>
  {{event.location.street_address}}<br />
  {{event.location.postal_code}} {{event.location.locality}} <br />
  {{event.location.get_country_display}}
  </address>
  {% if event.location.url %}
  <p><strong>{% trans "Homepage" %}:</strong> <a href="{{ event.location.url }}">{{ event.location.url }}</a></p>
  {% endif %}
</div>

<div class="grid_4 center">
  <ul class="info">
   <li><img src="{{ STATIC_URL }}icons/table.png" alt="{% trans 'Hanchans' %}" /><a href="{% url 'event-hanchan-list' event.pk %}" >{{ event.hanchan_set.count }} {% trans "Hanchans" %}</a></li>
   <li><img src="{{ STATIC_URL }}icons/camera.png" alt="{% trans 'Photos' %}" /><a href="{% url 'event-photo-list' event.pk %}">{{ event.photo_count }} {% trans 'Photos' %}</a></li>
  </ul>
  <a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.kasu.at{{event.get_absolute_url|urlencode}}" onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="{{STATIC_URL}}img/google_plus.png" alt="Google+" title="{% trans 'Share on Google+'%}" width="39" height="39"/></a>
  <a href="https://twitter.com/share?url=http%3A%2F%2Fwww.kasu.at{{event.get_absolute_url|urlencode}}" target='_blank'><img src="{{STATIC_URL}}img/twitter.png" alt="Twitter" title=" {% trans 'Share on Twitter' %}"  width="39" height="39"/></a>
  <a href="http://facebook.com/sharer.php?u=http%3A%2F%2Fwww.kasu.at{{event.get_absolute_url|urlencode}}" target="_blank"><img src="{{STATIC_URL}}img/facebook.png" alt="Facebook" title="{% trans 'Share on Facebook'%}" width="39" height="39"/></a>
  <a href="http://maps.google.com/maps?q={{event.location.address|urlencode}}&z=16" target="gmaps"><img src="{{ STATIC_URL }}img/google_maps.png" alt="Google Maps" title="{% trans 'Show on Google Maps' %}"  width="39" height="39"/></a>
</div>
<br class="clear" />
{% render_comment_list for event %}
{% render_comment_form for event %}
{% endblock %}

{% block buttonbar %}
 {% if perms.events.change_event %}
  <a class="button" href="{{ event.get_edit_url }}"><img src="{{ STATIC_URL }}icons/page_edit.png" alt="" /> {% trans "Edit Event" %}</a>
 {% endif %}
{% endblock %}

{% block javascript %}
  var geocoder;
  var map;
  function codeAddress() {
    var address = "{{ event.location.address }}";
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    codeAddress();
  }
  initialize();
  {% endblock %}