{% load i18n %}
{% load l10n %}
{% load crispy_forms_tags %}
{% load static %}
<div class="col-lg-6 col-md-6 col-12">
    <h3 class="oxanium fw-bold text-center fs-4 py-3">{% trans "Billing Recipt Preview" %}</h3> 
</div>
<div class="col-lg-2 col-md-3 col-6 dm-flex justify-content-center">
    <button class="btn btn-shappire" onclick="editRecipt({{recipt.pk}})">{% trans "Edit Recipt" %}</button>
</div>
<div class="col-lg-2 col-md-3 col-6 dm-flex justify-content-center">
    <input type="hidden" value="{{recipt.id}}" id="reciptid">
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#genAlert" onclick="generateInvoice({{recipt.pk}})">{% trans "Generate" %}</button>
</div>

<div id="recipt" class="container email-box min-vh-100 scroll-auto">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="row justify-content-center mt-3">
                <div class="col-2 p-0">
                    {% if site_data.company_public %}
                        <img class="w-100 banner" src="{{site_data.company_public.logo.url}}" alt="aqui esta la imagen">
                    {% else %}                  
                        <img class="w-100" src="https://539e79f747.imgdist.com/public/users/Integrators/BeeProAgency/1033577_1018641/mobile-stela.png" alt=""> 
                    {% endif %}
                </div>
                <div class="col-9">
                    {% if recipt.option == "budget_design" %}
                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                    {% elif recipt.option == "budget_marketing" %}
                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                    {% elif recipt.option == "budget_development" %}
                        <h1 class="text-danger text-right">{% trans "BUDGET" %}</h1>
                    {% else %}
                        <h1 class="text-danger text-right">{% trans "INVOICE" %}</h1>
                    {% endif %}
                </div>
            </div>
            <div class="row justify-content-center">
                <h1 class="text-capitalize oxanium fw-bold text-center fs-3 py-3">{{recipt.option}}</h1>
            </div>
            <div class="row justify-content-between">
                <div class="col-md-6 col-lg-7">
                    <ul class="list-none p-2">
                        <li>{% trans "Created" %}:<b class="small"> {{recipt.created}}</b></li>
                        <li>{% trans "Address" %}:<b class="fw-bold oxanium" > {{recipt.customer.address}}</b></li>
                    </ul>
                </div>
                <div class="col-md-6 col-lg-5">
                    <ul class="list-none p-2">
                        <li>{% trans "Client" %}:<b class="fw-bold oxanium"> {{recipt.customer.full_name}}</b></li>
                        <li>N°: <b class="btn btn-shappire btn-sm">{% trans "Not asigned" %}</b></li>
                    </ul>    
                </div>
            </div>
            <hr>
            <div class="row justify-content-center">
                <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Cost items" %}</h1>
            </div>
            <div class="row">
                <table id="example" class="compact table table-borderless table-hover">
                    <thead>
                        <tr class="text-center">
                            <th style="width: 70%;"></th>
                            <th style="width: 30%;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if recipt.service_recipt.all %}
                            {% for item in recipt.service_recipt.all %}
                                {% if item.qty > 1 %}
                                    <tr>
                                        <td class="text-center">{{item.field}} x {{item.qty}} {% trans "units" %}</td>
                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td class="text-center">{{item.field}}</td>
                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                    </tr>
                                {% endif %}
                            {% endfor %} 
                        {% elif recipt.product_recipt.all %}
                            {% for item in recipt.product_recipt.all %}
                                {% if item.qty > 1 %}
                                    <tr>
                                        <td class="text-center">{{item.field}} x {{item.qty}} {% trans "units" %}</td>
                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td class="text-center">{{item.field}}</td>
                                        <td class="text-center oxanium"> <b>${{item.amount}}</b></td>
                                    </tr>
                                {% endif %}
                            {% endfor %} 
                        {% endif %}                           
                    </tbody>
                </table>
            </div>
            <hr>
            {% if recipt.custom_discounts.all %}            
                <div class="row justify-content-center">
                    <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Discounts" %}</h1>
                </div>
                <div class="row">
                    <table id="example" class="compact table table-borderless table-hover">
                        <thead>
                            <tr class="text-center">
                                <th style="width: 70%;"></th>
                                <th style="width: 30%;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in recipt.custom_discounts.all %}
                            <tr>
                                <td class="text-center">{{item.field}}</td>
                                <td class="text-center oxanium"> <b>-${{item.amount}}</b></td>
                            </tr>
                            {% endfor %} 
                        </tbody>
                    </table>
                </div>
                <hr>
            {% else %}
                {% if recipt.discounts.all  %}
                    <div class="row justify-content-center">
                        <h1 class="text-capitalize oxanium fw-bold text-center fs-5 py-3">{% trans "Discounts" %}</h1>
                    </div>
                    <div class="row">
                        <table id="example" class="compact table table-borderless table-hover">
                            <thead>
                                <tr class="text-center">
                                    <th style="width: 70%;"></th>
                                    <th style="width: 30%;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in recipt.discounts.all %}
                                <tr>
                                    <td class="text-center">{{item.field}}</td>
                                    <td class="text-center oxanium"> <b>-${{item.amount}}</b></td>
                                </tr>
                                {% endfor %} 
                            </tbody>
                        </table>
                    </div>
                    <hr>
                {% endif %}
            {% endif %}
            <div class="row">
                <table id="example" class="compact table table-borderless table-hover">
                    <thead>
                        <tr class="text-center">
                            <th style="width: 70%;"></th>
                            <th style="width: 30%;"></th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>                 
                                <td class="text-right">{% trans "Subtotal" %}:</td>
                                <td class="text-center oxanium"> <b>${{recipt.amount}}</b></td>
                            </tr>
                            {% if recipt.custom_discounts.all %}
                                <tr>
                                    <td class="text-right">{% trans "Discounts" %}:</td>
                                    <td class="text-center oxanium"> <b>-${{recipt.discount}}</b></td>
                                </tr>
                            {% elif recipt.discounts.all %}
                                <tr>
                                    <td class="text-right">{% trans "Discounts" %}:</td>
                                    <td class="text-center oxanium"> <b>-${{recipt.discount}}</b></td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-right">{% trans "Discounts" %}:</td>
                                    <td class="text-center oxanium"> <b>-------</b></td>
                                </tr>
                            {% endif %}
                            {% if recipt.option == 'Budget' %}
                            {% else %}
                                <tr>
                                    <td class="text-right">{% trans "Tax" %}:</td>
                                    <td class="text-center oxanium"> <b>${{recipt.tax}}</b></td>
                                </tr>
                            {% endif %}
                            <tr>
                                <td class="text-right">{% trans "Total Amount" %}:</td>
                                <td class="text-center oxanium"> <b>${{total}}</b></td>
                            </tr>
                    </tbody>
                </table>
            </div>
            {% if recipt.recipt.report %}
                <div class="row report">
                    <h1 class="text-capitalize oxanium fw-bold fs-5 py-3 mx-2">{% trans "Service Report" %}:</h1>
                    {{recipt.recipt.report|safe}}          
                </div>    
                <div class="text-terms">
                    {% if recipt.recipt.option == 'Monthly charge' %}
                    {% for get in site_data.admin.site_docs.all %}
                    
                            {% if get.section == "monthly_terms" %}
                                
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                    {% endfor %}
                    {% elif recipt.recipt.option == 'Billing receipt' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "billing_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_design' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_design_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_marketing' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_marketing_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_development' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_development_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}                                    
                </div>
            {% else %}
                <div class="text-terms">
                    {% if recipt.recipt.option == 'Monthly charge' %}
                    {% for get in site_data.admin.site_docs.all %}                                   
                            {% if get.section == "monthly_terms" %}                                           
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                    {% endfor %}
                    {% elif recipt.recipt.option == 'Billing receipt' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "billing_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_design' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_design_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_marketing' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_marketing_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% elif recipt.recipt.option == 'budget_development' %}
                        {% for get in site_data.admin.site_docs.all %}
                            {% if get.section == "budget_development_terms" %}
                                {% if get.lang == "en" %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% elif get.lang == "es-ve"  %}
                                    <h1 class="oxanium fw-bold text-center py-3 fs-5">{{get.title}} ({{get.section}})</h1>
                                    {% for row in get.content.all %}
                                        <h3 class="fs-4 fw-bold py-4" id="doc-{{row.id}}">{{row.clause}}</h3>
                                        <script>
                                            function scrollToElement{{row.id}}() {
                                                var elemento = document.getElementById("doc-{{row.id}}");
                                                var cajaHija = document.querySelector(".doc-cage");
                                                cajaHija.scrollTop = elemento.offsetTop;
                                                }
                                        </script>
                                        {{row.clause_content|safe}}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}                                    
                </div>
            {% endif %}
            <div class="row">
                <div class="col-12 footer-content">
                    <div class="row">
                            <div class="col-lg-8 text-dark text-justify">
                                {% if site_data.company_public %}
                                    <h3 class="small text-dark oxanium m-0"><i class="fa-solid fa-location-dot mx-1"></i>{{site_data.company_public.address|safe}}</h3>
                                    <h3 class="small text-dark oxanium">{{site_data.company_public.city_legal}}</h3>
                                    <h3 class="small text-dark oxanium"><i class="fa-brands fa-whatsapp mx-1"></i>{{site_data.company_public.phone}}</h3> 
                                {% else %}
                                    <h3 class="small text-dark oxanium"><i class="fa-solid fa-location-dot mx-1"></i> Deere Park Cir, Apt 306, Bartlett IL United States</h3>
                                    <h3 class="small text-dark oxanium"><i class="fa-brands fa-whatsapp mx-1"></i> +1 (619) 432-0711</h3>
                                {% endif %}
                            </div>
                        <div class="col-lg-4">
                            <div class="row">
                                <ul class="d-flex list-none fs-3 p-0 justify-content-evenly m-0">
                                    {% for get in site_data.company_public.socialmedia.alll %}
                                        {% if get.social == "Instagram" %}
                                            <li>
                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-instagram mx-1"></i></a>    
                                            </li>
                                        {% elif get.social == "Tiktok" %}
                                            <li>
                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-tiktok mx-1"></i></a>    
                                            </li>
                                        {% elif get.social == "Facebook" %}
                                            <li>
                                                <a href="{{get.url}}}" target=_blank><i class="fa-brands fa-facebook mx-1"></i></a>    
                                            </li>
                                        {% elif get.social == "Linkedin" %}
                                            <li>
                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-linkedin mx-1"></i></a>    
                                            </li>
                                        {% elif get.social == "Youtube" %}
                                            <li>
                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-youtube mx-1"></i></a>    
                                            </li>
                                        {% elif get.social == "X" %}
                                            <li>
                                                <a href="{{get.url}}" target=_blank><i class="fa-brands fa-twitter mx-1"></i></a>    
                                            </li>
                                        {% endif %}      
                                    {% empty %}
                                        <li>
                                            <a href="https://www.instagram.com/usemmerut/" target=_blank><i class="fa-brands fa-instagram mx-1"></i></a>    
                                        </li>
                                        <li>
                                            <a href="https://www.linkedin.com/company/usemmerut/" target=_blank><i class="fa-brands fa-linkedin mx-1"></i></a>
                                        </li>
                                        <li>
                                            <a href="https://github.com/emmerut" target=_blank><i class="fa-brands fa-github mx-1"></i></a>
                                        </li>
                                        <li>
                                            <a href="https://www.tiktok.com/@emmerut.com?is_from_webapp=1&sender_device=pc" target=_blank><i class="fa-brands fa-tiktok mx-1"></i></a>
                                        </li>
                                    {% endfor %}
                                </ul>
                                    {% if site_data.company_public %}
                                        <a href="{{site_data.company_public.url}}" class="fs-6 text-dark oxanium decor-none text-center">{{site_data.company_public.web}}</a>  
                                    {% else %} 
                                        <a href="https://emmerut.com" class="fs-4 text-dark oxanium decor-none text-center">emmerut.com</a>
                                    {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <h1 class="text-dark text-center fs-5 mb-5">&#169; <span class="oxanium">Stela Control Dynamic | 2023</span></h1>
            </div>
        </div>
    </div>
</div>