{% extends "puput/base.html" %}

{% load static i18n wagtailcore_tags wagtailimages_tags puput_tags social_share %}

{% block title %}
    {% if search_term %}
        {{ search_term }} | {{ blog_page.title }}
    {% else %}
        {{ block.super }}
    {% endif %}
{% endblock title %}

{% block social_share %}
    {% image blog_page.header_image fill-800x450 as share_image %}
    <meta property="og:title" content="{{ blog_page.title }}" />
    <meta property="og:description" content="{{ blog_page.description }}" />
    <meta property="og:url" content="{% canonical_url %}" />
    {% if blog_page.header_image %}
        <meta property="og:image" content="{% image_url share_image.url %}" />
        <meta property="og:image:width" content="800" />
        <meta property="og:image:height" content="450" />
        <meta name="twitter:image" content="{% image_url share_image.url %}" />
    {% endif %}
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ blog_page.title }}" />
    <meta name="twitter:description" content="{{ blog_page.description }}" />

	<link rel="alternate" type="application/rss+xml"
	  title="{{ blog_page.title }}" href="{% feeds_url blog_page %}">

{% endblock social_share %}

{% block blog_content %}
<section id="blog">
	<div class="container">
	<div class="row">

    {% with per_page=blog_page.num_entries_page %}
        {# 'paginate' tag cannot render dotted variables, so we need to create a context var #}
        {% paginate per_page entries %}
        {% if search_term %}
            <div class="searchTerm">{{ search_term }}</div>
        {% endif %}
        {% for entry in entries %}
            {% entry_url entry blog_page as post_url %}
            {% if forloop.counter == 1 %}
                {% for category in entry.categories.all %}
                    {% if search_term|slugify == category.name|slugify %}
                        <div class="searchDescription">
                            {{ category.description }}
                        </div>
                    {% endif %}
                {% endfor  %}
            {% endif %}
			{% if forloop.counter0|divisibleby:3 %}
				</div><div class="row">
			{% endif %}

			<!-- Blog post {{ entry.id }} -->
			<div class="col-md-4 blog-entry">
				<a href="{{ post_url }}">
				<div class="panel panel-default">
					{% if entry.header_image %}
						{% image entry.header_image fill-360x270 %}
					{% endif %}
					<div class="panel-body">
						{% for category in entry.categories.all %}
							<div class="entry-category">{{ category.name }}</div>
		                {% endfor  %}

						<h3 class="entry-title">{{ entry.title }}</h3>

						<p>
						{% if entry.excerpt %}
							{{ entry.excerpt|safe }}
						{% else %}
							{{ entry.body|striptags|truncatewords_html:40 }}
						{% endif %}
						</p>

						<span class="entry-meta">
							{{ entry.date|date:"d.m.Y" }}
						</span>
					</div><!-- -/panel-body -->
				</div><!-- -/panel -->
				</a>
			</div><!-- /blog-entry -->
        {% empty %}
            <span>{% trans 'No results found.' %}</span>
        {% endfor %}

        <div class="pagination">
            {% show_paginator %}
        </div>

		<div class="rss-sitemap">
			<a href="{% feeds_url blog_page %}" target="_blank" title="RSS">
				 <i class="fa fa-rss-square"></i> <span>RSS</span>
			</a>
		</div>
    {% endwith %}

</div><!-- /row -->
</div><!-- /container -->
</section>
{% endblock blog_content %}