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

{% load static i18n wagtailcore_tags wagtailimages_tags puput_tags %}

{% block title %}{% if search_term %}{{ search_term }} | {{ blog_page.title }}{% else %}{{ block.super }}{% endif %}{% endblock title %}
{% block meta_title %}{% if search_term %}{% trans 'Entries for' %} {{ search_type }} {{ search_term }}{% else %}{{ block.super }}{% endif %}{% endblock meta_title %}
{% block meta_description %}{% if search_term %}{% trans 'Entries for' %} {{ search_type }} {{ search_term }}{% else %}{{ block.super }}{% endif %}{% endblock meta_description %}
{% 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 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">{% trans 'Entries for' %} {{ search_type }} "{{ search_term }}"</div>
        {% endif %}
        {% for entry in entries %}
            <article class="box page-content blog_grid">
                {% include 'puput/entry_page_header.html' %}
                {% if entry.header_image %}
                    <section>
                        <span class="img-responsive">
                            {% image entry.header_image fill-800x240 as header_image %}
                            <img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
                        </span>
                    </section>
                {% endif %}
                <section class="article">
                    {% if entry.excerpt %}
                        {{ entry.excerpt|richtext }}
                    {% else %}
                        {{ entry.body|richtext|truncatewords_html:70 }}
                    {% endif %}
                    <a class="blog_btn continue" href="{% entry_url entry blog_page %}">{% trans 'Continue reading' %} &raquo;</a>
                </section>
            </article>
        {% empty %}
            <span>{% trans 'No results found.' %}</span>
        {% endfor %}
        <div class="pagination">
            {% show_paginator %}
        </div>
    {% endwith %}
{% endblock content %}
