{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 col-xl-5">
            <div class="card mt-4 border border-dark">
                <div class="card-header bg-dark">
                    <h2 class="text-white text-center mb-1 mt-0">{{ sms_plan }}</h2>
                    <p class="text-white text-center">UGX {{ sms_plan.price|intcomma }} - {{ sms_plan.sms }} SMS @ {{ sms_plan.unit_cost }}</p>
                </div>
                <div class="card-body">
                    <form method="post" class="p-2">
                        {% csrf_token %}
                        <div class="form-group mb-3">
                            <label for="package_price">Amount:</label>
                            <input class="form-control" name="amount" value="{{ sms_plan.price }}" type="number" id="package_price" required readonly>
                        </div>

                        <div class="form-group mb-3">
                            <label for="mm_phone">Mobile Money Number:</label>
                            <input id="mm_phone" type="text" class="form-control" name="phone" required placeholder="Enter Mobile Money Number">
                        </div>

                        <div class="form-group row text-center mt-4 mb-4">
                            <div class="col-12">
                                <button class="btn btn-md btn-block btn-primary waves-effect waves-light" type="submit">
                                    Continue to pay
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- end card-body -->
            </div>
            <!-- end card -->

            <!-- end row -->

        </div>
        <!-- end col -->
    </div>
    <!-- end row-->
    {% block scripts %}
    {% endblock %}
{% endblock %}