{% extends 'stela_control/index.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load static %}
{% load hosts %}
{% load stelatags %}
{% load humanize %}
{% block section %}
    {% block title %}
    <h1 class="oxanium mx-4 text-dark pt-4 mb-0">{% trans "Custom your website" %}&nbsp; <i class="fa-solid fa-sliders"></i></h1>
    {% endblock  %}
    {% block side_title %}
    <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Content" %}</b></h3>
    {% endblock  %}

    <div id="wrapper">
        {% block content_section %}
                
        {% endblock  %}
        {% block modals %}
            <div class="modal fade" data-bs-focus="false" id="FormSender" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title oxanium" id="staticBackdropLabel">{% trans "New Service" %}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body mid-modal-scroll form-cage d-none">  
                            <form method="post" enctype="multipart/form-data" id="FormData">
                                <div id="formContent">
                                    
                                    
                                </div> 
                                <div class="row justify-content-end">
                                    <div class="col-lg-3">
                                        <button type="submit" class="form-btn-main btn btn-block btn-shappire oxanium form-btn-main d-flex justify-content-center align-items-center">{% trans "Send" %} <i class='bx bxs-send fs-4'></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>    
                        <div class="preload-cage-sendgrid form-cage vh-50 fade-in">
                            <h3 class="text-preload-sendgrid fs-6">{% trans "Proccess data, please wait" %}...</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade max-overlay" id="removeObj" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="mb-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-12"> 
                                <h3 class="text-center alert-title oxanium">{% trans "Are you sure?" %}</h3>
                                <div class="iconhigh">
                                    <div id="anicon">

                                    </div> 
                                </div>
                                <div id="contentAlert">
                                    <p class="text-center text-dark">{% trans "This option cannot be reversed" %}.</p>   
                                    <div class="d-flex justify-content-center">
                                        <input type="hidden" id="removeData">
                                        <input type="hidden" id="modelParent">
                                        <button onclick="removeContentComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>                   
                </div>
                </div>
            </div> 
        {% endblock  %}
    </div>
{% endblock %}