{% load static %}
{% load i18n %}
{% load hosts %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% block meta %}
{% endblock  %}
<title>{% block head_title %}{% endblock %}</title>
<!-- Favicon -->
{% block favicon %}
    <link rel="shortcut icon" href="https://stelacdn.s3.amazonaws.com/static/img/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" href="https://stelacdn.s3.amazonaws.com/static/img/favicon.png" type="image/x-icon">
{% endblock  %}
<!-- Libraries -->
{% block base_styles %}
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Raleway:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@600&family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">

    <!-- Core Style -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/style.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/sliderStyles.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/basicStyles.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/handlers.css">

    <!-- Font Icons -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/font-icons.css">

    <!-- SLIDER REVOLUTION 5.x CSS SETTINGS -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/settings.css" media="screen">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/layers.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/navigation.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/addons/revolution.addon.liquideffect.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/addons/revolution.addon.revealer.css"> 
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/addons/revolution.addon.revealer.preloaders.css"> 
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/css/addons/revolution.addon.particles.css"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/components/bs-filestyle.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.min.css" integrity="sha512-13RM4Q4wPLiDEFNxKQbZMoyM3qR3eIsTYoXy6hJlqWmPzFCBLyxG3LGx/48N+sTcLxvN3IoThkZYxo3yuaGSvw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" integrity="sha512-jU/7UFiaW5UBGODEopEqnbIAHOI8fO6T99m7Tsmqs2gkdujByJfkCbbfPSN4Wlqlb9TGnsuC0YgUgWkRBK7B9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.lineicons.com/3.0/lineicons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/fonts/fonts.css">
    <!-- Estilos -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/stripe.css"> 
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/animated.css"> 
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/owl.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/handlers.css" class="template-customizer-core-css"/>
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/vendor/css/core.css" class="template-customizer-core-css"/>
    <!-- Plugins/Components CSS -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/components/bs-switches.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/components/radio-checkbox.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/components/bs-select.css">
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/swiper.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://stelacdn.s3.amazonaws.com/static/css/canvas/custom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.0/lottie.min.js" integrity="sha512-NbKgMv0o4r7P6qWzHvk9L4S7rQzZaccsgD52bffgInf0OCdDg45Ta8uBBKxAbIutsrM5TqB88DYp1EP0NePcdg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {% block anicons %}
        <script>
            const checkmark = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/checkmark.json"
            const warning = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/warningv1.json"
        </script>
    {% endblock  %}
    <script>
        const textEmptyTable = '{% trans "No Data" %}'
        const textLoadRecords = '{% trans "Loading" %}'
        const textProcesingTable = '{% trans "Processing" %}'
        const landingIcon = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/animation_lnfkqd6o.json" 
        const docsIcon = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/animation_lnfiiaxt.json"
        const blogIcon = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/animation_lnfilkjt.json"
        const lobbyIcon = "https://stelacdn.s3.amazonaws.com/static/js/animateicons/animation_lnfimkkd.json"
        const removeSuccessTitle = '{% trans "Remove completed successfully" %}'
        var CSRF_TOKEN = '{{ csrf_token }}';
        const pHPost = '{% trans "Write here..." %}';
        const textSubmit = '{% trans "Send" %} <i class="fa-solid fa-paper-plane mx-2"></i>';
        const SignUpText = '{% trans "Sign up" %}'
        const loginText = '{% trans "Login" %}'
        const recoveryText = '{% trans "Password Reset" %}'
        const saveText = '{% trans "Save" %}'
        const dateText = '{% trans "Select a date" %}'
        const submitCommentText = '{% trans "Submit Comment" %}'
    </script>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://stelacdn.s3.amazonaws.com/static/ckeditor/build/ckeditor.js"></script>
    <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/components/bs-datatable.js"></script>
{% endblock  %}
{% block base_style %}

{% endblock  %}
<!-- Scripts -->
{% block styles %}
{% endblock %}
{% block variables %}
{% endblock  %}
</head>
  <body class="stretched overflow-x-hidden {% block body_class %}{% endblock  %}">
    <div id="wrapper">
        {% block language %}
        {% endblock  %}
        {% block alerts %}
            <div class="alert alert-success alert-dismissible fade-in show d-none" role="alert" id="IGAlert">
                <div class="inner-message">
                    
                </div>  
                <button type="button" class="close" onclick="closeAlertSuccess()">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="alert alert-danger alert-dismissible fade-in show d-none" role="alert" id="IGAlertDanger">
                <div class="inner-message-danger">
                    
                </div>  
                <button type="button" class="close" onclick="closeAlertDanger()">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endblock  %}
        {% block creator %}
            <div id="contentLoader" class="content-sidebar">
                <div class="row align-items-center px-3 py-4 pointer" onclick="closeContentSidebar()">
                    <div class="col-lg-1 col-2">
                        <i id="CSIcon" class="fa-solid fa-arrow-right-from-bracket fs-3"></i>
                    </div>
                    <div class="col-lg-6 col-10">
                        <p class="my-auto oxanium"> Close Stela Creator</p>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <form class="w-100 fade-in" action="" method="post" id="contentForm" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="row vh-50 align-items-center justify-content-center d-none" data-animate="fadeIn" id="spinnerLoadCreator">
                                    <div class="css3-spinner" style="--cnvs-loader-color:var(--cnvs-themecolor);">
                                        <div class="css3-spinner-ball-rotate">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                                <div id="contentDataSidebar" class="fade-in d-none">

                                </div>
                                <div class="row justify-content-end p-3">
                                    <div class="col-lg-5">
                                        <button type="submit" id="btn-footer" name="btn-footer" class="btn btn-shappire btn-block d-flex justify-content-center align-items-center oxanium form-btn">{% trans "Save" %} <i class="ri-send-plane-2-fill mx-2 text-light"></i></button>      
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        {% endblock  %}
        {% block fileLoader %}
            <div class="stela-progress-bar p-3 wow slideInDown d-none" id="loadBarContainer" data-wow-duration="0.75s" data-wow-delay=".5s">
                <div class="d-flex align-items-center proccess-text">
                <p class="text-dark p-0 mb-0 mx-2">{% trans "Don't close connection" %}...</p>
                <p class="text-dark m-0 p-0">{% trans "Uploading" %}</p>
                <i class='bx bxs-cloud-upload fs-3 mx-2'></i>
                </div>
                <div class="d-flex align-items-center complete-text d-none">
                <p class="text-dark p-0 mb-0 mx-2">{% trans "Complete" %}</p>
                <i class='bx bx-check-circle text-success'></i>
                </div>
                <div class="progress mt-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="loadBar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        {% endblock  %}
        {% block media_overlay %}
            <div class="overlay">
                <div class="overlay-content">
                    <span class="close">&times;</span>
                </div>
            </div>
        {% endblock  %}
        {% block preloader %}
            <div class="preload">
                <h1 class="text-preload">{% trans "Loading" %}...</h1>
            </div>
        {% endblock  %}
        {% block body %}
        {% endblock %}
    </div>
    {% block libraries %}
        <!-- CORE LIB JS  -->
        <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>  
        <script>
            var tpj=jQuery;
            var id = [];
            const alertSuccess = document.getElementById('IGAlert');
            const alertDanger = document.getElementById('IGAlertDanger');
            const innerDanger = document.querySelector('.inner-message-danger');
            const innerSuccess = document.querySelector('.inner-message'); 
            const formCage = document.querySelector('.form-cage');
            const preloadCage = document.querySelector('.preload-cage-sidebar');
            const preloadCage2 = document.querySelector('.preload-cage-sendgrid');
            const contentModal = document.querySelector('.content-data');
            const formContent = document.getElementById('formContent');
            const contentData = document.querySelector('#contentData');
            const contentDataCreator = document.querySelector('#contentDataSidebar');
            const spinnerLoad = document.querySelector('#spinnerLoad');
            const sendComponent = document.querySelector('.send-component');
            const spinnerLoadCreator = document.querySelector('#spinnerLoadCreator');
            const loadBarContainer = document.querySelector('#loadBarContainer')
            const contentSidebar = document.querySelector('.content-sidebar');
            const alertIconRender = document.getElementById('alericonRender');
            const billingTable = document.querySelector('.billing-table')
            const budgetTable = document.querySelector('.budget-table')
            const budgetBtn = document.querySelector('.budget-btn')
            const billingBtn = document.querySelector('.billing-btn')
            const newsletterBtn = document.querySelector('.newsletter-btn')
            var progressBarContainer = document.getElementById('loadBarContainer');
            var progressBar = document.getElementById('loadBar');
            const FormText = "{% trans 'Send' %} <i class='bx bxs-send fs-4'></i>";
            const pwText = '{% trans "Password Reset" %} <i class="bx bxs-send fs-4"></i>';
            const SendMessageText = '{% trans "Send Message" %}';
            const previewBtn = '{% trans "Preview" %} <i class="uil uil-bill mx-2"></i>';
            const newsletterBtnText = '{% trans "Subscribe Now" %}';
            const renderHandler = 'https://stelacdn.s3.amazonaws.com/static/js/renderHandler.js';
        </script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/checkInputs.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/handlerFunctions.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/stela/dynamicForms.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/js/handlerBlog.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/plugins.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/functions.bundle.js"></script>
        <!-- Charts JS
        ============================================= -->
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/chart.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/chart-utils.js"></script>
        <!-- Select Splitter Plugin -->
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/components/selectsplitter.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/components/bs-select.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/components/bs-filestyle.js"></script> 
        <!-- TinyMCE Plugin -->
        <script src="https://stelacdn.s3.amazonaws.com/static/js/canvas/components/tinymce/tinymce.min.js"></script> 
        <!-- SLIDER REVOLUTION 5.x SCRIPTS  -->
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/addons/revolution.addon.revealer.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/addons/revolution.addon.particles.min.js"></script>
        <!-- ADD-ONS JS FILES -->
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/pixi.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/addons/revolution.addon.liquideffect.min.js"></script>
        <!-- SLIDER REVOLUTION EXTENSIONS  -->
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.carousel.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.video.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.actions.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.migration.min.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.navigation.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/canvas/include/rs-plugin/js/extensions/revolution.extension.parallax.min.js"></script>
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
        
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <script src="https://unpkg.com/tippy.js@6"></script>
        <script>
            const appointmenText = '{% trans "Get appointment" %}';
            function closeAlertSuccess() {
                alertSuccess.classList.add('d-none')
            }
            
            function closeAlertDanger() {
                alertDanger.classList.add('d-none')
            }
            function refresh() {
                window.location.reload()
            }

            function siteCredits() {
            
                let mainTextStyle = 'color: skyblue; font-size: 16px';
                let secondaryTextStyle = 'color: skyblue; font-size: 14px';
                let newLineStyle = 'color: orangered; font-size: 14px';
                let currentYear = new Date().getFullYear();
        
                console.log('%cDeveloped in Python ❤️', mainTextStyle);
                console.log('%cFrameworks (Django - React)', mainTextStyle);
                console.log('%cCRM Stela Ultimate ver 0.1.3', secondaryTextStyle);
            }
            
            // Calling the function
            siteCredits();
            
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
        <script src="https://kit.fontawesome.com/5dfd7c42f7.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
        <script src="https://unpkg.com/htmx.org@1.7.0"></script>
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://unpkg.com/scrollreveal@4"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/site/owl-carousel.js"></script>
        <script src="https://stelacdn.s3.amazonaws.com/static/js/site/animation.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/js/site/imagesloaded.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/js/bootstrap-select.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/auth/js/main.js"></script> 
        <script src="https://stelacdn.s3.amazonaws.com/static/js/shield.js"></script> 
        {% block inside_scripts %}{% endblock  %}
    {% endblock  %}
  </body>
</html>
