{% block plan_show_widget %}

    <div style="display:  none">
        {% include 'QbaBitFormsBundle:Collections:includes/_base_entity_list.html.twig' with {multiple:false,show:false} %}
    </div>
    {% set linksCss = [ asset('bundles/qbabitpaymentmethods/form/plan_show.css'),
    ] %}
    {% for rs in linksCss %}
        {% set fake = QbaBitAssetsAddCssSource(rs,true) %}
    {% endfor %}
    {{ QbaBitAssetsRenderCssSources(true) | raw }}

    {% set c =values|length %}
    {% set m =12 %}
    {% set item_xs =m/c %}


    <div class="price-table-wrapper">
        {% for value in values %}
            <div class="pricing-table" >
                <h2 class="pricing-table__header">{{ value.name }}</h2>
                <h3 class="pricing-table__price">  {{ QbCurrencyFormat(value.price)  }}</h3>
                <a  id="{{ value.id }}" class="pricing-table__button {% if loop.index ==1 %}active{% endif %}" >
                   {{ "select_me"|trans({},"payment_method") }}
                </a>
                <ul class="pricing-table__list">
                    {{ value.text|raw }}

                </ul>
            </div>

        {% endfor %}

    </div>




    <script>

        function QbaBitPlanShow{{ form.vars.id }}() {

          $(".pricing-table__button").on("click",function (e) {

              $(".pricing-table__button").removeClass("active");
              var s = $(e.target);
              s.addClass("active");
              $("#{{  form.vars.id }}").val(s.attr("id")).change();


          });
        }
        {% if app.request.isXmlHttpRequest == false %}
        window.addEventListener('load', function() {
            QbaBitPlanShow{{ form.vars.id }}();


            }
        );
        {% else %}
        jQuery(function(){

            QbaBitPlanShow{{ form.vars.id }}();

        });
        {% endif %}
    </script>





{% endblock %}