{% 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/5dfd7c42f7.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: 650px;
        }
        body {
            background: black;
        }
        @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap');
        .bg {
            background: #151515;
            overflow-x: hidden;
            position: relative;
        }
        .logo{
            position: relative;
            z-index: 100;
        }
        .offer-tag {
            border: 1px solid White;
            background: #205057;
            padding: 5px 50px;
            margin-bottom: 10px;
            position: relative;
            z-index: 100;
        }
        .offer-tag h3 {
            font-size: 11px;
            text-align: center;
            line-height: 16px;
            color: #ebe2e2;
        }
        .text-cian {
            color: cyan;
        }
        .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;
        }
        .flexlist {
            display: flex;
            flex-wrap: wrap;
          }
          .flexlist li{
            margin-right: 10px;
          }
        .btn-shappire {
            background: #2f1875;
            color: #fff;
            border: solid 2px #2f1875;
            box-shadow: 2px 2px 8px #6562e96e;
            transition: all .3s ease-in-out;
        }
        .btn-shappire:hover {
            color: #fff;
        }
        .vh-70 {
            height: 70vh;
        }
        .vh-80 {
            height: 80vh;
        }
        .vh-90 {
            height: 90vh;
        }
        .absolute{
            position:absolute;
        }
        .backdrop {
            backdrop-filter: blur(4px);
        }    
        .list-none {
            list-style: none;
        } 
        .h-90 {
            height: 105%;
        }
        .h-30 {
            height: 35%;
        }
        .t-20 {
            top: -2%;
        }
        .blur {
            filter: blur(2px);
            opacity: .5;
            top: 0;
            left: 0;
        }
        .b-25px {
            border-radius: 25px;
            position: relative;
            z-index: 100;
        }
        .text-shadow{
            box-shadow: 1px 1px 12px #b5c3ed3d;
            position: relative;
            z-index: 100;
        }
        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;
        }
        .bg-shappire {
            background: #2f1875;
        }
        @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-8 offer-tag">
                        <h3>{% trans "ALL INTEGRATED RELEASE FOR YOU" %}</h3>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <img class="w-100 logo" src="https://get-stela.s3.amazonaws.com/img/Stela+White.png" alt="">
                    </div>
                </div>
                <div class="row justify-content-center mt-4">
                    <div class="col-lg-8">
                        <h1 class="oxanium fw-bold text-center fs-4 p-3 bg-shappire b-25px text-light text-shadow">{% trans "Project Credentials" %}</h1>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-12">
                        <img class="w-100 speace-top my-3 b-25px" src="https://get-stela.s3.amazonaws.com/img/globe.png" alt="">
                    </div>
                </div>
                <hr>
                <div class="row text-light align-items-center">
                    <h3 class="oxanium fw-bold text-center fs-6 py-3">{% trans "Development Report" %}</h3>
                    {% for item in order.stela_items.all %}
                        <h6 class="text-center">{{item.selection.integration.title}}</h3>
                        <h6 class="text-center">{{item.selection.domain}}</h3>
                        <div class="row">
                        <div class="col-8">
                            <h4 class="text-small my-2 text-center fw-bold">{% trans "Modules" %}</h4>
                        </div>
                        <div class="col-4">
                            <h4 class="text-small my-2 text-center fw-bold">{% trans "Template" %}</h4>
                        </div>
                        </div>
                        <div class="row align-items-center">
                        <div class="col-8">  
                            <ul class="no-list p-0 m-0">
                                {% for list in item.selection.parent.all %}
                                    <li class="text-small text-center">{{list.module}}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="col-4">
                            <h4 class="text-small my-2 text-center">{{item.selection.template.title}}</h4>
                        </div>
                        </div>
                    {% endfor %}
                </div>
                <hr>
                <div class="row text-light align-items-center">
                    <div class="col-12">
                        <h3 class="oxanium fw-bold text-center fs-6 py-3">{% trans "Stela Access Credentials" %}</h3>
                        {% for path in order.path.all %}
                            <ul>
                                <li>{% trans "Superuser" %}: {{path.superuser}}</li>
                                <li>{% trans "Password" %}: {{path.password}}</li>
                            </ul>
                        <div class="d-flex justify-content-center my-3">
                            <a class="btn btn-shappire" href="{{path.url}}">Stela {% trans "Login" %}</a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-sm-6 col-lg-5 text-xmall social-links">
                        <a href="https://www.instagram.com/usemmerut/" target="_blank"><i class="fa-brands fa-instagram text-light"></i></a>
                        <a href="https://www.linkedin.com/company/usemmerut/" target="_blank"><i class="fa-brands fa-linkedin text-light"></i></a>
                        <a href="https://www.tiktok.com/@emmerut.com?is_from_webapp=1&sender_device=pc" target="_blank"><i class="fa-brands fa-tiktok text-light"></i></a>
                        <a href="https://github.com/emmerut" target="_blank"><i class="fab fa-github text-light"></i></a>
                    </div>
                    <div class="col-sm-6 col-lg-7 text-light">
                        <p class="oxanium fw-bold text-justify text-xmall">Deere park cir, apt 306 Bartlett IL. US</p>
                    </div>
                </div>
                <div class="row  text-light">
                    <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>