{% extends '@Flexy/FrontBundle/Themes/Mutaweef/templates/layout.html.twig' %}

{% form_theme editForm 'bootstrap_4_layout.html.twig' %}


{% block body %}


	<div class="container p-5">

		
        

			<style>



				.boarding-pass {

					position: unset;
					transform: translate(0%, 0%);
					max-width: 450px;
					height: auto;
					background: #fff;
					border-radius: 12px;
					box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
					overflow: hidden;
					text-transform: uppercase;
					margin: auto;
					color: #333;

				}
				.boarding-pass small {
					display: block;
					font-size: 11px;
					color: #A2A9B3;
					margin-bottom: 2px;
				}
				.boarding-pass strong {
					font-size: 15px;
					display: block;
				}
				.boarding-pass header {
					background: linear-gradient(to bottom, #36475f, #2c394f);
					padding: 12px 20px;
					height: 53px;
				}
				.boarding-pass header .logo {
					float: left;
					width: 104px;
					height: 31px;
				}
				.boarding-pass header .flight {
					float: right;
					color: #fff;
					text-align: right;
				}
				.boarding-pass header .flight small {
					font-size: 8px;
					margin-bottom: 2px;
					opacity: 0.8;
				}
				.boarding-pass header .flight strong {
					font-size: 18px;
				}
				.boarding-pass .cities {
					position: relative;
					background: rgb(3, 181, 255);
					color: white;
				}
				.boarding-pass .cities::after {
					content: "";
					display: table;
					clear: both;
				}
				.boarding-pass .cities .city {
					padding: 20px 18px;
					float: left;
				}
				.boarding-pass .cities .city:nth-child(2) {
					float: right;
				}
				.boarding-pass .cities .city strong {
					font-size: 40px;
					font-weight: 300;
					line-height: 1;
				}
				.boarding-pass .cities .city small {
					margin-bottom: 0;
					margin-left: 3px;
					color: white;
				}
				.boarding-pass .cities .airplane {
					position: absolute;
					width: 30px;
					height: 25px;
					top: 57%;
					left: 30%;
					opacity: 0;
					transform: translate(-50%, -50%);
					-webkit-animation: move 3s infinite;
					animation: move 3s infinite;
				}
				@-webkit-keyframes move {
					40% {
						left: 50%;
						opacity: 1;
					}
					100% {
						left: 70%;
						opacity: 0;
					}
				}
				@keyframes move {
					40% {
						left: 50%;
						opacity: 1;
					}
					100% {
						left: 70%;
						opacity: 0;
					}
				}
				.boarding-pass .infos {
					display: flex;
				}
				.boarding-pass .infos .places,
				.boarding-pass .infos .times {
					width: 50%;
					padding: 10px 0;
				}
				.boarding-pass .infos .places::after,
				.boarding-pass .infos .times::after {
					content: "";
					display: table;
					clear: both;
				}
				.boarding-pass .infos .times strong {
					transform: scale(0.9);
					transform-origin: left bottom;
				}
				.boarding-pass .infos .places {
					background: #ECECEC;
				}
				.boarding-pass .infos .places small {
					color: #97A1AD;
				}
				.boarding-pass .infos .places strong {
					color: #02b6ff;
				}
				.boarding-pass .infos .box {
					padding: 10px 20px;
					width: 29%;
					float: left;
				}
				.boarding-pass .infos .box small {
					font-size: 10px;
				}
				.boarding-pass .strap {
					clear: both;
					position: relative;
				}
				.boarding-pass .strap::after {
					content: "";
					display: table;
					clear: both;
				}
				.boarding-pass .strap .box {
					padding: 23px 0 20px 20px;
				}
				.boarding-pass .strap .box div {
					margin-bottom: 15px;
				}
				.boarding-pass .strap .box div small {
					font-size: 10px;
				}
				.boarding-pass .strap .box div strong {
					font-size: 13px;
				}
				.boarding-pass .strap .box sup {
					font-size: 8px;
					position: relative;
					top: -5px;
				}
				.boarding-pass .strap .qrcode {
					position: absolute;
					top: 20px;
					right: 20px;
					width: 80px;
					height: 80px;
				}



			</style>

			<div class="row">
                <div class="col-lg-6 offset-lg-3 col-8 offset-2 text-center mb-5">
                
                        {% include "@Flexy/FrontBundle/Themes/Mutaweef/templates/missions/small-includes/_steps.html.twig"  %}

                </div>
				
				<div class="col-lg-7 col-12 col-md-12">
				{{form_start(editForm,{attr:{"data-turbo":"false"}} )}}
					<div class="row">
						
						{% for singleOrderItemForm in editForm.children["orderItems"] %}

							
							
                            <div class="col-12" >
                            <h4 class="" style="text-align: center;color: #02b6ff;">
								{% if singleOrderItemForm == editForm.children["orderItems"]|first %}
                                    Programmer votre aller
								{% else %}
									Programmer votre retour
								{% endif %}
							</h4>
                            </div>

							
                           
						    {% for singleShipmentField in singleOrderItemForm.children["shipmentItem"] %}
							
                            <div class="col-6">
                            
                                {{form_row(singleShipmentField)}}
								{{form_rest(singleShipmentField)}}
                            </div>
                            

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

					
					{{form_widget(editForm)}}
					<button class="btn btn-primary">Continuer</button>
					
					{{form_end(editForm)}}
				</div>
				<div class="col-12 d-none">
					<a class="btn btn-success d-none" href="{{path('front_home')}}">
						Reserver a nouveau</a>
				</div>
			</div>


		

	</div>

{% endblock %}