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

{% block title %}
	{% trans %}Edit your profile picture{% endtrans %}
{% endblock %}

{% block body %}
	<main class="browse-section">
		<div class="container">
			<div class="row justify-content-md-center">
				<div class="col-md-8">
					<div class="lg_form" id="principalForm">
						{% for flashError in app.flashes('error') %}
							<div class="alert alert-danger alert-dismissible fade show" role="alert">
								{{ flashError }}
								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
						{% endfor %}
						{% for flashError in app.flashes('success') %}
							<div class="alert alert-success alert-dismissible fade show" role="alert">
								{{ flashError }}
								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
						{% endfor %}
						<div class="main-heading">
							<h2>{% trans %}Edit your profile picture{% endtrans %}</h2>
							<span>{% trans %}Preferably choose a passport-type photo, without sunglasses and without anyone next to you.{% endtrans %}</span>
							<div class="line-shape1">
								<img src="{{ asset ('assets/images/line.png') }}" alt="">
							</div>
							<br>
							<div class="line-shape1">
								<img class="pic_ex" src="{{ asset ('assets/images/default_profile_picture.jpg')}}" alt="">
							</div>
						</div>
						{{ form_start(pictureForm, {'attr': {'id': 'picture_form'}}) }}
						{# <div class="form-group text-center"> #}
						<div class="image-upload-wrap1" id="upload_btn">
							{{ form_widget(pictureForm.picture, { 'attr': { 'class' : 'file-upload-input1', 'type' : 'file', 'name' : 'country', 'accept' : 'image/*', 'onchange' : 'previewProfile()' }}) }}
							<div class="drag-text1">
								{% trans %}Choose a picture{% endtrans %}
							</div>
						</div>
						<br>
						{# </div> #}
						<img width="100%" src="" alt="" id="avatar">
						<input type="hidden" id="dsb" value="{{ dsb is defined ? dsb : 'true' }}">
						{% include '_partials/continue_button.html.twig' %}
						{{ form_end(pictureForm) }}
					</div>
				</div>
			</div>
		</div>
	</main>
{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<!-- Scripts js -->
	{<script src="{{ asset ('assets/js/picture_cropper.js')}}"></script>
{% endblock %}