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

{% block stylesheets %}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% endblock %}
{% block body %}
	<!-- Logo Julienne-->
	<div class="topnav">
		<strong>
			<a href="{{ path('app_home') }}" style="text-decoration:none;">Maman Julienne</a>
		</strong>
		{% if app.user %}
			<div
				class="all_link_home">
				{# <p>
								
													<a style="font-size: 15px; margin-left:20px;text-decoration:none;" href="{{ path('messages') }}">
														Messages
													</a>
								
												</p> #}
				<p>

					<a style="font-size: 15px; margin-left:20px;text-decoration:none;" href="{{ path('users_annonces_ajout') }}">
						Favoris
					</a>

				</p>

				<p>

					<a style="font-size: 15px; margin-left:20px;text-decoration:none;  border-bottom: solid #5a38fd; position:absolute; padding-bottom:22px;" href="{{ path('liste_relais') }}">
						Relais
					</a>

				</p>
				<p>

					<a class="active_link" style="font-size: 15px; margin-left:117px;text-decoration:none;" href="{{ path('app_home') }}">
						Annonces
					</a>

				</p>
				<p>

					<a style="font-size: 15px; margin-left: 67px;text-decoration:none;" href="{{ path('users_annonces_ajout') }}">
						<i class="far fa-plus-square"></i>
						Déposez une offre
					</a>

				</p>
			</div>
		{% endif %}
	</div>

	<!-- Contenu "liens" -->

	<div class="container_log">
		<div class="content_log">
			{% if app.user %}
				<div class="visuel_img_after_log">
					<div class="content_top_user_img">
						<div class="userimg_log">
							<strong>
								<img class="user_img" src="{{ ('/images/users/' ~ app.user.file)}}" alt="card-img-top">
							</strong>
						</div>
						<div class="usernam_log">
							<strong>

								<a href="{{ path('users', {slug: app.user.slug}) }}" class="row btn_log_name_user" style="text-decoration:none;">
									<p>{{app.user.firstname|capitalize}}
										{{ app.user.name|capitalize}}</p>
								</a>
							</strong>
						</div>
						<a href="{{ path('app_logout') }}" class="logout_btn" style="text-decoration:none;">Déconnexion</a>

					</div>
				</div>
			{% else %}
				<div class="link_log">
					<div class="link_con row">
						<strong>
							<a href="{{ path('app_login') }}" class="btn_log" style="text-decoration:none;" href="">Se connecter</a>
						</strong>
					</div>
					<div class="link_sign_up">
						<strong>
							<a href="{{ path('app_register') }}" class="btn_up" href="">S'inscrire</a>
						</strong>
					</div>
				</div>
			</div>


		{% endif %}

		<!-- Content Color -->
		<div class="container_One_relais">
			<p>
				Des occasions a ne surtout pas rater :</p>
			<img class="icons_illutration2" src="/images/icons/confetti.png"/>

		</div>

	</div>

	<div class="all_relais">
		{% for r in annonces %}
			{% if  r.relais == true %}
				<div class="user_relais">
					<div class="column_relais">
						<img class="relais_picture" src="{{ ('uploads/images/annonces/offres' ~ r.images[0].name)}}" alt="{{ r.title }}">
						<div class="title_ad_relais">
							<a style="text-decoration:none; color: #5a38fd; font-size:18px;width: 500%;" href="{{ path('offer_detail', {slug: r.slug})}}">{{ r.title }}</a>
						</div>
						<div class="location_relais">
							<p class="">
								{{ r.regions.countries }},</p>
							<p class="">
								{{ r.city }},</p>
							<p class="">
								{{ r.districts }}</p>
							{# <img class="icons_illutration3" src="/images/icons/location-pointer.png"/> #}

						</div>
						<p style="margin-left:2px; font-size:15px;">
							{{ r.price }}
							FCFA
						</p>

					</div>

				</div>
			</div>

		{% endif %}
	{% endfor %}
</div></div></div>{% endblock %}{% block javascripts %}<script src="{{ ('js/cropper.js') }}"></script><script>window.onload = () => { // On va chercher le pays
let country = document.querySelector("#search_annonce_countries");

country.addEventListener("change", function () {
let form = this.closest("form");
let data = this.name + "=" + this.value;

fetch(form.action, {
method: form.getAttribute("method"),
body: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset:UTF-8"
}
}).then(response => response.text()).then(html => {
let content = document.createElement("html");
content.innerHTML = html;
let selectSearchRegion = content.querySelector("#search_annonce_regions");
let selectSearchCity = content.querySelector("#search_annonce_city");
let selectSearchDistrict = content.querySelector("#search_annonce_districts");


document.querySelector("#search_annonce_regions").replaceWith(selectSearchRegion);
document.querySelector("#search_annonce_city").replaceWith(selectSearchCity);
document.querySelector("#search_annonce_districts").replaceWith(selectSearchDistrict);


}).catch(error => {
console.log(error);
})

});

}</script>{% endblock %}