{% extends "aldryn_bootstrap3/plugins/carousel/base.html" %}
{% load i18n cms_tags %}

{% block content_carousel %}
{% with carousel=instance %}
{# INFO: indicators #}
<ol class="carousel-indicators">
    {% for slide in slides %}
        <li data-target="#js-carousel-id-{{ instance.pk }}" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}></li>
    {% endfor %}
</ol>

{# Wrapper for slides #}
<div class="carousel-inner" role="listbox">
    {% for plugin in instance.child_plugin_instances %}
        {% render_plugin plugin %}
    {% endfor %}
</div>

{# INFO: controls #}
<a class="left carousel-control" href="#js-carousel-id-{{ instance.pk }}" role="button" data-slide="prev">
    <span class="fa fa-chevron-left glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">{% trans "Previous" %}</span>
</a>
<a class="right carousel-control" href="#js-carousel-id-{{ instance.pk }}" role="button" data-slide="next">
    <span class="fa fa-chevron-right glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">{% trans "Next" %}</span>
</a>
{% endwith %}
{% endblock content_carousel %}
