<div class="container p-0" id="body-container">
  <br>
  <p>Estos <b>(\{{servs.length}})</b> servicios no están georreferenciados</p>

  <table class="table table-sm table-hover table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Servicio</th>
        <th scope="col">Cliente</th>
        <th scope="col">Obra</th>
        <th scope="col">Ruta</th>
        <th scope="col">Dirección</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(serv, index) in servs">
        <th class="smal" scope="row">\{{serv.idprodutrans}}</th>
        <td class="smal">\{{serv.tiposervicio}}</td>
        <td class="smal">\{{serv.cliente}}</td>
        <td class="smal">\{{serv.obra}}</td>
        <td class="smal">\{{serv.nomruta}}</td>
        <td class="smal">\{{serv.direccion}}</td>
        <td>
          <button type="button" class="btn btn-info btn-sm m-0" @click="load(serv)"
                  data-toggle="modal" data-target="#chooseLocation">
            Leer
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Modal -->
  <div class="modal fade bd-example-modal-lg" id="chooseLocation" tabindex="-1" 
       role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="width:100%; margin:0px auto; margin-top:10%;">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title" id="exampleModalLabel">Seleccione Ubicación de <b>\{{transid}}</b></h6>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="width:100%; height:350px; margin:0px auto;">
          <div id="map"></div>
          <pre id="coordinates" class="coordinates"></pre>
        </div>
        <div class="modal-footer">
          <h6><b>Dirección:</b> \{{direccion}}</h6>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="geo/js/js.js"> </script>