{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    <div class="row">
        {% for sms_package in sms_packages %}
            <div class="col-md-3">
                <div class="card card-pricing">
                    <div class="card-body text-center">
                        <div class="card-header">
                            <p class="fw-bold text-uppercase">{{ sms_package.name }}</p>
                          </div>

                        <h2 class="card-pricing-price">{{ sms_package.price|intcomma }}<span>/=</span></h2>
                        <ul class="card-pricing-features">
                            <li> <strong>Number of SMS: </strong> {{ sms_package.sms }}</li>
                            <li> <strong>Cost of each SMS: </strong> {{ sms_package.unit_cost }}</li>
                        </ul>
                        <a href="{% url 'choice_plan' sms_package.id %}" class="btn btn-primary mt-4 mb-2 rounded-pill">Choose Plan</a>
                    </div>
                </div> <!-- end Pricing_card -->
            </div> <!-- end col -->
        {% endfor %}
    </div>
    <!-- end row-->
    {% block scripts %}
        <script>
            let global_state = {
                baseUrl: '{{ baseUrl|safe }}',
            }
        </script>
    {% endblock %}
{% endblock %}