description = "Pricing 1 Section"

[viewBag]
==
<div {% if data.section_pricing1_id %}id="{{ data.section_pricing1_id }}"{% endif %} class="pricing1-{{ data.section_pricing1_id }} py-24 {{  data.section_pricing1_bg }}">
    <div class="{{ data.section_pricing1_container }}">
        <!-- Row  -->
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                {% if data.section_pricing1_header %}<h2 class="pt-5 pb-4">{{ data.section_pricing1_header }}</h2>{% endif %}
                {% if data.section_pricing1_subheader %}<h6 class="text-body line-height-normal">{{ data.section_pricing1_subheader }}</h6>{% endif %}
                {% if data.section_pricing1_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="p1-switch-{{ data.section_pricing1_id }}">
                        <label class="switch-label" for="p1-switch-{{ data.section_pricing1_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_pricing1 %}
			{% if data.section_pricing1_type == 'both' %}
            {% set profit = (fields.section_pricing1_mprice * 12) - fields.section_pricing1_yprice %}
			{% endif %}
            <!-- Column -->
            <div class="{{ data.section_pricing1_column }}" {% if data.section_pricing1_animation %}data-aos="{{ aos[ loop.index0 % 2 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card border-0 mb-9 display-13 shadow {{ data.section_pricing1_align }}">
                    <div class="card-body">
                        {% if fields.section_pricing1_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-8n bg-danger">Popular</span>{% endif %}
                        <h5 class="text-uppercase font-weight-medium mt-5">{{ fields.section_pricing1_title }}</h5>
                        <h6 class="text-body line-height-normal">{{ fields.section_pricing1_subtitle }}</h6>
                        <div class="my-5">
                            <sup class="display-11 pos-t-5n">{{ data.section_pricing1_currency }}</sup>
                            {% if data.section_pricing1_type != 'year' %}
                            <span class="monthly display-6 text-dark">{{ fields.section_pricing1_mprice }}</span>
                            <small class="monthly">/mo</small>
                            {% endif %}
                            {% if data.section_pricing1_type != 'month' %}
                            <span class="yearly display-6 text-dark {% if data.section_pricing1_type == 'both' %}d-none-i{% endif %}">{{ fields.section_pricing1_yprice }}</span>
                            <small class="yearly {% if data.section_pricing1_type == 'both' %}d-none-i{% endif %}">/yr</small>
                            {% endif %}
                            {% if data.section_pricing1_type == 'both' %}
                            <span class="d-block">Save <span class="font-weight-medium">{{ data.section_pricing1_currency }}{{ profit }}</span> a Year, choosing annual payment</span>
                            {% endif %}
                        </div>
                        <ul class="list-unstyled {% if data.section_pricing1_align == 'text-center' %}d-flex align-items-center flex-column{% endif %}">
                            {% for features in fields.section_pricing1_features %}
                            <li class="d-flex py-2">
                                {% if features.section_pricing1_features_icon %}<i class="{{ features.section_pricing1_features_icon }} d-flex justify-content-center align-items-center w-8r h-6r"></i>{% endif %}
                                {{ features.section_pricing1_features_title }}
                            </li>
                            {% endfor %}
                        </ul>
                        {% if fields.section_pricing1_btn_link is not empty %}
                        <div class="">
                            <a class="btn {% if fields.section_pricing1_popular %}btn-red-gradient{% else %}btn-aqua-gradient{% endif %} text-white btn-chevron btn-block" href="{{ fields.section_pricing1_btn_clink ? fields.section_pricing1_btn_clink : (fields.section_pricing1_btn_plink | staticPage) }}">
                                <span>{{ fields.section_pricing1_btn_label }} <i class="{{ fields.section_pricing1_btn_icon }} display-13"></i></span>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

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