{% 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/1RW0S0xt8D0" 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">
									<h4>Partie 1</h4>

									<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 class="row center">

								<div class="col-sm-12">
									<h4>Partie 2</h4>

									<div class="col-sm-3">
										<img src="assets/img/accords/{{songs.chordVerse6}}" style="height: 190px;"/>

										<span>
											<h5 style="text-align: center;">6 :
												{{songs.chordVerse6Name}}</h5>
										</span>
									</div>

									<div class="col-sm-3">
										<img src="assets/img/accords/{{songs.chordVerse7}}" style="height: 190px;"/>

										<span>
											<h5 style="text-align: center;">7 :
												{{songs.chordVerse7Name}}</h5>
										</span>
									</div>

									<div class="col-sm-3">
										<img src="assets/img/accords/{{songs.chordVerse8}}" style="height: 190px;"/>

										<span>
											<h5 style="text-align: center;">8 :
												{{songs.chordVerse8Name}}</h5>
										</span>
									</div>

									<div class="col-sm-3">
										<img src="assets/img/accords/{{songs.chordVerse9}}" style="height: 190px;"/>
										<span>
											<h5 style="text-align: center;">9 :
												{{songs.chordVerse9Name}}</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>


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

{% endblock %}