{% extends "base.html" %}
{% load static i18n wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags wagtailuserbar puput_tags %}

{% block body_class %}blog{% endblock %}

{% block extra_css %}
	<meta name="title"
		  content="{% block meta_title %}
						{% if blog_page.seo_title %}
							{{ blog_page.seo_title }}
						{% else %}
							{{ blog_page.title }}
						{% endif %}
				   {% endblock meta_title %}"/>
	<meta name="description"
		  content="{% block meta_description %}
						{{ blog_page.search_description }}
				   {% endblock meta_description %}"/>
	{% block social_share %}{% endblock social_share %}
	<link rel="canonical" href="{% block canonical %}{% canonical_url %}{% endblock canonical %}"/>
	<style>
		body {
			--main-color: {{blog_page.main_color}};
		}
		.content-page.blog-header {
			background-color: {{blog_page.main_color}};
		}
		.content-page.blog-header h1 a { color: white; }
		.blog-page section { background-color: transparent !important; }
		.container .page-content, .blog_grid { background: white; }
	</style>
	<link rel="stylesheet" href="{% static 'puput/css/puput.css' %}"/>
	<script src="{% static 'puput/js/puput.js' %}"></script>
{% endblock %}

{% block content %}
<div class="content-page blog-header">
	{% if blog_page.header_image %}
		<span class="image featured">
			{% image blog_page.header_image fill-1500x120 as header_image %}
			<img alt="{{ blog_page.header_image.title }}" src="{{ header_image.url }}">
		</span>
	{% endif %}
	<div class="container">
		<section class="{% if blog_page.header_image %}title-section-image{% else %}title-section{% endif %}">
			<h1 class="title-header">
				<a href="{% pageurl blog_page %}">{{ blog_page.title }}</a>
			</h1>
			{% if not blog_page.header_image %}
				<h2>{{ blog_page.description }}</h2>
			{% endif %}
		</section>
	</div>
</div>

<section class="content-page blog-page">
<div class="container container-blog">
    <div class="row">
        <div class="col-sm-8 col-md-9">
            {% block blog_content %}{% endblock blog_content %}
            {% block extra_content %}{% endblock extra_content %}
        </div>

        <div class="col-sm-4 col-md-3">
            <div class="blog_sidebar">
                <div class="rss-sitemap">
                    <a href="{% feeds_url blog_page %}" target="_blank" title="RSS">
                         <i class="fa fa-rss-square"></i> <span>{% trans 'Feed RSS' %}</span>
                    </a>
                </div>
                <form name="search_form" class="search_form" method="get" action="{% routablepageurl blog_page 'entries_search' %}">
                    <div class="input-group">
                         <input type="search" name="q" placeholder="{% trans 'Search' %}">
                         <span class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                         </span>
                    </div>
                </form>

                {% if blog_page.display_last_entries %}
                    <ul class="sidebar">
                        <h4>{% trans 'Last Entries' %}</h4>
                        {% recent_entries blog_page.num_last_entries %}
                    </ul>
                {% endif %}
                {% if blog_page.display_popular_entries %}
                    <ul class="sidebar">
                        <h4>{% trans 'Popular Entries' %}</h4>
                        {% popular_entries blog_page.num_popular_entries %}
                    </ul>
                {% endif %}
                {% if blog_page.display_categories %}
                    <ul class="sidebar">
                        <h4>{% trans 'Categories' %}</h4>
                        {% categories_list %}
                    </ul>
                {% endif %}
                {% if blog_page.display_tags %}
                    <ul class="sidebar">
                        <h4>{% trans 'Tags' %}</h4>
                        {% tags_list %}
                    </ul>
                {% endif %}
                {% if blog_page.display_archive %}
                    <ul class="sidebar widget menu">
                        <h4>{% trans 'Archive' %}</h4>
                        {% archives_list %}
                    </ul>
                {% endif %}
            </div>
        </div>
    </div>
</div>
</section>
{% endblock %}