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

{% block title 'Chansons' %}

{% block body %}

    <div id="container">
        <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">Chansons</h1>
                        </div>

                        <ol class="breadcrumb">
                            <li><a href="/">Accueil</a></li>
                            <li class="active">Chansons</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="v-page-wrap has-right-sidebar has-one-sidebar">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="v-portfolio-wrap">
                
                            <div class="v-portfolio-filter-wrap row clearfix">
                                <ul class=" v-portfolio-filter-nav bar-styling filtering col-sm-12 clearfix">

                                    <li class="all selected"><a data-filter="*" href="#"><span class="item-name">Tous</span><span class="item-count">0</span></a>
                                    </li>

                                    <li><a href="#" class="{{musicStyle[3]}}" data-filter=".Rock"><span class="item-name">{{musicStyle[0]}}</span><span class="item-count">0</span></a></li>
                                    
                                    <li><a href="#" class="{{musicStyle[1]}}" data-filter=".Rap"><span class="item-name">{{musicStyle[1]}}</span><span class="item-count">0</span></a></li>

                                    <li><a href="#" class="{{musicStyle[2]}}" data-filter=".Pop"><span class="item-name">{{musicStyle[2]}}</span><span class="item-count">0</span></a></li>

                                    <li><a href="#" class="{{musicStyle[3]}}" data-filter=".Chanson-française"><span class="item-name">{{musicStyle[3]}}</span><span class="item-count">0</span></a></li>

                                    <li><a href="#" class="{{musicStyle[4]}}" data-filter=".Pop-Rock"><span class="item-name">{{musicStyle[4]}}</span><span class="item-count">0</span></a></li>

                                </ul>
                            </div>    
                                
                            {# TODO : on rend le clique sur la chanson possible seulement si le nombre d'accords (chorus/verse) est renseigné #}

                            {# <p style="color: red;"> Les fiches de chanson ne sont pas disponible pour le moment (site en maintenance) </p> #}

                            <ul class="-portfolio-items masonry-items masonry-fw filterable-items row clearfix">
                            {% for song in songs %}
                        
                                <li class="clearfix v-portfolio-item col-sm-3 masonry-item masonry-gallery-item {{song.musicStyle}}">
                                    <div class="v-portfolio-item-info">

                                        <h3 class="v-portfolio-item-title">
                                            {# <p>{{ song.nbChordsVerse }} {{ song.nbChordsChorus }}</p> #}
                                            {% if song.nbChordsChorus is same as 0 %}
                                                <div>
                                                    <p class="link-to-post link-to-details" >{{song.name}} - {{song.author}} </p>

                                                    <p style="background-color: rgb(202, 200, 200);">(fiche de chanson pas disponible pour le moment)</p>
                                                </div>
                                            {% else %}
                                                <a href="{{ path('chanson', {id:song.id}) }}" class="link-to-post">
                                                {{song.name}} - {{song.author}}</a>
                                                {# <a href="#" class="link-to-post">
                                                {{song.name}} - {{song.author}}</a> #}
                                                
                                            {% endif %}
                                            
                                        </h3>
                                        <h5 class="v-portfolio-subtitle">{{song.musicStyle}}</h5>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}