{% extends "layout_2_col.html" %}
{% load category_tags %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}
{% load i18n %}
{% load product_tags ocyanjson ocyan_oscar %}
{% block title %}{{ page.title }} | {{ block.super }}{% endblock %}
{% block header %}{% endblock %}
{% block description %}{{ page.meta_description }}{% endblock %}
{% block keywords %}{% if page.meta_keywords %}<meta name="keywords" content="{{ page.meta_keywords }}" />{% endif %}{% endblock %}

{% block extrahead %}
{% if page.title %}
    <meta name="twitter:title" content="{{ page.seo_title }} - {{request.site.site_name}}" />
    <meta property="og:title" content="{{ page.seo_title }} - {{ request.site.site_name }}" />
{% endif %}

{% if page.meta_description %}
    <meta name="twitter:description" content="{{ page.meta_description }}" />
    <meta property="og:description" content="{{ page.meta_description }}" />
{% endif %}

<meta property="og:type" content="Home page" />

{% if request.build_absolute_uri %}<meta property="og:url" content="{{request.build_absolute_uri}}" />{% endif %}

{% if request.site.site_name %}<meta property="og:site_name" content="{{ request.site.site_name }}" />{% endif %}

{{ block.super }}
{% endblock %}

{% block content %}
{% with new_products=page.new_products slider=page.slider %}

<div class="revolver" data-settings='{"responsive": {"xs": 1, "sm": 1, "md": 1, "lg": 1}}'>
    {% for slide in slider %}
        <div class="slide">
            {% image slide.value.image width-1140 class="img-responsive" %}
        </div>
    {% endfor %}
</div>

{{ page.body|richtext }}

{% if new_products %}
    <div class="row products">
        {% for product in new_products %}
            {% if product.value %}
            <div class="col-xs-12 col-sm-6 col-md-4">
                {% render_product product.value %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}
{% endwith %}

{% endblock %}
{% block column_left %}
    {% category_tree as tree_categories %}
    {% ocyanjson "theme" "category_navigation_depth" 1 as category_navigation_depth %}
    {% category_tree as tree_categories %}
    {% if tree_categories %}
        <h3>{% trans "Categories" %}</h3>
        <div class="side_categories">
            <ul class="nav nav-list">
                {% for tree_category, info in tree_categories %}
                    {% if info.level < category_navigation_depth or tree_category|is_selected:category %}
                    <li>
                        <a href="{{ tree_category.get_absolute_url }}">
                            {% if tree_category.pk == category.pk %}
                                <strong>{{ tree_category.name }}</strong>
                            {% else %}
                                {{ tree_category.name }}
                            {% endif %}
                        </a>
                        {% endif %}
                        {% if info.has_children %}
                            <ul>{% else %}</li>{% endif %}
                        {% for n in info.num_to_close %}
                            </ul></li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    <div class="well upsell-messages">
        <h2>{{ shop_name }}</h2>
        <ul>
            <li>Originele onderdelen</li>
            <li>Levering binnen 5 werkdagen</li>
            <li>Betalen via iDEAL</li>
        </ul>
    </div>
{% endblock %}