{% extends 'stela_control/content/index.html' %}
{% load static %}
{% load hosts %}
{% load i18n %}
{% load tz %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load stelatags %}
{% block sidebar %}
{% endblock %}
{% block bsCall %}
{% endblock  %}
{% block title %}
    <h1 class="oxanium mx-4 text-dark pt-4 mb-0">{% trans "Staff" %}&nbsp; <i class="fa-solid fa-users"></i></h1>
{% endblock  %}
{% block content_section %}
        <section id="content">
            <div class="content-wrap d-flex align-items-center">
                <div class="container">
                    <div class="row justify-content-end mb-2">
                        <div class="col-xl-5 col-lg-8">
                            <h3 class="h1 fw-bold mb-3">Team Lists</h3>
                        </div>
                        <div class="col-xl-2 col-lg-4">
                            <button class="btn btn-sm btn-shappire" data-bs-toggle="modal" data-bs-target="#staff" onclick="loadStelaStaff('staff-form', 'checkStaff')"><i class="ri-add-circle-line mx-2 fs-5"></i> {% trans "Add Staff" %}</button>
                        </div>
                    </div>
                    <div class="vh-50">
                        {% block staff_content %}{% endblock  %} 
                    </div>
                </div>
            </div>
            <div class="modal fade" id="staff" 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 Staff" %}</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="staffForm">
                                <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="removeStaff" 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">
                                        <button onclick="removeStaffComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>                   
                </div>
                </div>
            </div>
        </section>
        <script src="{% static 'js/stela/contenido/site/staff/functions.js' %}"></script>
{% endblock  %}
{% block inside_scripts %}
{% endblock  %}
