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

{% block stylesheets %} 
	<!-- SITE TITTLE -->
	
	<link rel="stylesheet" href="{{ asset('assets/css/theme.css') }}">
	<link rel="stylesheet" href="{{ asset('css/style.css') }}">
	<link rel="stylesheet" href="{{ asset('css/offer.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
	<style>
		
		.premium-plan {
			margin-top: 10rem;
			min-height: 100vh;
		}

		.plan-description {
			margin-top: 3rem;
		}

		.subscription-image {
			background-color: #f3f3f3;
			height: inherit;
		}

		.plan li {
		  	display: flex;
		  	align-items: flex-start;
			margin-top: 1px;
		  	margin-bottom: 0.8rem;
			flex: 1;
		}

		.plan .fa {
		  	margin-top: 0.2rem; /* Adjust the margin to vertically align the icons */
		  	width: 1rem; /* Adjust the width as needed for proper alignment */
		}
	</style>
{% endblock %}
{% block title %}Maman-Julienne, Acheter, Vendre, Louer, faites des affaires en Afrique{% endblock %}
{% block body %}		
			
		<div class="navigation-navbar">			
			<nav class="navbar navbar-expand-lg  navigation d-flex justify-content-between">
				<a class="navbar-brand ml-3" href="{{ path('app_home') }}">
					<strong>🧿Maman-Julienne</strong>
				</a>
				<p href="javascript:void(0);" class="icon mr-5" onclick="myFunction()">
					<i class="fa fa-bars"></i>
				</p>
				<div class="navbar-collapse" id="myLinks">
					<ul class="navbar-nav ml-auto main-nav pl-4">
						<li class="nav-item">
							<a class="nav-link active" href="{{ path('app_home') }}">Accueil</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="{{ path('manual') }}">Mode emploi</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="{{ path('about') }}">À propos</a>
						</li>
					</ul>
					<ul class="navbar-nav w-25 ml-auto pl-4">
						
					</ul>
				</div>
				
			</nav>			
		</div>

		<!-- Flash messages -->

		{{ include ('partials/_flash.htlm.twig') }}

		<!-- flash messages -->

		<!-- Premium plan -->
		
		<section class="container premium-plan row d-flex">									
				
            <div class="plan-description col-sm-12 col-md-6 ">
                <h2>Passez à l'offre premium</h2>
				<p>Bénéficiez d'un accès illimité aux fonctionnalités Premium.</p>
                <div class="">
					<ul class="plan pl-0">
						<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Publication d'annonces: <i>illimitées.</i></span></li>
						<li><span class="fa fa-check text-success"></span><span class="ml-2 text-muted">Contacter les vendeurs: <i>illimitées.</i></span></li>
						<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Modification des annonces.</span></li>
						<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Mise en avant des annonces.</span></li>
						<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Modification de mes informations de profil.</span></li>							
					</ul>
				</div>
				<div>
					<form class="d-inline-block" action="{{ path('app_subscription_premium', { 'id': app.user.id }) }}" method="post">
						<input type="hidden" name="lookup_key" value="offre_test">
						<input type="hidden" name="planId" value="premium">
						<button type="submit" class="btn btn-primary subscription-choice">Souscrire</button>
					</form>
					<a type="button" class="btn btn-secondary d-inline-block ml-3" href="{{ path('users_profil_modify', { 'slug': app.user.slug }) }}">Annuler</a>
				</div>
            </div>

            <div class="col-sm-12 col-md-6 ">
                <img class="" src="{{ asset('images/illustrations/subscription.png') }}" width="300px" height="300px" alt="">
            </div>
			
		</section>
		
		<!-- Premium plan -->	

	<footer class="footer-bottom"> 
		<div class="copyright align-items-center">
			<p>Copyright © 2022. Tous droits réservés
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																											.<a class="link-mention" href="{{ path('cgu-term') }}">
				Mention légale / CGU</a>
			</p>
		</div></div>
	</footer>

{% endblock %}
{% block javascripts %}
<script>

	function myFunction() {
		var x = document.getElementById("myLinks");
		if (x.style.display === "block") {
			x.style.display = "none";
		} else {
			x.style.display = "block";
		}
	}
	
</script>
{% endblock %}