{% load cms_tags menu_tags staticfiles sekizai_tags %}
{% if instance.child_plugin_instances %}
  {% addtoblock "css" %}<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>{% endaddtoblock %}
  {% addtoblock "css" %}<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>{% endaddtoblock %}
  {% addtoblock "css" %}<link rel="stylesheet" href="{% static "ripiu/cmsplugin_rototalc/css/carousel.css" %}"?v=0.0.1>{% endaddtoblock %}
  {% addtoblock "js" %}<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>{% endaddtoblock %}
  {% addtoblock "js" %}<script>$(document).ready(function(){$('.ripiu.rototalc > .main').slick();});</script>{% endaddtoblock %}
  <section class="ripiu rototalc carousel">
    {% if instance.title or instance.subtitle %}
      <header>
        {% if instance.title %}
          <h{{ instance.heading_level }}>{{ instance.title }}</h{{ instance.heading_level }}>
        {% endif %}
        {% if instance.subtitle %}
          <p class="subtitle">
            {{ instance.subtitle}}
          </p>
        {% endif %}
      </header>
    {% endif %}
    <div class="main" data-slick='{{ conf }}'>
      {% for plugin in instance.child_plugin_instances %}
        {% render_plugin plugin %}
      {% endfor %}
    </div>
  </section>
{% endif %}