{% extends 'base.html' %}
{% load cms_tags thumbnail %}

{% block title %}TPDS HOME{% endblock %}
{% block bodyclass %}home{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}bower/owl.carousel/dist/assets/owl.carousel.min.css" />
{% endblock%}
{% block header_background %}
<div class="header_wrapper">
    <div class="header_line container"><div class="left"></div></div>
</div>
{% endblock %}

{% block greeting %}
    {% placeholder "greeting" or %}
        {% show_placeholder "greeting" "greeting" %}
    {% endplaceholder %}
{% endblock %}

{% block content %}
<div id="content">
    <div class="video_wrapper">
    <div class="row video">
        <div class="col-6 pl-0">
            <div class="video_container" data-video="//www.youtube.com/embed/wYD4LdXFE74?autoplay=1&&rel=0" style="background-image: url('/static/img/TPDS-video-placeholder.jpg');">
                <div class="video-view"></div>
            </div>
        </div>
        <div class="col-6 pr-0 my-auto">
            <h2>STRONGEST CUSTOMIZEABLE RACKING SYSTEM</h2>
            <a href="#" class="play"><i></i> Play Video</a>
        </div>
    </div>
    </div>

    <div class="portfolio">
        <h2>TRUSTED BY MANY</h2>
    </div>

    <div class="row mr-2 portfolio-list owl-carousel owl-theme">
        {% for portfolio in portfolios %}
        <a href="{% if request.user.is_authenticated %}{{ portfolio.get_absolute_url }}{% endif %}" class="list item {% if request.user.is_authenticated %}active{% endif %}">
            <img src="{{ portfolio.brand.url }}" class="logo" />
            {% thumbnail portfolio.banner "194x194" crop="center" as image %}
                <img src="{{ image.url }}"/>
            {% endthumbnail %}
        </a>
        {% endfor %}
    </div>

    <div class="portfolio">
        <a href="{% url 'website:portfolio' %}{% if request.user.is_authenticated %}?page=sales{% endif %}" class="button">View More<i></i></a>
    </div>

    <div class="portfolio">
        <h2>WE USE THE BEST IN THE INDUSTRY</h2>
    </div>

    <div class="container industry reverse">
        <div class="row list">
            {% for vendor in vendors %}
            <div class="col-3">
                <a href="{{ vendor.get_absolute_url }}">
                    <img src="{{ vendor.image.url }}"/>

                    <div class="button text_wrapper"><div class="box"><span>View Details</span><i></i></div></div>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ STATIC_URL }}bower/owl.carousel/dist/owl.carousel.min.js"></script>
    <script>
    $(document).ready(function () {
        $(document).on('click', '.video_container, .play', function(event){
            var video_container = $(this).closest('.video').find('.video_container');
            var embed = '<iframe src="'+ video_container.attr('data-video') +'" width="100%" height="281" style="display: block;" allowfullscreen="allowfullscreen"></iframe>';
            video_container.find('.video-view').replaceWith(embed);

        });
    });

    var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:4,
        loop:true,
        margin:20,
        nav:true,
        responsiveClass:true,
        autoplay:true,
        autoplayTimeout:2500,
        autoplayHoverPause:true
    });

    if($(window).width() < 768) {
        $('.owl-carousel').data('owl.carousel').options.items = 2;
        $('.owl-carousel').data('owl.carousel').options.margin = 10;
        $('.owl-carousel').trigger( 'refresh.owl.carousel' );
    }

    $(window).resize(function() {
        if($(window).width() > 768) {
            $('.owl-carousel').data('owl.carousel').options.items = 4;
        $('.owl-carousel').data('owl.carousel').options.margin = 20;
            $('.owl-carousel').trigger( 'refresh.owl.carousel' );
        }
        else {
            $('.owl-carousel').data('owl.carousel').options.items = 2;
            $('.owl-carousel').data('owl.carousel').options.margin = 10;
            $('.owl-carousel').trigger( 'refresh.owl.carousel' );
        }
    });
    </script>
{% endblock %}