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

{% block body %}

    <!-- begin:: Page -->

    <!-- begin:: Header Mobile -->
    {% include 'common/header_mobile.html.twig' %}

    <!-- end:: Header Mobile -->
    <div class="kt-grid kt-grid--hor kt-grid--root">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
            <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">

                <!-- begin:: Header -->
                {{ render(controller('App\\Controller\\Common\\Top::index')) }}

                <!-- end:: Header -->
                <div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch"
                     id="kt_body">
                    <div class="kt-content kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor"
                         id="kt_content">
                        <header class="page-header-top">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="page-caption">
                                            <!--h1 class="page-title">Listing</h1-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </header>
                        <main>
                            <div class="app-price-box">
                                <section class="over-top">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
                                                <section class="header-title">
                                                    <article><h1>Pricing</h1></article>
                                                    <article>
                                                        <ul class="list-bread">
                                                            <li><i class="fa fa-home "></i></li>
                                                            <li>
                                                                <span> <i class="fa fa-dot-circle small "></i> Lorem Ipsum</span>
                                                            </li>
                                                            <li>
                                                                <span> <i class="fa fa-dot-circle small "></i> admin</span>
                                                            </li>
                                                        </ul>
                                                    </article>
                                                </section>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card main-card">
                                                    <section>
                                                        <article class="card-header">
                                                            <h2>Pricing Table</h2>
                                                        </article>
                                                        <article class="card-body">
                                                            <aside class="box-content">
                                                                <div class="row">
                                                                    {% for sub in subscriptions %}
                                                                    <div class="col-md-4 col-sm-6">

                                                                        <div class="pricingTable {{ sub.selected
                                                                        > 0 ? 'selected':'' }} ">
                                                                            <div class="pricingTable-header">
                                                                                <span class="heading">
                                                                                    {{ sub.title }}
                                                                                </span>
                                                                            </div>
                                                                            <div class="pricing-plans">
                                                                                <span class="price-value">
                                                                                    {% if sub.price > 0 %}
                                                                                       € {{ sub.price }} /  Per Installation
                                                                                    {% else %}
                                                                                        Free
                                                                                    {% endif %}
                                                                                </span>
                                                                                <span class="subtitle">
                                                                                    <p>{{ sub.description }}</p>
                                                                                </span>
                                                                            </div>
                                                                            <div class="pricingContent"></div>
                                                                            <div class="pricingTable-sign-up">
                                                                                <!-- BUTTON BOX-->
                                                                                <a href="#"
                                                                                   class="btn btn-block btn-default"
                                                                                   price="{{ sub.price }}"
                                                                                >PURCHASE</a>
                                                                            </div><!-- BUTTON BOX-->
                                                                        </div>
                                                                    </div>
                                                                    {% endfor %}


                                                                </div>
                                                            </aside>
                                                            <aside class="sep-aside"></aside>
                                                            <aside class="box-content payment-methods">
                                                                <section>
                                                                    <article class="pay-tile">
                                                                        <aside><h3>Payment Method</h3></aside>
                                                                        <aside class="total">Total : 500&euro;</aside>
                                                                    </article>
                                                                    <article>
                                                                        <form>
                                                                            <aside class="pay-type">
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                           type="radio" name="pay"
                                                                                           id="viva">
                                                                                    <label class="form-check-label"
                                                                                           for="viva">Viva</label>
                                                                                    <p>Pay with Viva</p>
                                                                                </div>
                                                                            </aside>
                                                                            <aside class="pay-type">
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                           type="radio" name="pay"
                                                                                           id="paypal" checked>
                                                                                    <label class="form-check-label"
                                                                                           for="paypal">PayPal</label>
                                                                                    <p>Pay with your PayPal account or
                                                                                        credit/debit card through
                                                                                        PayPal</p>
                                                                                </div>
                                                                            </aside>
                                                                            <aside class="terms">
                                                                                <div class="form-check">
                                                                                    <label class="form-check-label">
                                                                                        <input type="checkbox"
                                                                                               class="form-check-input"
                                                                                               value="">
                                                                                        I have read and accept the <a
                                                                                                href="?"> Terms and
                                                                                            Conditions</a>
                                                                                    </label>
                                                                                </div>
                                                                            </aside>
                                                                            <aside class="sep-aside"></aside>
                                                                            <aside class="pay-and-activate">
                                                                                <button class="btn btn-default float-right">
                                                                                    PAYMENT AND ACTIVATION
                                                                                </button>
                                                                            </aside>
                                                                        </form>
                                                                    </article>
                                                                </section>
                                                            </aside>
                                                        </article>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </main>

                        <!-- end body -->
                        <!-- begin:: Footer -->
                        {{ render(controller('App\\Controller\\Common\\Footer::index')) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}