{% extends 'base.html.twig' %}

{% block body %}
    <div class="container-fluid">
        {#----------------------------HEAD------------------------------------------#}
        <div class="row">
            <div class="col-3">
                <h1 class="text-primary">Kontzertuak</b></h1>
            </div>
            <div class="col-6 text-center">
            </div>
            <div class="col-3 text-right">
                <a href="{{ path('kontzertuenzerrenda') }}" class="btn btn-info"><i class="fas fa-file-alt"></i> KONTZERTUEN ZERRENDA</a>
            </div>

        </div>
        <br>
        {#----------------------------DATUAK------------------------------------------#}
        <div id="carouselIndicators" class="carousel carousel-fade slide" data-bs-ride="carousel" style="height: 80vh">
            <ol class="carousel-indicators">
                <li data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active"></li>
                {% for i in 1..argazkias|length -1 %}
                    <li data-bs-target="#carouselIndicators" data-bs-slide-to="{{i}}"></li>
                {% endfor %}
            </ol>
            <div class="carousel-inner bg-dark">
                <center>
                    {% for argazkia in argazkias %}
                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                            <img class="d-block" src="{{asset(ruta ~ '/' ~ argazkia)}}" style="height: 80vh">
                            <div class="carousel-caption d-none d-md-block">
                                <p>{{argazkia}}</p>
                            </div>
                        </div>
                    {% endfor %}
                </center>
            </div>
            <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-bs-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="#carouselIndicators" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>








    </div>
{% endblock %}


{% block javascripts %}
    <script src="{{ asset('js/multimedia/multimedia.js')}}"></script>
{% endblock %}