<%- include("template/cabecera.ejs", {tituloWeb:'Lista Ciudades'}) %>
  <div class="container">
   <h1 style="text-align:center ;">Lista de ciudades</h1>
   
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Localizacion</th>
                    <th scope="col">Descripción</th>
                    <th scope="col">Acción</th>
                </tr>
            </thead>
            <tbody>
      <% if (arrayCiudad.length> 0) { %>
          <!--Haremos el foreach para recorrer el array-->
          <% arrayCiudad.forEach(ciudad => { %>
              <tr>
                  <th scope="row"><%= ciudad.id %></th>
                  <td><%= ciudad.nombre %></td>
                  <td><%= ciudad.localizacion %></td>
                  <td><%= ciudad.descripcion %></td>
                  <td>
                    <a class="btn btn-warning btn-sm" href="ciudad/<%= ciudad.id %>">Editar/Eliminar</a>
                    </td>
              </tr>
          <% }) %>
      <% } %>
</tbody>

        </table>
        <a class="btn btn-success btn-block my-4" href="/ciudad/crearciudad">Añadir nueva ciudad</a>
        <a class="btn btn-danger btn-block my-4" href="/">Volver al Menu</a>
    </div>


<script>
            const btnEliminar = document.querySelector('.btn-danger')
            btnEliminar.addEventListener('click', async () => {
                console.log(btnEliminar.dataset.id)
                try {
                    // https://developer.mozilla.org/es/docs/Web/API/HTMLElement/dataset
                    const data = await fetch(`/ciudad/${btnEliminar.dataset.id}`, {
                        method: 'delete'
                    })
                    const res = await data.json()
                    console.log(res)
                    if (res.estado) {
                        window.location.href = '/ciudad'
                    } else {
                        console.log(res)
                    }
                } catch (error) {
                    console.log(error)
                }
            })
</script>

<%- include("template/footer.ejs") %>
