{% extends "website/base.html" %}
{% load cms_tags %}

{% block title %}STAX - Home{% endblock %}

{% block bodyclass %}home{% endblock %}
{% block triangle %}<img src="{{ STATIC_URL }}website/img/triangle.png" class="triangle" />{% endblock %}

{% block content %}
<div id="content">
    <div id='main-banner' class="{% if request.toolbar.edit_mode %} edit-mode {% endif %}">
    <div id="myCarousel" class="carousel slide {% if request.toolbar.edit_mode %} edit-mode {% endif %}" data-ride="carousel">
        <div class="carousel-inner">
            {% placeholder "home_banners" %}
        </div>
        <div class="main-banner-wrapper container">
        <ol class="carousel-indicators">
            {% for count in banner_count %}
                <li data-target="#myCarousel" data-slide-to="{{ count }}" class=""></li>
            {% endfor %}
        </ol>
        </div>
    </div>
    </div>
</div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        $(".carousel-inner .item:first-child").addClass("active");
        $(".carousel-indicators li:first-child").addClass("active");
    </script>
{% endblock %}