book-list.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="googleio-books-service.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">

<link rel="import" href="book-card.html">


<polymer-element name="book-list">
  <template>
  	<style>
	    :host {
	      display: block;
	      width: 100%;
	    }
	    book-card {
	      margin-bottom: 30px;
	    }

	    paper-input {
	    	width: 50%;
	    	margin-top: 10px;
	    }
  	</style>

  	<googleio-books-service query="{{query}}" books="{{books}}">
    </googleio-books-service>
  	
  	<div layout vertical center>
  	<paper-input label="Buscar" value="{{searchTerms}}" on-keypress="{{handleKeyPressed}}"></paper-input>
	  <template repeat="{{book in books}}">
	    <book-card>
	      <img src="{{book.volumeInfo.imageLinks.thumbnail}}" width="70" height="70">
	      <h2>{{book.volumeInfo.title}}</h2>
	      <ul>
	      	<template  repeat="{{author in book.volumeInfo.authors}}"><li>{{author}}</li></template>
	      </ul>
	      <p>{{book.volumeInfo.description}}</p>
	    </book-card>
	  </template>
	</div>    
  </template>
  <script>
  	Polymer('book-list',{
  		handleKeyPressed: function(e){
  			if(e.keyCode === 13) {
  				this.query = this.searchTerms;	  				
  			}  			
  		}
  	});
  </script>
</polymer-element>