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


{% block body %}
 <div class="v-page-heading v-bg-stylish v-bg-stylish-v1">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="heading-text">
                        <h1 class="entry-title">{{songs.name}} - {{songs.author}}</h1>
                    </div>

                    <ol class="breadcrumb">
                        <li><a href="/">Accueil</a></li>
                        <li class="active"><a href="{{ path('songs.index') }}">Chansons</a></li>
                            <li class="active">{{songs.name}} - {{songs.author}}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


<div class="v-page-wrap">

        <div class="container">
            <div class="row">
                <div class="col-sm-12">

                    <article class="portfolio-article">


                         <div class="v-portfolio-item-content clearfix">

                            <div class="row">

                                    <div class="col-sm-8 col-lg-offset-2">
                                        <figure class="media-wrap">
                                        <iframe width="560" height="315" src="https://www.youtube.com/embed/BO3C5B513ug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        </figure>
                                    </div>

                            </div>
                        </div>

                    

                        <div class="related-projects clearfix">

                            <h3 class="v-heading v-center-heading"><span>Couplet</span></h3>

                            <div class="row center">

                                <div class="col-sm-12">
                                     <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordVerse1}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">1 : {{songs.chordVerse1Name}}</h5></span>

                                    </div>

                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordVerse2}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">2 : {{songs.chordVerse2Name}}</h5></span>

                                    </div>

                                     <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordVerse3}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">3 : {{songs.chordVerse3Name}}</h5></span>

                                    </div>

                                     <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordVerse4}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">4 : {{songs.chordVerse4Name}}</h5></span>

                                    </div>

                                     <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordVerse5}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">5 : {{songs.chordVerse5Name}}</h5></span>

                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>

                        <div class="related-projects clearfix">

                            <h3 class="v-heading v-center-heading"><span>Refrain</span></h3>

                            <div class="row center">

                                <div class="col-sm-12">
                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus1}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">1 : {{songs.chordChorus1Name}}</h5></span>

                                    </div>

                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus2}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">2 : {{songs.chordChorus2Name}}</h5></span>

                                    </div>

                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus3}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">3 : {{songs.chordChorus3Name}}</h5></span>

                                    </div>

                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus4}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">4 : {{songs.chordChorus4Name}}</h5></span>

                                    </div>



                                     <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus5}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">5 : {{songs.chordChorus5Name}}</h5></span>

                                    </div>

                                    <div class="col-sm-3">

                                        <img src="assets/img/accords/{{songs.chordChorus6}}" style="height: 190px;" />
                                        <span><h5 style="text-align: center;">6 : {{songs.chordChorus6Name}}</h5></span>

                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>

                        <div class="container">
                            <div class="v-spacer col-sm-12 v-height-big"></div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

{% endblock %}