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

{% block title %}
	{{title}}
{% endblock %}

{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href=" {{asset('css/form.css')}} ">
{% endblock %}

{% block body %}
	{# affichage du formulaire #}
	<div class="page-form">
		{{form_start(AnnouncementForm)}}
		<div class="div-form">
			<div class="add-title ">{{title}}</div>
			<div class="content-form">
				<div class="line-form-data">
					<div class="form-label">{{ form_label(AnnouncementForm.title) }}</div>
					<div class="form-data">{{ form_widget(AnnouncementForm.title) }}</div>
				</div>
				<div class="left-form">
					{{ form_row(AnnouncementForm.picture) }}
					{{ form_row(AnnouncementForm.date) }}
					{{ form_row(AnnouncementForm.description) }}
				</div>

				<div class="line-form-data">
					<div class="form-label">{{ form_label(AnnouncementForm.position) }}</div>
					<div class="form-data">{{ form_widget(AnnouncementForm.position) }}</div>
				</div>

				<div class="line-form-data">
					<div class="form-label">{{ form_label(AnnouncementForm.backgroundColor) }}</div>
					<div class="form-data">{{ form_widget(AnnouncementForm.backgroundColor) }}</div>
				</div>

				<div class="line-form-data">
					<div class="form-label">{{ form_label(AnnouncementForm.borderColor) }}</div>
					<div class="form-data">{{ form_widget(AnnouncementForm.borderColor) }}</div>
				</div>

				<div class="line-form-data">
					<div class="form-label">{{ form_label(AnnouncementForm.textColor) }}</div>
					<div class="form-data">{{ form_widget(AnnouncementForm.textColor) }}</div>
				</div>

				<div class="right-form">
					<div class="div-img-change"></div>
				</div>

				<div class="div-btn-form">
					<button class="btn-form submit" type="submit">
						Ajouter
					</button>

					<button onclick="history.back()" class="btn-form back">
						Retour
					</button>
				</div>
				{{form_end(AnnouncementForm)}}
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{parent()}}
	<script src="{{asset('js/show-img.js')}} "></script>
{% endblock %}