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

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

{% 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="fa fa-fw" aria-hidden="true" title="Copy to use eur"></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 active" href="index.html">
                <span>Mensuel</span>
            </a>
        </li>
        <li class="nav-item">
            <a role="tab" class="nav-link" href="analytics-variation.html">
                <span>Annuel</span>
            </a>
        </li>
    </ul>
  
  
<div class="main-card mb-3 card page-plan-access ">
    <div class="card-body">   
        <p class="description text-center"> Choisissez parmi nos différentes options d'abonnement celle qui correspond le mieux à vos besoins</p>     
        <div class="row cartouche">
            <div class="col-md-4 free">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Free</span> <strong>0€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
            <div class="col-md-4 basic">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Basic</span> <strong>29€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
            <div class="col-md-4 startup">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Startup</span> <strong>39€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
            <div class="col-md-4 premium">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Premium</span> <strong>49€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
            <div class="col-md-4 advanced">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Advanced</span> <strong>59€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
            <div class="col-md-4 busness">
                <div class="box">
                    
                    <div class="white">
                        <h3><span>Busness</span> <strong>69€ </strong><em>PAR MOIS</em></h3>
                    </div>
                    <ul>
                        <li>15 utilisateurs </li>
                        <li>Fonctionnalité 2</li>
                        <li>Fonctionnalité 3</li>
                        <li>Fonctionnalité 4</li>
                    </ul>
                    <a href="#" class="btn">obtenir un plan</a>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock %}