{% extends "stela_control/content/main/index.html" %}
{% load i18n %}
{% load tz %}
{% load humanize %}
{% load crispy_forms_tags %}
{% load static %}
{% block body_class %}side-header{% endblock  %}
{% block template_content %}
    <header id="header">
        <div id="header-wrap">
            <div class="container">
                <div class="header-row justify-content-between">

                    <!-- Logo
                    ============================================= -->
                    <div id="logo">
                        <a href="index.html">
                            {% block logo_header %}
                                
                            {% endblock  %}
                        </a>
                    </div><!-- #logo end -->

                    <div class="primary-menu-trigger">
                        <button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
                            <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
                        </button>
                    </div>

                    <div class="header-misc d-none d-sm-block">
                        <div class="d-flex my-lg-3">
                            <a href="#" class="social-icon si-small bg-transparent h-bg-facebook">
                                <i class="fa-brands fa-facebook-f"></i>
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>

                            <a href="#" class="social-icon si-small bg-transparent h-bg-x-twitter">
                                <i class="fa-brands fa-x-twitter"></i>
                                <i class="fa-brands fa-x-twitter"></i>
                            </a>

                            <a href="#" class="social-icon si-small bg-transparent h-bg-google">
                                <i class="fa-brands fa-google"></i>
                                <i class="fa-brands fa-google"></i>
                            </a>

                            <a href="#" class="social-icon si-small bg-transparent h-bg-pinterest">
                                <i class="fa-brands fa-pinterest-p"></i>
                                <i class="fa-brands fa-pinterest-p"></i>
                            </a>

                            <a href="#" class="social-icon si-small bg-transparent h-bg-github">
                                <i class="fa-brands fa-github"></i>
                                <i class="fa-brands fa-github"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Primary Navigation
                    ============================================= -->
                    <nav class="primary-menu">

                        <ul class="menu-container">
                            <li class="menu-item"><a class="menu-link" href="index.html"><div>{% trans "Home" %}</div></a></li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Contenido 1</div></a>
                                <ul class="sub-menu-container">
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-right-sidebar.html"><div>Right Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-left-sidebar.html"><div>Left Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline.html"><div>Full Width</div></a></li>
                                </ul>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Contenido 2</div></a>
                                <ul class="sub-menu-container">
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-right-sidebar.html"><div>Right Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-left-sidebar.html"><div>Left Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline.html"><div>Full Width</div></a></li>
                                </ul>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Contenido 3</div></a>
                                <ul class="sub-menu-container">
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-right-sidebar.html"><div>Right Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-left-sidebar.html"><div>Left Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline.html"><div>Full Width</div></a></li>
                                </ul>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Contenido 4</div></a>
                                <ul class="sub-menu-container">
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-right-sidebar.html"><div>Right Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline-left-sidebar.html"><div>Left Sidebar</div></a></li>
                                    <li class="menu-item"><a class="menu-link" href="blog-timeline.html"><div>Full Width</div></a></li>
                                </ul>
                            </li>
                            <button class="btn btn-block btn-shappire my-2" onclick="loadFormDocs('checkDocs', 'cke_terms')" data-bs-toggle="modal" data-bs-target="#clause">{% trans "Load Content" %}</button>
                            <button class="btn btn-block btn-shappire my-2" onclick="loadFormDocs('checkFAQ', 'cke_faq')" data-bs-toggle="modal" data-bs-target="#clause">{% trans "Load FAQ" %}</button>
                        </ul>
                        
                    </nav><!-- #primary-menu end -->

                </div>
            </div>
        </div>
        <div class="header-wrap-clone"></div>
    </header><!-- #header end -->

    <section class="inside-content">
        <div class="section-elements">
            {% block legal_content %}{% endblock  %}
        </div>
    </section>

    <div class="modal fade" id="clause" 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 Doc" %}</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 action="" method="post" enctype="multipart/form-data" id="formDocData">
                        <div id="formContent">
                            
                            
                        </div> 
                        <div class="row justify-content-end">
                            <div class="col-lg-3">
                                <button type="submit" class="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 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="removeDocs" 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="anicon2">

                            </div> 
                        </div>
                        <div id="contentAlert2">
                            <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">
                                <button onclick="removeObjComplete2()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>                   
        </div>
        </div>
    </div>
{% endblock  %}
{% block addscript %}
    <script src="{% static 'js/stela/contenido/site/docs/functions.js' %}"></script>
{% endblock  %}
{% block inside_scripts %}
{% endblock  %}