{% extends "layout.html" %}
{% load category_tags %}
{% load wagtailcore_tags wagtailimages_tags ocyanjson ocyan_oscar %}
{% load static %}
{% load i18n %}
{% load product_tags %}
{% block description %}{{ page.meta_description }}{% endblock %}
{% block keywords %}{% if page.meta_keywords %}<meta name="keywords" content="{{ page.meta_keywords }}" />{% endif %}{% endblock %}
{% block title %}{{ page.title }} | {{ block.super }}{% endblock %}
{% block header %}{% 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_wrapper %}
{% block content %}
{% with new_products=page.new_products slider=page.slider promoted_pages=page.promoted_pages services=page.services collection=page.collection bottom_slider=page.bottom_slider%}

    {% if slider %}
    <div class="container-fluid p-0">
        <div class="owl-carousel owl-theme category-carousel">
            {% for slide in slider %}
                {% with slide.value.content as category %}
                <div class="item">
                    <a href="{{ category.get_absolute_url }}">
                        <div class="item-img owl-lazy" data-src="{{ slide.value.image.file.url }}"></div>
                        <div class="category-title">
                            {{category.name}}
                        </div>
                    </a>
                </div>
                {% endwith %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if promoted_pages %}
    <section class="my-5">
            <div class="container">
                <div class="row align-items-center row-eq-height">
                    {% for promoted_page in promoted_pages %}
                    <div class="col-lg-6 col-md-12 col-sm-12 mb-2">
                        <a href="{% pageurl promoted_page.value.page %}" class="info-block">
                            {% image promoted_page.value.image fill-550x200 %}
                            <h4>{{ promoted_page.value.titel }}</h4>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
    </section>
    {% endif %}

    <section>
        <div class="container">
            {{ page.body|richtext }}
        </div>
    </section>

    <section class="my-5" id="collections">
        <div class="container">
            <div class="row">
                <div class="col-md-6 collection">
                    <div class="wrapper after-primary">
                        <a href="{{ page.collection_1_category.get_absolute_url }}">
                            {% image page.collection_1_image width-720 class="img-fluid" %}
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row ">
                        <div class="col-md-6 collection">
                            <div class="wrapper after-primary">
                                <a href="{{ page.collection_2_category.get_absolute_url }}">
                                    {% image page.collection_2_image width-720 class="img-fluid" %}
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 collection">
                            <div class="wrapper after-primary">
                                <a href="{{ page.collection_3_category.get_absolute_url }}">
                                    {% image page.collection_3_image width-720 class="img-fluid" %}
                                </a>
                            </div>
                        </div>
                        <div class="col-md-12 collection" style="padding-top: 30px;">
                            <div class="wrapper after-primary">
                                <a href="{{ page.collection_4_category.get_absolute_url }}">
                                    {% image page.collection_4_image width-720 class="img-fluid" %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% if new_products %}
    <section class="my-5">
        <div class="container-fluid">
            <div class="home-carousel-wrapper row">
                <h3 class="text-center d-block w-100 py-4">Nieuwe producten</h3>
                <div class="owl-carousel owl-theme home-carousel">
                {% for product in new_products %}
                    {% if product.value %}
                    <div class="item">{% render_product product.value %}</div>
                    {% endif %}
                {% endfor %}
                </div>
                <a class="btn btn-primary d-block mx-auto mb-5 px-5 py-2 shadow" href="{% url 'catalogue:index' %}">{% trans 'View more' %}</a>
            </div>
        </div>
    </section>
    {% endif %}

    {% if services %}
        <section id="usp" class="my-5">
            <div class="container">
                <div class="row align-items-center row-eq-height">
                    {% for service in services %}
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                        <div class="usp bg-primary shadow">
                            <div class="row align-items-center">
                                <div class="col-sm-3 text-center text-white">
                                    <i class="fal {{ service.value.icon }}"></i>
                                </div>
                                <div class="col-sm-9 text-white">
                                    <h5>{{ service.value.title }}</h5>
                                    {{ service.value.content|richtext }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {% if bottom_slider %}
    <section class="my-5">
        <div class="container">
            <div class="owl-carousel owl-theme simple-carousel">
                {% for slide in bottom_slider %}
                <div class="item">
                    {% image slide.value.image height-300 class="img-fluid" %}
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

{% endwith %}
{% endblock %}
{% endblock %}