{% 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="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;">1 : {{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;">1 : {{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;">1 : {{songs.chordChorus4Name}}</h5></span>

                                    </div>
                                    
                                </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.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;">1 : {{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;">1 : {{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;">1 : {{songs.chordChorus4Name}}</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 %}