{% extends 'stela_control/base_list.html' %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block bsCall %}

{% endblock  %}
{% block title %}
            <h1 class="oxanium mx-4 text-dark pt-3">{% trans "Services" %} <i class="bi-briefcase-fill"></i></h1>
{% endblock  %}
{% block side_title %}
            <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Inventory" %}</b></h3>
{% endblock  %}
{% block topButtons %}
    <div class="col-lg-3 col-md-6">
        <button type="button" class="btn btn-shappire btn-block px-3 mb-3 mx-2" data-bs-toggle="modal" data-bs-target="#inventoryFormData" onclick="loadDynamicFormset('BaseInventoryForm','ServicesForm','Inventory','Elements', 'Service', 'cke_base_content', 'cke_formset', '', '')">{% trans "New Service" %} <i class="fas fa-plus"></i></button>
    </div>
    <div class="col-lg-2 col-md-6">
        <button type="submit" data-bs-toggle="modal" data-bs-target="#removeObj" onclick="removeObjListRequest('Elements')" class="btn btn-danger btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
    </div>
{% endblock  %}
{% block listTitle %}
        <h3 class="text-center fw-bold oxanium fs-4 my-2">{% trans "Services List" %}</h3>
{% endblock  %}

{% block thead %}
    <th style="width: 5%;">Id</th>
    <th style="width: 35%;">{% trans "Title" %}</th>
    <th style="width: 20%;" class="text-center">{% trans "Status" %}</th>
    <th style="width: 20%;">{% trans "Image" %}</th>
    <th style="width: 15%;">{% trans "View" %}</th>
    <th style="width: 10%;" class="text-center"> <input type="checkbox"  name="" id="parent"></th>          
{% endblock  %} 
{% block tbody %}
    {% for item in stock %}
        <tr>
            <td>{{item.id}}</td>
            <td class=text-link>{{item.title}}</td>
            {% if item.status == 'Active' %}
                <td class="text-center">{% trans "Active" %} <i class="fa-solid fa-circle-check color-green"></i></td>
            {% else %}
                <td class="text-center">{% trans "Inactive" %} <i class="fa-solid fa-exclamation color-red"></i></td>
            {% endif %}
            <td>{{item.image_tag}}</td>
            <td class="my-1"><button class="btn btn-shappire" onclick="loadDynamicFormset('BaseInventoryForm','ServicesForm','Inventory','Elements', 'Service', 'cke_base_content', 'cke_formset', '', '','{{item.pk}}')" data-bs-toggle="modal" data-bs-target="#inventoryForm"><i class="fa-solid fa-right-to-bracket"></i></button></td>
            <td class="text-center check-product"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
        </tr>
    {% endfor %}
{% endblock  %}
{% block errors %}
{% endblock  %}
{% block extratable %}
        
{% endblock  %}
{% block modals %}
    <div class="modal fade" data-bs-focus="false" id="inventoryFormData" 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 method="post" enctype="multipart/form-data" id="inventoryForm">
                        <div class="row vh-50 align-items-center justify-content-center d-none" data-animate="fadeIn" id="spinnerLoad">
                            <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="contentData" class="fade-in d-none">
      
                        </div>
                        <div class="send-component d-none">
                            <div class="row justify-content-end p-3">
                                <div class="col-lg-3 col-6">
                                    <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 "Send" %} <i class="ri-send-plane-2-fill mx-2 text-light"></i></button>      
                                </div>
                            </div>
                        </div>
                    </form>
                </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">
                                <button onclick="removeObjComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>                   
        </div>
        </div>
    </div>
    <script src="https://stelacdn.s3.amazonaws.com/static/js/stela/inventory/functions.js"></script>   
{% endblock  %}


