{% load cms_tags %}
{% load sekizai_tags %}

{% addtoblock 'js' %}
  <script src="{{ STATIC_URL }}djangocms_owl/owl.carousel.js"></script>
{% endaddtoblock %}

{% addtoblock 'js' %}
  <script>
    $(document).ready(function() {
      var owl = $('#plugin-{{ instance.pk }} .slider');
      owl.owlCarousel({
        pagination: {{ instance.pagination|yesno:'true,false' }},
        paginationNumbers: {{ instance.pagination_numbers|yesno:'true,false' }},
        items: {{ instance.items }},
        navigation: {{ instance.navigation|yesno:'true,false' }},
        autoPlay: {{ instance.autoplay|yesno:'true,false' }},
        stopOnHover: {{ instance.stop_on_hover|yesno:'true,false' }},
        autoHeight: {{ instance.auto_height|yesno:'true,false' }},
        itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : false
      });
    });
  </script>
{% endaddtoblock %}

{% addtoblock 'css' %}
  <link rel="stylesheet" href="{{ STATIC_URL }}djangocms_owl/owl.carousel.css">
  <link rel="stylesheet" href="{{ STATIC_URL }}djangocms_owl/owl.theme.css">
{% endaddtoblock %}

<div class="owl-carousel-plugin plugin{% if style %} {{ style }}{% endif %}" id="plugin-{{ instance.pk }}">
  <div class="row">
    <div class="small-12 columns">
      <div class="slider">
        {% for plugin in instance.child_plugin_instances %}
          <div class="item">
            {% render_plugin plugin %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>