<div class="w3-row w3-padding-64" id="menu">
    <div class="w3-col l6 w3-padding-large">
     <img src="{{ libro.getWebPath() }}" class="w3-round w3-image w3-opacity-min" alt="Menu" style="width:90%">
    </div>
    <div class="w3-col l6 w3-padding-large">

     <div id="h1titulo">
        <h1>DETALLES</h1>
      </div>
      <div id="datoslibro">
        <h4>Título</h4>
        <p class="w3-text-grey">{{libro.Titulo}}</p><br>

        <h4>Editorial</h4>
        <p class="w3-text-grey">{{libro.Editorial}}</p><br>

        <h4>Número de páginas</h4>
        <p class="w3-text-grey">{{libro.Numeropaginas}}</p><br>

        <h4>Año Edición</h4>
        <p class="w3-text-grey">{{libro.Anoedicion}}</p><br>

        <h4>Descripción</h4>
        <p class="w3-text-grey">{{libro.Descripcion}}</p><br>

        <h4>Situacion</h4>
        <p class="w3-text-grey" id="situacion">{{libro.Situacion}}</p><br>
      </div>
    </div>
     <a class="btn btn-secondary btn-sm" id="btnreservar" href="#">Reservar</a></div>

<script>
  function menu() {
    var dato=document.getElementById("situacion").value;

      if(dato=='Disponible') {
          $('#btnreservar').attr('disabled', false);
      } else {
          $('#btnreservar').attr('disabled', true);
      } };
</script>