{% extends "PagosCli/pagoscli_menu.html.twig" %}
{% trans_default_domain 'config' %}

{% block activeTab %}

    <main id="main">

        <!--==========================
    Pricing Section
    ============================-->
        <section id="pricing" class="wow  section-bg">
            <div class="container">
                <div class="row flex-items-xs-middle flex-items-xs-center">
                    <div class="col-md-12">


                        <div class="card">

                            <div class="card-header">
                                <h3><span class="currency">$</span>{{ plan.precioMes }}<span
                                            class="period">/Mes</span></h3>
                            </div>
                            <div class="card-body">
                                <h4 class="card-title">{{ plan.name }}</h4>
                                {# <ul class="list-group">
                                    <li class="list-group-item">Personas Naturales</li>
                                    <li class="list-group-item">Licencia Anual</li>
                                    <li class="list-group-item">Hasta 5 comprobantes anuales.</li>
                                </ul> #}
                                {{ plan.detalle |raw }}
                                <ul>
                                    {% if plan.ilimitado == true %}
                                        <li>Número de comprobantes por mes: Ilimitado</li>
                                        <li>Valor máximo de facturación por mes: Ilimitado</li>
                                    {% else %}
                                        <li>Número de comprobantes por mes:&nbsp;{{ plan.numfacmes }}</li>
                                        <li>Valor máximo de facturación por mes:&nbsp;${{ plan.valmaxfac }}</li>
                                    {% endif %}
                                </ul>
                            </div>
                            <div class="card-footer bg-transparent">
                                <div class="pull-right">
                                    <a href="{{ path('app_register_plan_add', {'id':plan.id}) }}"
                                       class="btn">elegir
                                        Plan</a>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </section>
        <!-- #pricing -->

    </main>
    <!--==========================
    Footer
    ============================-->
    <footer id="footer" class="section-bg">
        <div class="container">
            <div class="copyright">
                {# <div class="pull-right hidden-xs">
                <b>Version</b> 2.5.0
            </div> #}
                <strong>Copyright &copy; 2020-2022 &nbsp;&nbsp;</strong>

            </div>
            <div class="credits">

            </div>
        </div>
    </footer>

{% endblock %}

{% block javascripts %}

    <!-- Uncomment below i you want to use a preloader -->
    <!-- <div id="preloader"></div> -->
    <!-- JavaScript Libraries -->
    <script src="{{ asset("lib/jquery/jquery.min.js") }}"></script>
    <script src="{{ asset("lib/jquery/jquery-migrate.min.js") }}"></script>
    <script src="{{ asset("lib/bootstrap/js/bootstrap.bundle.min.js") }}"></script>
    <script src="{{ asset("lib/easing/easing.min.js") }}"></script>
    <script src="{{ asset("lib/mobile-nav/mobile-nav.js") }}"></script>
    <script src="{{ asset("lib/wow/wow.min.js") }}"></script>
    <script src="{{ asset("lib/waypoints/waypoints.min.js") }}"></script>
    <script src="{{ asset("lib/counterup/counterup.min.js") }}"></script>
    <script src="{{ asset("lib/owlcarousel/owl.carousel.min.js") }}"></script>
    <script src="{{ asset("lib/isotope/isotope.pkgd.min.js") }}"></script>
    <script src="{{ asset("lib/lightbox/js/lightbox.min.js") }}"></script>
    <!-- Template Main Javascript File -->
    <script src="{{ asset("lib/js/main.js") }}"></script>
{% endblock %}