{% load thumbnail %}
{% load static %}

<!--================================= banner -->
<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for slide in slides %}
            <div class="carousel-item {% if forloop.first %} active{% endif %}"
                 data-interval="{{ slide.get_delay_as_msec }}">

                <img src="{{ slide.image.slide.url }}" class="d-block w-100" alt="{{ slide.title }}">

                <div class="carousel-caption d-none d-md-block">
                    <h1>{{ slide.title }}</h1>
                    <h3>{{ slide.subtitle }}</h3>
                    <p>{{ slide.description }}</p>
                    {% if slide.button_label %}
                        <a class="btn btn-primary"
                           href="{{ slide.button_link }}" target="_self"
                           id="slide-{{ slide.id }}-layer-5">{{ slide.button_label }} </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    <ol class="carousel-indicators">
        {% for slide in slides %}
            <li data-target="#carousel"
                data-slide-to="{{ forloop.counter0 }}"
                {% if forloop.first %}class="active"{% endif %}></li>
        {% endfor %}
    </ol>

    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!--  banner =================================-->