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

{% block title %}
	Plan d' acces
{% endblock %}

{% set plan = app.request.query.get('plan') %}

{% block body %}
	{% if app.request.get('error') %}
		{% if app.request.get('error') == 'subscription-no-customer' %}
			Vous ne pouvez plus créer de nouveau client.
		{% endif %}
	{% endif %}
	<div class="app-page-title">
		<div class="page-title-wrapper">
			<div class="page-title-heading">
				<div class="page-title-icon">
					<i class="nav-link-icon lnr-rocket"></i>
				</div>
				<div>
					Plan d'accès
					<div class="page-title-subheading">Liste des abonnements.</div>
				</div>
			</div>
		</div>
	</div>
	<ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
		<li class="nav-item">
			<a role="tab" class="nav-link {% if plan != 'annuel' %} active {% endif %}" href="{{ path('app_account_upgrade', {'plan':'mensuel'}) }}">
				<span>Mensuel</span>
			</a>
		</li>
		<li class="nav-item">
			<a role="tab" class="nav-link {% if plan == 'annuel' %} active {% endif %}" href="{{ path('app_account_upgrade', {'plan':'annuel'}) }}">
				<span>Annuel</span>
			</a>
		</li>
	</ul>


	<div class="main-card mb-3 card page-plan-access ">
		<div class="card-body">
			<p class="text-center fw-normal fs-3" style="font-family: Helvetica;">
				Choisissez parmi nos options d’abonnement en fonction de vos besoins !</p>
			<div class="row cartouche">
				<div class="col-md-4 free">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_free.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Free</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">0€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">0€</span> / 
									<span>ANS</span></p>
								{% else %}
									<p><span class="fs-1">0€</span> / 
									<span>MOIS</span></p>
								{% endif %}
							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						<a href="{{ path('app_account_payment', {'formula':'mensuel'}) }}" class="btn">obtenir un plan</a>
					</div>
				</div>
				<div class="col-md-4 basic">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_basique.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Basic</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">29€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">300€</span> / 
									<span>ANS</span></p>
								{% else %}
									<p><span class="fs-1">29€</span> / 
									<span>MOIS</span></p>
								{% endif %}


							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						{% if plan == 'mensuel' %}
							<a href="{{ path('app_account_payment', {'formula':'basic', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% elseif plan == 'annuel' %}
							<a href="{{ path('app_account_payment', {'formula':'basic', 'type' : 'annuel'}) }}" class="btn">obtenir un plan</a>
							{% else %}
							<a href="{{ path('app_account_payment', {'formula':'basic', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% endif %}
					</div>
				</div>
				<div class="col-md-4 startup">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_startup.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Startup</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">39€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">450€</span> / 
									<span>ANS</span></p>
								{% else %}
									<p><span class="fs-1">39€</span> / 
									<span>MOIS</span></p>
								{% endif %}
							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						{% if plan == 'mensuel' %}
							<a href="{{ path('app_account_payment', {'formula':'startup', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% elseif plan == 'annuel' %}
							<a href="{{ path('app_account_payment', {'formula':'startup', 'type' : 'annuel'}) }}" class="btn">obtenir un plan</a>
						{% else %}
							<a href="{{ path('app_account_payment', {'formula':'startup', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% endif %}
					</div>
				</div>
				<div class="col-md-4 premium">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_premium.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Premium</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">49€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">600€</span> / 
									<span>MOIS</span></p>
								{% else %}
									<p><span class="fs-1">49€</span> / 
									<span>MOIS</span></p>
								{% endif %}

							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						{% if plan == 'mensuel' %}
							<a href="{{ path('app_account_payment', {'formula':'premium', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% elseif plan == 'annuel' %}
							<a href="{{ path('app_account_payment', {'formula':'premium', 'type' : 'annuel'}) }}" class="btn">obtenir un plan</a>
						{% else %}
							<a href="{{ path('app_account_payment', {'formula':'premium', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% endif %}
					</div>
				</div>
				<div class="col-md-4 advanced">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_advanced.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Advanced</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">59€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">650€</span> / 
									<span>MOIS</span></p>
								{% else %}
									<p><span class="fs-1">59€</span> / 
									<span>MOIS</span></p>
								{% endif %}
							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						{% if plan == 'mensuel' %}
							<a href="{{ path('app_account_payment', {'formula':'advanced', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% elseif plan == 'annuel' %}
							<a href="{{ path('app_account_payment', {'formula':'advanced', 'type' : 'annuel'}) }}" class="btn">obtenir un plan</a>
						{% else %}
							<a href="{{ path('app_account_payment', {'formula':'advanced', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% endif %}
					</div>
				</div>
				<div class="col-md-4 busness">
					<div class="box">

						<div class="white">
							<h3>
								<p><img src="/images/logo/plan_business.jpg" style="width:80px;border-radius:50%;"/></p>
								<span>Business</span>
								{% if plan == 'mensuel' %}
									<p><span class="fs-1">69€</span> / 
									<span>MOIS</span></p>
								{% elseif plan == 'annuel' %}
									<p><span class="fs-1">800€</span> / 
									<span>MOIS</span></p>
								{% else %}
									<p><span class="fs-1">69€</span> / 
									<span>MOIS</span></p>
								{% endif %}
							</h3>
						</div>
						<ul>
							<li>15 utilisateurs
							</li>
							<li>Fonctionnalité 2</li>
							<li>Fonctionnalité 3</li>
							<li>Fonctionnalité 4</li>
						</ul>
						{% if plan == 'mensuel' %}
							<a href="{{ path('app_account_payment', {'formula':'business', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% elseif plan == 'annuel' %}
							<a href="{{ path('app_account_payment', {'formula':'business', 'type' : 'annuel'}) }}" class="btn">obtenir un plan</a>
						{% else %}
							<a href="{{ path('app_account_payment', {'formula':'business', 'type' : 'mensuel'}) }}" class="btn">obtenir un plan</a>
						{% endif %}
					</div>
				</div>
			</div>

		</div>
	</div>

{% endblock %}