{% load i18n %}
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">

<head>
	<title></title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a0376f5300.js" crossorigin="anonymous"></script>
	<!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
	<style>
		.email-box {
            max-width: 600px;
        }
        @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap');
        .bg {
            background: #f9f9f9;
            overflow-x: hidden;
        }
        .vh-10 {
            height: 10vh;
        }
        .vh-20 {
            height: 20vh;
        }
        .oxanium {
            font-family: 'Oxanium', cursive;
        }
        .vh-30 {
            height: 30vh;
        }
        .vh-40 {
            height: 40vh;
        }
        .vh-50 {
            height: 50vh;
        }
        .vh-60 {
            height: 60vh;
        }
        .vh-70 {
            height: 70vh;
        }
        .vh-80 {
            height: 80vh;
        }
        .vh-90 {
            height: 90vh;
        }
        .absolute{
            position:absolute;
        }
        .backdrop {
            backdrop-filter: blur(4px);
        }     
        .h-90 {
            height: 105%;
        }
        .h-30 {
            height: 35%;
        }
        .t-20 {
            top: -2%;
        }
        .blur {
            filter: blur(4px)
        }
        .b-25px {
            border-radius: 25px;
            box-shadow: 1px 1px 12px #b5c3ed3d;
        }
        hr {
            margin-top: 1rem;
            margin-bottom: 0rem;
            border: 0;
            border-top: 3px dashed black;
        }
        .social-links a {
            font-size: 24px;
            padding: 0 10px;
            line-height: 38px;
        }
        @media only screen and (min-width: 360px) and (max-width: 500px) {
            .elipse-mobile {
                position: relative;
                left: -90px;
                top:5%;
            }
            .t-20 {
                top: 7%;
                left: 16%;
            }
            .social-links a {
                font-size: 17px;
            }
            .h-30 {
                height: 24%;
            }
            .text-xmall {
                font-size: 12px !important;
                text-align: center !important;
            }
        }
        @media only screen and (min-width: 360px) and (max-width: 1000px) {
            .speace-top {
                margin-top: 50px
            }
        }
        @media only screen and (min-width: 500px) and (max-width: 1000px) {
            .h-30 {
                height: 36%;
            } 
            .t-20 {
                top:0%;
            }
            .h-90 {
                height: 120%;
            }
        }
	</style>
</head>

<body>
    <div class="container email-box min-vh-100">
        <div class="row bg justify-content-center">
            <div class="col-12">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <img class="absolute h-30 t-20" src="https://get-stela.s3.amazonaws.com/img/logo.png" alt="">
                        <img class="h-90 elipse-mobile blur" src="https://get-stela.s3.amazonaws.com/img/header.png" alt="">
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-6">
                        <img class="w-100 speace-top" src="https://get-stela.s3.amazonaws.com/img/charges.png" alt="">
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <h1 class="oxanium fw-bold text-center fs-4 p-3 bg-dark b-25px text-light">{% trans "Billing Notification" %}</h1>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-12">
                        <h3 class="oxanium fw-bold text-center fs-6 py-3">{% trans "Billing details" %}</h3>
                        <ul class="oxanium">

                            <li>{{charge}}: ${{amount}}</li>

                        </ul>
                    </div>
                </div>
                <hr>
                <div class="row justify-content-center mb-3">
                    <div class="col-lg-9 mt-2">
                       <p class="oxanium fw-bold text-center text-xmall m-0">{% trans "This process will be effective within the next 24 hours." %}</p>
                    </div>
                    <div class="col-8 d-flex  justify-content-center">
                        <small class="oxanium fw-bold text-center">{% trans "get all info in" %} <a href="">{{stela_data.get_domain}}/docs/payments/terms</a></small>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-5 text-xmall social-links">
                        <a href=""><i class="fa-brands fa-instagram text-dark"></i></a>
                        <a href=""><i class="fa-brands fa-square-facebook text-dark"></i></a>
                        <a href=""><i class="fa-brands fa-tiktok text-dark"></i></a>
                        <a href=""><i class="fa-brands fa-youtube text-dark"></i></a>
                    </div>
                    <div class="col-sm-6 col-lg-7">
                        <p class="oxanium fw-bold text-justify text-xmall">Deere park cir, apt 306 Bartlett IL. US</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p class="text-center py-3">Stela Control Dynamic | Emmerut LLC &copy; {{stela_data.current_year}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>