{% extends "layout.html" %}
{% block title %}
Gestión de Catálogo de tipos de protección de interruptores  - Data Master
{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/DatamastersGral.css') }}">
<!-- css/Ventas/VentasEUA/datamaster/DMBreakers.css -->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" />

<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading">
        <h2 class="text-info ">Catálogo de tipos de protección de interruptores </h2>
      </div>

      <!-- Indicador de carga -->
      <div id="loading-indicator" style="display: none; text-align: center; margin-top: 10px;">
        <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
        <span>Cargando...</span>
      </div>
      <!-- Controles (Regresar y Agregar) -->
      <div class="d-flex justify-content-between mb-3">
          <!-- Botón Regresar -->
          <button 
              type="button" 
              class="btn btn-secondary dm-btn-Secundario" 
              onclick="history.back();">
              <i class="fas fa-arrow-left"></i> 
              Regresar
          </button>

         
      
          <!-- Contenedor para los botones Actualizar y Agregar -->
          
      </div>
      
      <!-- Tabla principal -->
      <table class="table table-striped dm-table" style="width:100%" id="BreakerProtectionTypeTable">
        <thead>
          <tr>
            <th class="dm-table">Item</th>
            <th class="dm-table">Descripción</th>
            <th class="dm-table">Tipo</th>
            <th class="dm-table">Ficha Tecnica</th>
          </tr>
          <tr class="dm-btn-text">
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="0" placeholder="Buscar Item"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="1" placeholder="Buscar Descripción"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="3" placeholder="Buscar Tipo"></th>
            <th></th> 
          </tr>
        </thead>
        <tbody id="TableBody">
        </tbody>
      </table>


    </div> <!-- Fin container -->
  </section>
</main>

<!-- Scripts de jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

<!-- Script principal de la página -->
<script src="{{ url_for('static', filename='js/Ventas/VentasEUA/DataMaster/DMBreakerProtectionType_catalog.js') }}"></script>
{% endblock %}