{% extends "layout.html" %}
{% load category_tags %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}
{% load i18n %}
{% load product_tags %}
{% 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="row">
    <div class="col-md-12 hidden-xs hidden-sm">
        <div id="biza-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for slide in slider %}
                    <div class="item slide {% if forloop.first %} active {% endif %}">
                        {% image slide.value.image width-1140 class="img-responsive" %}
                        {% if slide.value.text %}
                        <div class="title">{{ slide.value.text|linebreaks }}</div>
                        {% endif %}
                        {% with link=slide.value.link %}
                            {% if link %}<a href="{% pageurl link %}" class="btn" >{{ slide.value.link_text }}</a>
                            {% else %}<p class="btntext">{{ slide.value.link_text }}</p>{% endif %}
                        {% endwith %}
                    </div>
                {% endfor %}
            </div>
            <a class="carousel-control left" href="#biza-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#biza-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
    </div>
    </div>
</div>

<section>
    <div class="category-items">
        <div class="row">
            <div class="col-lg-3">
                <h2>Categorie Producten</h2>
            </div>
            <div class="col-lg-9 hidden-xs">
                <ul class="category-slide">
                {% category_tree depth=1 as tree_categories %}
                {% if tree_categories %}
                    {% for tree_category, info in tree_categories|slice:":5" %}
                        {% if info.has_children %}
                            <li class="dropdown-submenu">
                                <a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a>
                                <ul class="dropdown-menu">
                                {% else %}
                                    <li><a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a></li>
                                {% endif %}

                                {% for close in info.num_to_close %}
                                    </ul></li>
                                {% endfor %}
                    {% endfor %}
                {% endif %}
                </ul>
            </div>
        </div>

        <hr>
    </div>
</section>

{% if new_products %}
    <section>
        <div class="revolver no-bullets" data-settings='{"responsive": {"xs": 2, "sm": 3, "md": 4, "lg": 5}}'>
            {% for product in new_products %}
                {% if product.value %}
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{% render_product product.value %}</div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
{% endif %}

<section>
    <div class="row">
        <div class="col-lg-8">
            <h2>Recente blogs</h2>
            <hr>
            <div class="revolver no-bullets" data-settings='{"responsive": {"xs": 1, "sm": 2, "md": 2, "lg": 2}}'>
                {% for blog in blogs %}
                <div class="slide blog-item">
                    {% image blog.lead_image fill-370x280 class="img-responsive" %}
                    <div class="desc">
                        <h3>{{ blog.title }}</h3>
                        {{ blog.intro|richtext }}
                        <a href="{% pageurl blog %}">{% trans "Read more" %} <i class="icon-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<section>
    <div class="row">
        <div class="col-md-12">
            {% image page.banner_image width-1140 class="img-responsive" %}
        </div>
    </div>
</section>


{{ page.body|richtext }}

{% endwith %}
{% endblock %}