{% 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-4 text-center">
                <a href="{{ path('kontzertua') }}" class="btn btn-info"><i class="fas fa-file-alt"></i> KONTZERTUEN ZERRENDA</a>
            </div>
            <div class="col-5">
                <h5 class="text-info">Kontzertuaren abestiak: </h5>
                    <select class="form-select" onchange="window.location.replace('../'+this.value+'/ikusibideoa');">
                        {% for aukera in abestias %}
                            {% if aukera.DVDtrack %}
                                <option value="{{aukera.idAbestia}}" {% if aukera.idAbestia == abestia.idAbestia %} selected {% endif %}>
                                    {{aukera.taldea}} - {{aukera.izenburua}}
                                </option>
                            {% endif %}
                        {% endfor %}
                </select>
            </div>
        </div>
        <br>
    </div>

    <div class="container">
        <h2 class="text-danger text-center">{{abestia.kontzertua.kontzertuarenIzena}}</h2>
    <h3 class="text-info text-center">({{abestia.idAbestia}}) {{abestia.taldea}} - {{ abestia.izenburuaFile  }} {% if abestia.egilea %}({{abestia.egilea}}){% endif %}</h2>
        <br><center><video class="text-center" src="{{asset('/multimedia/' ~ abestia.kontzertua.dvdUrl ~ '/' ~ (abestia.DVDtrack < 10 ? '0':'') ~ abestia.DVDtrack ~ '_' ~ abestia.izenburuaFile ~ '.' ~ abestia.kontzertua.bideoFormato )}}" autoplay width="960" controls></video></center>
        <h6 class="text-danger text-success">{{abestia.bakarlariak}}</h6>


        {#asset('multimedia/07.mp4')#}
    </div>
{% endblock %}


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