{% 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/E4kq1ERaVfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 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-2">

										<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-2">

										<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-2">

										<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-2">

										<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-2">

										<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>

							</div>
						</div>

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

{% endblock %}