description = "Pricing 2 Section"

[viewBag]
==
<div {% if data.section_pricing2_id %}id="{{ data.section_pricing2_id }}"{% endif %} class="pricing2-{{ data.section_pricing2_id }} py-24 {{ data.section_pricing2_bg }}">
    <div class="{{ data.section_pricing2_container }}">
        <!-- Row  -->
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                {% if data.section_pricing2_header %}<h2 class="pt-5 pb-4">{{ data.section_pricing2_header }}</h2>{% endif %}
                {% if data.section_pricing2_subheader %}<h6 class="text-body line-height-normal">{{ data.section_pricing2_subheader }}</h6>{% endif %}
                {% if data.section_pricing2_type == 'both' %}
                <div class="mt-10 mb-5">
                    <span class="display-13 font-weight-medium">MONTHLY</span>
                    <div class="switch d-inline-block ml-2 mr-2">
                        <input type="checkbox" class="switch" id="p2-switch-{{ data.section_pricing2_id }}">
                        <label class="switch-label" for="p2-switch-{{ data.section_pricing2_id }}"></label>
                    </div>
                    <span class="display-13 font-weight-medium">YEARLY</span>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- Row  -->
        <!-- Row  -->
        <div class="row mt-10">
            {% set aos = ['flip-left', 'flip-up', 'flip-right', 'flip-left', 'flip-down', 'flip-right'] %}
            {% for fields in data.section_pricing2 %}
			{% if data.section_pricing2_type == 'both' %}
            {% set profit = (fields.section_pricing2_mprice * 12) - fields.section_pricing2_yprice %}
			{% endif %}
            <!-- Column -->
            <div class="{{ data.section_pricing2_column }}" {% if data.section_pricing2_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card border-0 mb-9 shadow {{ data.section_pricing2_align }}">
                <img class="card-img-top" src="{{ fields.section_pricing2_image|media|resize(350, 250, { mode: 'crop' }) }}" alt="{{ fields.section_pricing2_title }}">
                    <div class="p-7">
                        {% if fields.section_pricing2_popular %}<span class="d-flex justify-content-center align-items-center rounded-circle text-white w-16r h-16r position-absolute pos-r-4 pos-t-10n bg-danger p-10">Popular</span>{% endif %}
                        <h5 class="text-uppercase font-weight-medium">{{ fields.section_pricing2_title }}</h5>
                        <h6 class="text-body line-height-normal">{{ fields.section_pricing2_subtitle }}</h6>
                        <ul class="list-inline display-13 mt-5 mb-0 {% if data.section_pricing2_align == 'text-center' %}d-flex align-items-center flex-column{% endif %}">
                            {% for features in fields.section_pricing2_features %}
                            <li class="d-flex py-1">
                                {% if features.section_pricing2_features_icon %}<i class="{{ features.section_pricing2_features_icon }} d-flex justify-content-center align-items-center w-8r h-6r text-aqua-gradient"></i>{% endif %}
                                {{ features.section_pricing2_features_title }}
                            </li>
                            {% endfor %}
                        </ul>
                        <div class="{{ data.section_pricing2_align == 'text-left' ? 'd-flex align-items-center' }} my-7">
                            <div class="">
                                <sup class="display-11 pos-t-5n">{{ data.section_pricing2_currency }}</sup>
                                {% if data.section_pricing2_type != 'year' %}
                                <span class="monthly display-6 text-dark">{{ fields.section_pricing2_mprice }}</span>
                                <small class="monthly">/mo</small>
                                {% endif %}
                                {% if data.section_pricing2_type != 'month' %}
                                <span class="yearly display-6 text-dark {% if data.section_pricing2_type == 'both' %}d-none-i{% endif %}">{{ fields.section_pricing2_yprice }}</span>
                                <small class="yearly {% if data.section_pricing2_type == 'both' %}d-none-i{% endif %}">/yr</small>
                                {% endif %}
                            </div>
                            {% if fields.section_pricing2_btn_link is not empty %}
                            <div class="{{ data.section_pricing2_align == 'text-left' ? 'ml-auto' }}">
                                <a class="btn btn-rounded {% if fields.section_pricing2_popular %}btn-red-gradient{% else %}btn-aqua-gradient{% endif %} text-white" href="{{ fields.section_pricing2_btn_clink ? fields.section_pricing2_btn_clink : (fields.section_pricing2_btn_plink | staticPage) }}">
                                    {{ fields.section_pricing2_btn_label }}
                                </a>
                            </div>
                            {% endif %}
                        </div>
                        {% if data.section_pricing2_type == 'both' %}
                        <span class="d-block">Save <span class="font-weight-medium">{{ data.section_pricing2_currency }}{{ profit }}</span> a Year, choosing annual payment</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_pricing2_type == 'both' %}
{% put scripts %}
<script>
// Switch
$(".pricing2-{{ data.section_pricing2_id }} .switch-label").click(function() {
    $(".pricing2-{{ data.section_pricing2_id }} .monthly, .pricing2-{{ data.section_pricing2_id }} .yearly").toggle();
});
</script>
{% endput %}
{% endif %}