description = "Pricing 3 Section"

[viewBag]
==
<div {% if data.section_pricing3_id %}id="{{ data.section_pricing3_id }}"{% endif %} class="pricing3-{{ data.section_pricing3_id }} py-24 {{ data.section_pricing3_bg }}">
    <div class="{{ data.section_pricing3_container }}">
        <!-- Row  -->
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                {% if data.section_pricing3_header %}<h2 class="pt-5 pb-4">{{ data.section_pricing3_header }}</h2>{% endif %}
                {% if data.section_pricing3_subheader %}<h6 class="text-body line-height-normal">{{ data.section_pricing3_subheader }}</h6>{% endif %}
                {% if data.section_pricing3_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="p3-switch-{{ data.section_pricing3_id }}">
                        <label class="switch-label" for="p3-switch-{{ data.section_pricing3_id }}"></label>
                    </div>
                    <span class="display-13 font-weight-medium">YEARLY</span>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- 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_pricing3 %}
			{% if data.section_pricing3_type == 'both' %}
            {% set profit = (fields.section_pricing3_mprice * 12) - fields.section_pricing3_yprice %}
			{% endif %}
            <!-- column  -->
            <div class="{{ data.section_pricing3_column }}" {% if data.section_pricing3_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card border-0 mb-7 shadow">
                    <div class="card-body p-9">
                        {% if fields.section_pricing3_popular %}<span class="badge badge-danger p-3 position-absolute pos-r-4 pos-t-4n">Popular</span>{% endif %}
                        <div class="d-flex align-items-center">
                            <h5 class="font-weight-medium mb-0">{{ fields.section_pricing3_title }}</h5>
                            <h6 class="ml-auto text-body line-height-normal">{{ fields.section_pricing3_subtitle }}</h6>
                        </div>
                        <div class="row">
                            <div class="col-lg-5 text-center">
                                <div class="">
                                    <sup class="display-11 pos-t-5n">{{ data.section_pricing3_currency }}</sup>
                                    {% if data.section_pricing3_type != 'year' %}
                                    <span class="monthly display-6 text-dark">{{ fields.section_pricing3_mprice }}</span>
                                    <small class="monthly">/mo</small>
                                    {% endif %}
                                    {% if data.section_pricing3_type != 'month' %}
                                    <span class="yearly display-6 text-dark {% if data.section_pricing3_type == 'both' %}d-none-i{% endif %}">{{ fields.section_pricing3_yprice }}</span>
                                    <small class="yearly {% if data.section_pricing3_type == 'both' %}d-none-i{% endif %}">/yr</small>
                                    {% endif %}
                                    {% if fields.section_pricing3_btn_link is not empty %}
                                    <a class="btn mt-5 px-10 btn-chevron {% if fields.section_pricing3_popular %}btn-red-gradient{% else %}btn-aqua-gradient{% endif %} text-white" href="{{ fields.section_pricing3_btn_clink ? fields.section_pricing3_btn_clink : (fields.section_pricing3_btn_plink | staticPage) }}">
                                        <span>{{ fields.section_pricing3_btn_label }} <i class="{{ fields.section_pricing3_btn_icon }} display-13"></i></span>
                                    </a>
                                    {% endif %}
                                    {% if data.section_pricing3_type == 'both' %}
                                    <span class="text-left mt-4 d-block display-14">Save <span class="font-weight-medium">{{ data.section_pricing3_currency }}{{ profit }}</span> a Year, choosing annual payment</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-lg-7 align-self-center">
                                <ul class="list-unstyled pl-7 display-13 mb-0 {% if data.section_pricing3_align == 'text-center' %}d-flex align-items-center flex-column{% endif %}">
                                    {% for features in fields.section_pricing3_features %}
                                    <li class="d-flex py-1">
                                        {% if features.section_pricing3_features_icon %}<i class="{{ features.section_pricing3_features_icon }} d-flex justify-content-center align-items-center w-8r h-6r text-aqua-gradient"></i>{% endif %}
                                        {{ features.section_pricing3_features_title }}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- column  -->
            {% endfor %}
        </div>
    </div>
</div>

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