{% 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 }}" />
{% endblock social_share %}

{% block blog_content %}
    {% 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 %}
            <article class="box page-content blog_grid">
                <section>
                    {% if entry.header_image %}
                        <span class="img-responsive"><a href="{{ post_url }}">
                            {% image entry.header_image fill-800x240 as header_image %}
                            <img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
                        </a></span>
                    {% endif %}
                    <!--{% include 'puput/entry_links.html' %}-->
                </section>
                <section class="article">
                    <h4><a href="{{ post_url }}">{{ entry.title }}</a></h4>
                    {% if entry.excerpt %}
                        {{ entry.excerpt|richtext }}
                    {% else %}
                        {{ entry.body|richtext|truncatewords_html:70 }}
                    {% endif %}
                    <div class="row">
                        <ul class="social-share col-md-9">
                            <li class="social-item">
                               {% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
                            </li>
                            <li class="social-item">
                                {% post_to_twitter entry.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
                            </li>
                            <li class="social-item">
                                {% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
                            </li>
                            <li class="social-item">
                                {% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
                            </li>
                        </ul>
                        <div class="col-md-3">
                            <a class="blog_btn continue" href="{{ post_url }}">/{{ entry.slug|truncatechars:25 }} &raquo;</a>
                        </div>
                    </div>
                </section>
            </article>
        {% empty %}
            <span>{% trans 'No results found.' %}</span>
        {% endfor %}

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