<%- include('partials/_header/'); %>

<div class="cont-1300">
    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">Contratos</li>
        <li class="breadcrumb-item active" aria-current="page"><a href="/muestroroles">Roles</a></li>
        <li class="breadcrumb-item active" aria-current="page">Listado</li>
      </ol>
    </nav>
    <div class="listado-tabla">
      <div class="buscador">
        <form class="d-flex just-start" action="/buscoroles" method="get">    
          <input  name="rolbuscado" type="text" class="form-control" placeholder="Rol">
          <button type="submit" class="btn btn-danger">
              Buscar
          </button>
        </form>
        <a href="/altaroles" class="agregar"><button type="button" class="btn btn-dark"><i class="fa-solid fa-plus"></i>Agregar</button></a>
      </div>
      <div class="table-responsive">
        <table class="table table-hover">
            <thead>
              <tr>
                <th></th>
              
                <th scope="col" class="col-puesto">Roles</th>
                <th scope="col"></th>
                <!-- <th scope="col"></th> -->
              </tr>
            </thead>
            <tbody>
              <% if (data) { %>
                  <% for (var i=0; i < data.roles.length; i++) { %>
                  <tr>
                      <th scope="row">
                        <div class="img-cont" style="background-image: url(<%="/resources/img/usuario" %>)"></div>
                      </th>
                     
                      <td class="col-puesto"><%= data.roles[i].Descripcion_Roles %></td>
                      <td>  
                        
                        <a href="editarrol/<%= data.roles[i].Id_Roles %>"><i class="fa-solid fa-pencil"></i><span>Editar</span></a>
                    
                      </td>
                      <!-- <td>
                      </td> -->
                      </tr>
                  <% } %>
              <% } %>
        
          </tbody>
        
          </table>
      </div>
    </div>
  </div>
  <div style="text-align: center; " >    
    <a href="javascript:window.history.back();" style="height: 38px; width:230px;" class="btn btn-secondary"><img src="/resources/img/volverr.png" width="30" class="logo-desktop">  Volver</a>
  </div>
  
  
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
  
  <% if(typeof alert != "undefined") { %>
      <script>
          Swal.fire({
           title: '<%= alertTitle %>',
           text:'<%= alertMessage %>',
           icon: '<%= alertIcon %>',
           showConfirmButton: <%= showConfirmButton %> ,
           timer: <%= 1500 %>             
          }).then(()=>{
              window.location='<%= ruta %>' 
          })            
      </script>
  <% } %>
  
  
  <%- include('partials/_footer'); %>