{% 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">{{song.name}}
							-
							{{song.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">{{song.name}}
							-
							{{song.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">

						{% if song.linkVideo is not null and song.linkVideo is not empty %}
							<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="{{song.linkVideo}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

											</figure>
										</div> 
								</div>
							</div>
						{% endif %}

						<div class="related-projects clearfix">
							<h3 class="v-heading v-center-heading">
								{% if song.nbChordsVerse > 0 %}
								<span>Refrain</span>
								{% else %}
									<span>Couplet / Refrain</span>
								{% endif %}
							</h3>
							<div class="row center">
								<div class="col-sm-12">

									{% for chordChorus in chordsChorus %}
										<div class="col-sm-3">
											<img src="assets/img/accords/{{chordChorus }}" style="height: 190px;"/>

											<span>
												{% set cleanedChordChorus = chordChorus|split('.')|slice(0, -1)|join('')|replace({'_': ' '}) %}

												<h5 style="text-align: center;">
												{{cleanedChordChorus}}</h5>

											</span>
										</div>
									{% endfor %}

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

						{% if song.nbChordsVerse > 0 %}
							<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">

										{% for chordVerse in chordsVerse %}
											<div class="col-sm-3">
												<img src="assets/img/accords/{{chordVerse }}" style="height: 190px;"/>

												<span>
													{% set cleanedChordVerse = chordVerse|split('.')|slice(0, -1)|join('')|replace({'_': ' '}) %}

													<h5 style="text-align: center;">
													{{cleanedChordVerse}}</h5>

												</span>
											</div>
										{% endfor %}
									</div>
								</div>
							</div>
						{% endif %}
						
						<div class="container">
							<div class="v-spacer col-sm-12 v-height-big"></div>
						</div>
					</article>
				</div>
			</div>
		</div>
	</div>

{% endblock %}