{% extends "base.html" %}
{% load i18n comments thumbnail %}

{% block title %}{{ article.headline }}{% endblock %}

{% block description %}{{article.content|striptags|truncatewords:16}}{% endblock %}

{% block opengraph %}
  <meta property="og:type" content="article" />
  <meta property="og:title" content="{{ article.headline|force_escape }}" />
  <meta property="og:url" content="http://www.kasu.at{{ article.get_absolute_url }}" />
  <meta property="og:image" content="http://www.kasu.at{{article.get_image|thumbnail_url:'article'}}" />
  <meta property="og:description" content="{{article.content|striptags|truncatewords:25|force_escape}}" />
  <link rel="image_src" type="image/jpeg" href="{{article.get_image|thumbnail_url:'article'}}" />
{% endblock %}

{% block itemscope %}itemscope itemtype="http://schema.org/Article"{% endblock %}

{% block teaser %}
<h1 itemprop="name">{{article.headline}}</h1>
<div id="teaser_text">
    <ul class="info">
        <li><span class="fa fa-user"></span> <strong>{% trans 'Author' %}:</strong> <a href="{% url 'membership-details' article.author %}" itemprop="author">{{article.author}}</a></li>
        <li><span class="fa fa-calendar-o"></span> <strong>{% trans 'Created on' %}: </strong><time datetime="{{article.date_created|date:'Y-m-d H:i'}}">{{ article.date_created|date:'DATE_FORMAT' }}</time></li>
        <li><span class="fa fa-tag"></span> <strong>{% trans "Category"%}: </strong><a href="{{ article.category.get_absolute_url }}" itemprop="articleSection">{{article.category.name}}</a></li>
    </ul>
</div>
{% endblock %}

{% block maincontent %}
<div itemprop="articleBody" class="grid_12">
    <img alt="{{article.category.name}}" src="{{article.get_image|thumbnail_url:'article'}}" class="posting_image" itemprop="image"/>
    {{ article.content }}
</div>
  <p class="right">
      <strong>{% trans 'share on' %}:</strong>
   <a class="button" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.kasu.at{{article.get_absolute_url|urlencode}}"
      onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="fa fa-google-plus"></span> Google+</a>
   <a class="button" href="https://twitter.com/share?url=http%3A%2F%2Fwww.kasu.at{{article.get_absolute_url|urlencode}}" target='_blank'><span class="fa fa-twitter"></span> Twitter</a>
   <a class="button" href="http://facebook.com/sharer.php?u=http%3A%2F%2Fwww.kasu.at{{article.get_absolute_url|urlencode}}?t={{article.headline|urlencode}}" target="_blank"><span class="fa fa-facebook"></span> Facebook</a>
  </p>
{% endblock %}

{% block comments%}
 {% render_comment_list for article %}
 {% render_comment_form for article %}
{% endblock %}

{% block buttonbar %}
 {% if perms.content.change_article %}
  <a href="{% url 'edit-article' article.id %}" class="button"><span class="fa fa-pencil"></span> {% trans "Edit Article" %}</a>
 {% endif %}
{% endblock %}